Quick answer
Color contrast is the difference in brightness between two colors placed next to each other — most often text against its background. It's measured as a ratio from 1:1 (no contrast) to 21:1 (pure black on white), and WCAG sets specific minimum ratios, commonly 4.5:1 for normal text at Level AA, that text and interface elements need to meet to stay legible.
What is color contrast?
The difference is expressed as a ratio, from 1:1 (no contrast at all) to 21:1 (pure black on pure white). A higher ratio means the colors are easier to tell apart. A lower ratio means they start to blend together, especially for anyone with reduced visual acuity.
Where contrast applies
Contrast isn't only about body text. It also covers icons, form field borders, buttons, and any other element that needs to stand out from what's behind it.
How color contrast is measured
The ratio isn't judged by eye. It's calculated from each color's relative luminance, a value based on its RGB components. That value approximates how bright the color appears to the human eye. Two luminance values are plugged into a standard formula, and the result is the contrast ratio.
Checking it in practice
Nobody does this math by hand. A contrast checker tool takes a foreground and background color and returns the ratio automatically. It also tells you whether that ratio passes or fails against the relevant threshold. The part worth knowing isn't the formula — it's which threshold applies to the element in front of you.
Color contrast requirements under WCAG
WCAG sets specific, testable thresholds. It doesn't just say "make text readable."
Level AA requirements
Under WCAG 2.1 Level AA, normal text needs a ratio of at least 4.5:1. Large text — 18pt regular or 14pt bold and up — only needs 3:1. Bigger letterforms stay legible at lower contrast, which is why the threshold drops.
Non-text contrast
A separate rule covers non-text elements. Interface components like button borders and form field outlines need 3:1. So do graphical elements that carry meaning, such as icons.
Level AAA and exemptions
Level AAA raises the bar further: 7:1 for normal text, 4.5:1 for large text. Most legal and procurement standards reference AA, not AAA. Decorative elements and logos are generally exempt, since they don't need to convey information on their own.
Why color contrast matters for accessibility
Insufficient contrast doesn't just look washed out. It makes text genuinely unreadable for a meaningful share of visitors.
Vision-related barriers
Low vision and certain forms of color blindness reduce a person's ability to distinguish subtly different shades. Text that looks fine to someone with typical vision can be functionally invisible to someone without it.
Situational barriers
Glare on a phone screen in direct sunlight, an aging display with a dimmer backlight, or a low-quality screen all reduce effective contrast for any reader — putting a fully sighted person in the same position as someone with a vision impairment.
Why audits catch this first
Contrast is one of the few accessibility requirements with a hard numeric threshold, making it one of the most consistently checked items in an audit. A page can fail on contrast alone even when everything else is handled correctly.
Color contrast in design vs. development
Design and development aren't competing over who owns color contrast. They're responsible for two different points where it can fail, and both have to hold for the final product to actually meet the requirement.
What design owns
Design picks the palette. The job is choosing a foreground and background pairing that clears the required ratio, early enough that the color system doesn't need reworking later.
What development owns
Development decides whether that choice survives contact with a real interface. A button that meets 4.5:1 in its default state can drop below threshold in a hover, disabled, or focus state, if those variants aren't checked separately. A color token that passes on a solid background can fail over an image or a gradient.
Why it has to be checked twice
Passing a checker in the design file doesn't mean the work is done. Contrast has to be verified again once the interface is actually built, across its interactive states — not just in the static mockup.
How to check color contrast
Manual checks
Start with a dedicated contrast checker: enter a foreground and background color, and it returns the ratio along with a pass or fail against AA and AAA. Design tools like Figma have plugins that check contrast directly on a mockup. Browser developer tools usually show a contrast ratio when inspecting a text element.
Automated checks
Automated accessibility scanners can check contrast at scale, across an entire site.
Where automation falls short
Scanners only catch what's programmatically detectable. Text rendered inside an image, text over a background image or video, and content in non-standard components can all slip past a scan and need a manual check instead.
For that reason, contrast is usually confirmed twice: once automatically across the whole site, and once manually on the handful of components — hero banners, custom widgets, anything with a non-solid background — where automation is least reliable.
