WCAG Contrast Checker
Test any text and background colour against WCAG 2.1 thresholds. Live preview, pass/fail across every conformance level, and a one-tap fix when a pair falls short.
The quick brown fox
Large text — 24px bold
Normal body text at 16px. The five boxing wizards jump quickly. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.
Small print at 13px — captions, footnotes, legal disclaimers, and other secondary text often live down here.
How contrast is measured
The contrast ratio is calculated from the relative luminance of the two colours — a weighted measure of how much light each reflects, accounting for the human eye's greater sensitivity to green. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour's luminance and L2 the darker. Ratios run from 1:1 (identical colours, invisible) to 21:1 (pure black on pure white).
What the levels mean
AA is the conformance level most organisations and laws target (it's the legal standard under the ADA, EN 301 549, and most national accessibility acts). AAA is the enhanced level — stricter, not always achievable for every design, but the gold standard for body text in content-heavy products.
Large text means 18pt and larger, or 14pt and larger if bold (roughly 24px / 18.66px bold in CSS). Larger glyphs are legible at lower contrast, so the threshold drops from 4.5:1 to 3:1.
The UI & graphics check covers WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast): interface components like input borders, focus indicators, toggle states, and meaningful graphical objects must hit 3:1 against their surroundings.
A note on the limits of ratios
WCAG 2.x contrast math is a useful, testable proxy — but it isn't perfect. It treats all hues the same and can mis-rate certain colour pairs (notably some light-on-light and saturated combinations). The forthcoming APCA algorithm being explored for WCAG 3 models perceptual contrast more accurately. Until that lands as a standard, the ratios here remain the practical, legally-recognised benchmark — pass AA and you're on solid ground.