What each level requires
AA is what websites usually need; AAA is stricter.
| Use | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24px, or 18.66px bold) | 3:1 | 4.5:1 |
| Icons, field borders and buttons | 3:1 | — |
Why contrast matters
Reading on phones. Most visitors browse on phones, and low-contrast text is hard to read in bright light.
Every visitor. Good contrast helps older visitors, people with low vision or color blindness, and everyone else too.
Buttons. Button text needs contrast with the button color itself, not the page background.
Google’s audit. Google’s Lighthouse checks text contrast as part of its Accessibility score.
FAQ
What is a contrast ratio?
A number from 1 to 21 comparing the luminance of the text and background colors. Black on white is 21:1; a color on itself is 1:1.
What’s the difference between AA and AAA?
Two levels of the WCAG accessibility standard. AA is what websites and public bodies usually need; AAA is stricter and recommended for long reading.
What counts as large text?
Under WCAG: 24px or larger, or 18.66px or larger when bold.
Why does 4.49 fail?
The standard doesn’t allow rounding: the ratio must actually reach 4.5. So we show the number cut, not rounded.
Can I check transparent colors?
Yes. Enter something like rgba(0, 0, 0, 0.6) and we use the color as it actually appears on the background.
How are alternatives suggested?
Only the color’s lightness changes, keeping its hue, until it reaches the ratio, so it stays close to your brand color.