Color Contrast Checker
WCAG 2.1 pass/fail for your text colors.
Large text sample 24px
Normal text sample 16px — the quick brown fox jumps over the lazy dog while reviewing quarterly accessibility compliance.
The thresholds, decoded
WCAG 2.1 measures contrast as a ratio from 1:1 (identical) to 21:1 (black on white). The legal-grade minimums: AA requires 4.5:1 for normal text and 3:1 for large text (≥24px, or ≥19px bold); AAA raises that to 7:1 and 4.5:1. Non-text UI elements — form borders, icon strokes, focus rings — need 3:1 under AA.
Contrast failures are the single most common accessibility issue found in audits, and they cost real conversions: low-contrast gray-on-white text is invisible to low-vision users and anyone reading on a phone in sunlight. If your pair fails, lighten the dark color or darken the light one — even small steps toward the extremes move the ratio fast.
FAQ
Does dark mode change anything?
The ratio math is identical on dark backgrounds — but beware pure white (#fff) on pure black, which causes halation for some readers; soften one end slightly.
Why does my ratio show 21:1 for black on white?
21:1 is the theoretical maximum. Any pure-black-on-pure-white pair reports exactly it, and everything else falls below.