How to read your contrast result
Enter any two colors above — type a hex value or use the color picker — and this tool computes the exact WCAG contrast ratio between them. The preview shows your colors on real text so you can sanity-check legibility, not just the number.
- AA (4.5:1 normal / 3:1 large) — the level the ADA is read against in practice, and the one we build to.
- AAA (7:1 normal / 4.5:1 large) — enhanced contrast; good for body text, not always achievable for brand colors.
- Non-text 3:1 — for buttons, form borders, icons, and chart colors under 1.4.11.
When a pair fails AA, the tool suggests the nearest color that passes — keeping your hue where it can, only shifting lightness. That keeps your brand recognizable while clearing the bar.
Why color contrast matters so much
Low contrast is the single most common WCAG failure on the web, and it's a frequent trigger in ADA website lawsuits. It affects people with low vision, color vision deficiency, and anyone using a screen in bright sunlight. Because it's easy to measure, it's also easy for a plaintiff's tester to document — which is exactly why fixing it early is high-leverage.
Contrast is necessary but not sufficient. To see what your colors look like to someone with color blindness, try the color blindness simulator. To build a whole palette that passes from the start, use the accessible palette generator.