Color contrast checker
Check whether text will actually be readable, against the accessibility standard.
- Runs in your browser — your text is never sent anywhere
- No sign-up, no quotas, free to use as often as you like
How it works
Light grey text on white is the most common accessibility failure on the web, and it is entirely avoidable. The accessibility guidelines define contrast as a precise ratio, so whether a pairing passes is a matter of arithmetic rather than opinion.
How the ratio is calculated
Each colour's relative luminance is computed the way the guidelines specify — with the gamma correction applied per channel — and the ratio is taken between the lighter and darker. The result matches what an accessibility audit will report, because it is the same formula.
The thresholds
Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text — roughly 24px, or 18.7px if bold — needs only 3:1 for AA and 4.5:1 for AAA. Interface components and meaningful graphics need 3:1. AA is what most organisations and most legislation require.
Why large text is allowed less
Bigger letterforms have more pixels making up each stroke, so they stay legible at lower contrast. This is why a heading can use a lighter grey than body text can.
What the ratio does not capture
It says nothing about colour blindness, which is a separate check, and nothing about whether the text is large enough or the typeface legible. A passing ratio is the floor, not proof of readable design.
Color contrast checker — questions
What contrast ratio do I need?
4.5:1 for normal text at AA, 3:1 for large text. AAA raises those to 7:1 and 4.5:1.
What counts as large text?
Roughly 24px and above, or 18.7px and above if bold.
Does passing mean my design is accessible?
No. Contrast is one requirement among many; it says nothing about colour blindness, text size or legibility.