Light grey text on white looks elegant and fails many readers. WCAG, the Web Content Accessibility Guidelines, turns “readable enough” into a number you can test.
The thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text means at least 24 px, or 18.66 px if bold. AA is the usual legal and policy target; AAA is stricter.
Real results
Using the Contrast Checker:
- #777777 on white is 4.48:1. That narrowly fails AA for normal text but passes for large text.
- #595959 on white is 7:1, which passes every level.
- Black on white is the maximum, 21:1.
The first result is the one that catches people out: a grey that looks fine misses the line by 0.02.
Using the checker
- Enter the text colour and the background colour as hex codes.
- Read the ratio and the pass or fail result for each level.
- Darken the text, or lighten the background, until the level you need passes.
How the ratio is calculated
The checker uses the formula from the WCAG specification. It converts each colour to relative luminance (a measure of perceived brightness) and divides the lighter by the darker, each with 0.05 added: (L1 + 0.05) ÷ (L2 + 0.05).
What contrast does not cover
The ratio is a test of colour pairs. It does not judge font size, thin weights, text over images or gradients, or states like hover and focus, so check those separately. Meeting the ratio is part of accessibility, not the whole of it.
Frequently asked questions
Do logos and decorative text need to pass?
WCAG exempts logos and purely decorative text, but user interface elements such as button borders and icons that carry meaning need 3:1.