What a contrast checker tells you
Colour contrast is the measured difference in brightness between text and the surface behind it.
The Web Content Accessibility Guidelines (WCAG) express that difference as a single
contrast ratio, ranging from 1:1 (two identical colours, completely
unreadable) to 21:1 (pure black on pure white). This tool takes the two hex colours you
enter, computes that ratio, and tells you immediately whether the pairing meets the AA and AAA
thresholds for body text, large text and interface elements.
Under the hood it converts each colour to its relative luminance. Each channel is
first linearised (the sRGB gamma curve is undone), then combined with the perceptual weights
0.2126·R + 0.7152·G + 0.0722·B — green counts most because our eyes are most sensitive to
it. The two luminances feed the WCAG formula (L1 + 0.05) / (L2 + 0.05), where L1 is the
lighter colour. The live preview then paints your real colours so you can sanity-check the number with
your own eyes.
A worked example
Take white text #FFFFFF on the brand purple #6650E8. White has a luminance of
1.0; the purple works out to about 0.11. The ratio is
(1.0 + 0.05) / (0.11 + 0.05) ≈ 6.6:1. That comfortably clears AA for normal text (4.5:1)
and AAA for large text (4.5:1), but it falls just short of AAA for normal text (7:1) — so a heading in
this pairing is gold-standard while fine print is merely solid.
WCAG 2.1 contrast thresholds
| Content | AA | AAA |
|---|---|---|
| Normal text (under 18pt / 24px) | 4.5:1 | 7:1 |
| Large text (18pt / 24px, or bold 14pt) | 3:1 | 4.5:1 |
| UI components & meaningful graphics | 3:1 | n/a |
A practical rule: aim for 4.5:1 everywhere you can, treat 3:1 as the absolute floor for anything interactive, and remember that contrast alone is not accessibility — never rely on colour as the only way to convey meaning, and always keep focus states visible.