WCAG Color Contrast Explained

Light grey text on a white background looks elegant in a mockup and disappears in real life — on a phone in sunlight, or for anyone with less-than-perfect vision. Color contrast is the accessibility rule that stops this, and it's one of the easiest wins for both usability and your Lighthouse score.

What “contrast ratio” means

Contrast is expressed as a ratio between the lighter and darker color's brightness, from 1:1 (identical, invisible) to 21:1(black on white, maximum). It's not about hue — it's about luminance, how bright each color is. Two colors can look very different and still have poor contrast if they're similarly bright.

The AA thresholds (the ones you must hit)

WCAG level AA is the standard most laws and design systems target:

• 4.5:1 for normal body text.
• 3:1 for large text (24px, or 18.66px bold and up).
• 3:1 for meaningful UI components and graphics — button borders, input outlines, icons.

Large text gets a lower bar because bigger shapes are legible at lower contrast.

AA vs AAA

AAA is the enhanced level: 7:1 for normal text and 4.5:1for large. It's a worthy goal for body copy, but it's strict enough that hitting it everywhere often forces near-black text. Treat AA as the baseline you must meet and AAA as a target for your most important reading content.

How the ratio is calculated

Each color's channels are linearised and combined into a relative luminance value L. The ratio is then (L_light + 0.05) / (L_dark + 0.05). The 0.05 models ambient screen glare so pure-black comparisons don't blow up to infinity. You don't need to compute this by hand — but knowing it's luminance-based explains why a “bright” yellow fails on white.

Practical ways to pass

• Darken text, don't lighten backgrounds. Nudging grey text from #999 to #767676 often flips a fail to a pass.
• Don't rely on color alone. Links and error states need an underline or icon too, for color-blind users.
• Check placeholder and disabled text. These are the most common silent failures.
• Test hover and focus states, not just the resting color.

Why it helps SEO too

Contrast failures show up in Lighthouse and other automated audits, and those signals feed into how page quality is judged. Fixing contrast improves genuine readability and your scores — a rare two-for-one.

Check your colors

Drop your text and background colors into the color contrast checker to see the ratio and instant AA/AAA pass or fail, with a live preview. To experiment with shades, the color converter and color palette generator help you find an accessible variant that still fits your brand.