Contrast Checker
Pick a text colour and a background colour and get an instant WCAG contrast ratio, a live preview of the pair, and clear pass/fail verdicts for AA and AAA — for both normal and large text.
Settings
Output
The quick brown fox jumps over the lazy dog.
Pack my box with five dozen liquor jugs. 0123456789 — how vexingly quick daft zebras jump!
Large text means 18pt and up, or 14pt and up in bold. Thresholds: AA needs 4.5:1 (normal) or 3:1 (large); AAA needs 7:1 (normal) or 4.5:1 (large).
How it works
Each colour is reduced to a single number called relative luminance — roughly, how bright it looks to a human eye. The formula weights green the most and blue the least, because that is how our eyes actually respond. The contrast ratio then compares the two luminances on a scale from 1:1 (identical) to 21:1 (black on white).
WCAG 2.1 turns that number into four verdicts. AA is the level most accessibility policies require; AAA is stricter and usually reserved for body text. Large text gets easier thresholds because thicker strokes stay readable at lower contrast.
The honest limit: this is computed math, not perception. The same pair scores identically on a calibrated monitor and on a dim laptop in bright sunlight — but you will not read them equally well. Use the ratio as the part that travels, and still look at the preview with your own eyes.