Contrast Checker

Drop an image or click to upload Drop up to 200 images, or click to choose them

Paste a foreground and background colour (or pick from a screenshot); get the contrast ratio and which WCAG levels it passes. WCAG 2.1 AA is the legal accessibility baseline in most jurisdictions; AAA is the higher standard recommended for critical content.

The thresholds

• WCAG AA, normal text: 4.5:1 minimum.
• WCAG AA, large text (18pt+ or 14pt+ bold): 3:1 minimum.
• WCAG AAA, normal text: 7:1 minimum.
• WCAG AAA, large text: 4.5:1 minimum.
• Non-text UI components (buttons, form borders): 3:1 minimum (WCAG 2.1+).

Why contrast matters

Low-contrast text is unreadable for users with low vision (about 4% of the population), users in bright sunlight, users on cheap monitors, and aging eyes (everyone, eventually). Many design systems default to grey-on-grey because it looks elegant on a designer's calibrated 5K display — and is unreadable elsewhere.

Failing WCAG AA is also legally actionable in the US (ADA Title III), EU (EAA), and many other jurisdictions. Cheap insurance: run every text/background pair through a checker before shipping.

What we report

1. Contrast ratio as a number (e.g. 4.71:1).
2. Pass/fail for each WCAG level and text size.
3. Suggested fixes: the closest darker foreground or lighter background that would pass.
4. Live preview with sample text in the colour pair.

Pair with the colour-blindness simulator

Contrast and colour-blindness are different accessibility axes. Run Color Blindness Simulator on the same UI to verify it works for users with CVD too.