What the ratio means
WCAG expresses contrast as a ratio from 1:1 (no contrast: identical colors) to 21:1 (the maximum possible, pure black on pure white). It’s built from each colour’s relative luminance, how bright it appears, weighted the way the human eye actually perceives red, green and blue, not from how different the raw numbers look.
That weighting is why two colours can look similarly “different” and score very differently: pure blue (#0000FF) on white scores about 8.6:1, while pure red (#FF0000) on white scores under 4:1, because the eye is far less sensitive to blue than to red.
The thresholds
| Text type | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (18pt+, or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components & graphical objects | 3:1 | n/a |
AA is the level that matters for compliance. It’s what the ADA, EN 301 549, and most accessibility audits check against. AAA is a higher bar, generally reserved for content built specifically for low-vision users.
The UI-component threshold (3:1) is a separate WCAG 2.1 requirement for things like button borders, form field outlines and icons: it’s not about text at all, but it’s easy to overlook next to the text rules.
Why transparency changes the answer
A contrast checker that only looks at the two colours you typed can be quietly wrong. If your text colour has any transparency, what a reader actually sees is that colour blended with the background behind it, and that blended colour is usually lighter or darker, and always less saturated, than the value in your CSS.
This page composites a translucent foreground onto the background you entered before scoring it, the same way a browser renders it. A rgba(255,255,255,0.5) label over a dark background is scored as the mid-grey it actually looks like, not as white.
Getting from a failing color to a passing one
When normal text fails AA, the page searches the same hue and saturation (lighter in one direction, darker in the other) for the nearest shade that clears 4.5:1, and offers whichever needs the smaller change. That keeps your brand colour recognisable rather than replacing it with an unrelated one.
Sometimes no shade of a hue reaches 4.5:1 against a very close background (a pale yellow will never contrast well against white no matter how you adjust it), and in that case changing the background, or picking a different hue, is the real fix.
A quick sanity check
Pure black text (#000000) on pure white (#ffffff) always scores 21:1 (the theoretical maximum), which is a useful way to confirm any contrast tool, including this one, is doing the maths right.