Contrast is the difference in relative luminance between foreground and background colors. It is one part of accessible design, and one that can be checked before text reaches production.
Know which threshold applies
For WCAG level AA, ordinary text needs at least 4.5:1 contrast against its background. Large text needs at least 3:1. Level AAA asks for 7:1 for ordinary text and 4.5:1 for large text. Meaningful non-text interface components have a separate 3:1 requirement under WCAG 1.4.11.
A ratio is not a complete accessibility score. Font weight, size, anti-aliasing, background images, focus indicators, and state changes also affect legibility. Check the actual rendered design, not only two hex codes in isolation.
Test a real interface pair
If a pair fails, darken the foreground, lighten the background, or increase the separation between them. Changing text size alone is not a substitute for readable contrast unless the text truly qualifies as large text under the criterion.
Enter the exact foreground and background colors used by the component.
Compare the ratio with the threshold for that specific text or boundary.
Test hover, disabled, focus, and error states as separate pairs where they convey information.
Inspect the result on a phone and at increased browser zoom.
Avoid common shortcuts
Do not use a muted color for essential instructions just because it looks quiet. Avoid judging contrast by eye on a bright monitor. For gradients or images, sample the least favorable area behind the text. Keep important words as text rather than baking them into an image.
Sources and further reading
Primary documentation and references used to support this guide.