Color Contrast Checker: WCAG 2.1 Accessibility for Web Designers

Roughly 1 in 12 men and 1 in 200 women have some form of color-vision deficiency, and a much larger group has low vision, glare sensitivity or simply uses screens in sunlight. Color contrast is the simplest, highest-impact accessibility fix you can ship today. Our Color Contrast Checker measures the ratio between any two colors and tells you instantly whether they pass WCAG 2.1.

What is contrast ratio?

WCAG defines contrast as the ratio between the relative luminance of the lighter and darker colors:

$$ \text{contrast} = \frac{L_1 + 0.05}{L_2 + 0.05} $$

The result ranges from 1:1 (identical colors, invisible) to 21:1 (pure black on pure white). Higher is better.

The thresholds

Level	Normal text (< 18.66 px bold or < 24 px regular)	Large text	UI components
AA (minimum)	≥ 4.5 : 1	≥ 3 : 1	≥ 3 : 1
AAA (enhanced)	≥ 7 : 1	≥ 4.5 : 1	n/a

🎯 Targets: Aim for AA as your floor for body copy. Use AAA for long-form reading, medical/financial dashboards and accessibility-critical interfaces.

Why it matters legally

• EU: the European Accessibility Act becomes enforceable in 2025 for most consumer-facing digital services.
• USA: Section 508 mandates WCAG 2.0 AA for federal sites; ADA lawsuits regularly cite WCAG.
• UK: Public Sector Bodies Accessibility Regulations require AA.

A failing contrast is the #1 issue automated tools like Lighthouse, axe and WAVE flag — and it is the easiest to fix.

Common contrast traps

1. Light gray on white (#cccccc on #ffffff = 1.61) — extremely common in placeholder text. Fails AA badly.
2. Hover/focus states that drop contrast below the threshold.
3. Colored buttons with white labels. #7caaff blue on white is only 2.8:1 — fails for normal text.
4. Icons without labels. UI components must hit 3:1 against their adjacent background.
5. Overlay text on photos without a tinted scrim.

Beyond contrast

Color contrast is necessary but not sufficient:

• Don’t rely on color alone to convey meaning (errors should also have an icon and text).
• Test with simulators for protanopia, deuteranopia and tritanopia.
• Provide high-contrast mode via prefers-contrast: more media queries.
• Respect dark mode — re-check contrast in both themes.

How to use the tool

1. Pick a foreground (text) color via the color picker or paste a hex value.
2. Pick a background color the same way.
3. Read off the contrast ratio and the pass/fail badges.
4. Use the swap button to flip foreground and background.
5. Iterate on the preview pane until everything is green.

Open the Color Contrast Checker and audit your design system today. Every fixed ratio is a reader you didn’t lose.