Color Contrast Checker

Contrast ratio is a single number, from 1:1 (identical colors) to 21:1 (pure black on pure white), that measures the difference in relative luminance between two colors. WCAG sets thresholds because roughly one in twelve people has some form of color or vision difference, and millions more read on phones in bright sunlight, on cheap panels, or while tired. Good contrast isn't a niche accommodation — it's what makes text legible for everyone, in every condition.

The thresholds aren't arbitrary. 4.5:1 for normal text and 3:1 for large text (AA) are the legal and practical baseline cited by the ADA, EAA and most procurement rules; 7:1 and 4.5:1 (AAA) are the gold standard for body-heavy reading. Larger text needs less contrast because thick strokes are easier to resolve — which is why a headline can pass at a ratio where the same color would fail as fine print. The UI threshold (3:1) extends the same logic to icons, input borders and chart elements that carry meaning.

Luminance, not lightness, is what counts — and that surprises people. Two colors with the same HSL lightness can have very different luminance because the eye is far more sensitive to green than to blue. That's why a saturated blue on black can fail while a muted yellow on black sails through. The honest test is the ratio, not how “different” the colors look to you, which is exactly why this checker computes the real WCAG formula and shows a live preview at three sizes rather than asking you to eyeball it.

When a pair fails, you usually don't need to abandon the colors — just push the text's lightness toward one end until it passes, which the one-click fix does for you while keeping the hue. Build the rest of your system around colors that pass: assemble the palette in the generator, expand a primary into accessible shades with the Tailwind generator, and verify each text pairing here before it ships.