Color contrast checker (WCAG)

What the contrast ratio actually measures

The number this tool reports is a contrast ratio between 1:1 (identical colours) and 21:1 (pure black on pure white). It isn't a simple difference in brightness — it's computed from each colour's relative luminance, a weighted blend of its red, green and blue channels (green counts for most, blue for least, mirroring how the eye responds) after undoing the sRGB gamma curve. The ratio is then (lighter + 0.05) ÷ (darker + 0.05). That's the exact formula in WCAG, so the figure here matches what an accessibility auditor's tooling produces — not an approximation.

The four thresholds, and what "large text" means

WCAG sets four bars. Normal body text needs 4.5:1 for AA and 7:1 for the stricter AAA. Large text gets an easier ride — 3:1 for AA and 4.5:1 for AAA — because bigger glyphs stay legible at lower contrast. "Large" has a precise definition: at least 24px (18.66px if bold), roughly 18pt / 14pt bold. There's also a separate 3:1 minimum for non-text essentials — icon strokes, input borders, focus rings, chart segments — so a control isn't invisible just because it carries no words. This checker previews real text at both sizes so you can see the pass/fail against each bar rather than trusting the number alone.

Contrast is necessary, not sufficient

A passing ratio guarantees legibility, but it doesn't make a design colour-blind-safe on its own: red and green can have ample contrast against a background yet be indistinguishable from each other to someone with the most common colour-vision deficiency. That's why error/success states should carry an icon or label, not colour alone, and why links in body text usually need an underline. Use contrast to guarantee you can read it, and redundant cues to guarantee you can tell things apart. Build a harmonious set of compliant colours to begin with using the palette generator.