Contrast Ratio Checker
Body text sample for measuring readability on this pair.
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
WCAG accessibility rules boil down to one number: the contrast ratio between text and background, from 1:1 (invisible) to 21:1 (black on white). This checker computes the official formula - relative luminance per the W3C spec - and reports the four verdicts that matter: AA and AAA, for normal and large text.
The preview renders your actual pair at body-text size, because a ratio that passes on paper can still read badly once real font smoothing gets involved.
How to use
- Pick text and background colors; the ratio and all four badges update live, with a sample paragraph in the exact pair.
- The chips include the famous near-miss: #777777 on white scores 4.48 - technically failing AA by two hundredths.
- Check both text-on-background and UI components (buttons, icons) - the same 3:1 minimum governs non-text elements.
Frequently asked questions
Why is the AA threshold 4.5 to 1?
The WCAG rationale: 4.5:1 is the contrast lost by readers with 20/40 vision (the legal driving-visual-acuity level) relative to 20/20 - it compensates for moderate low vision, not for ideal conditions. Large text gets 3:1 because bigger glyphs carry more inherent contrast.
What counts as large text?
18pt (24 CSS pixels) regular weight, or 14pt (about 18.7px) bold. Below those sizes the 4.5:1 AA bar applies - which is why the same gray that passes on a headline fails on body copy.
Why does the ratio max out at 21 to 1?
Pure white’s relative luminance is 1.0 and pure black’s is 0.0, so the formula tops out at (1.0+0.05)/(0.0+0.05) = 21. Any pair you pick lives between 1:1 and 21:1 - the number is a ratio, not a score out of 100.
Do gradients need contrast checking too?
Yes - and gradients are the sneaky case: text over a gradient must clear the threshold against the WORST point under the text, not the average. A gradient drifting from #333333 to #666666 under white text starts at AA and ends below it halfway through.