WCAG Color Contrast: What You Need to Know for Accessibility

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Add in situational impairments — bright sunlight on a phone screen, aging eyes, low-brightness mode to save battery — and the number of people affected by poor contrast is enormous.

The Web Content Accessibility Guidelines (WCAG) define specific contrast ratios that ensure text is readable for as many people as possible. Meeting these standards is not just good ethics — it is increasingly a legal requirement in the US, EU, and many other jurisdictions.

What Is a Contrast Ratio?

A contrast ratio compares the relative luminance of two colors on a scale from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white). Luminance is not the same as brightness — it accounts for how the human eye perceives different wavelengths of light.

The formula uses the relative luminance of each color:

ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the lighter color's luminance and L2 is the darker color's luminance. You do not need to calculate this by hand — that is what contrast checkers are for.

WCAG AA vs. AAA: What Is the Difference?

WCAG defines two conformance levels for contrast:

AA is the standard you should meet at minimum. Most accessibility laws reference WCAG AA. AAA is the gold standard — significantly harder to achieve with colorful designs, but ideal for body text and critical interfaces.

Real Examples: Pass vs. Fail

The yellow example above is a common mistake in web design. Yellow and white both have high luminance, so despite looking "different" to most people, the contrast ratio is terrible. People with low vision or color blindness simply cannot read it.

How to Fix Low Contrast

When your colors fail a contrast check, you have several options:

1. Darken the text or lighten the background

The most straightforward fix. Shift one of the colors until the ratio passes. Most contrast tools show you the nearest passing color automatically.

2. Increase font size or weight

Large text (24px+ or 18px+ bold) only needs a 3:1 ratio for AA. If your text is used in headings, making it slightly larger can bring it into compliance without changing colors.

3. Add a text shadow or background overlay

For text over images, add a semi-transparent dark overlay behind the text. A background: rgba(0,0,0,0.6) behind white text ensures readability regardless of the image content underneath.

4. Use your brand color for accents, not body text

Many brand colors fail contrast requirements at body text size. Use them for borders, icons, and decorative elements instead. Keep body text in high-contrast neutrals.

Beyond Color: Other Accessibility Considerations

• Never convey information with color alone. Use icons, patterns, labels, or text in addition to color. A red/green status indicator is invisible to people with deuteranopia.
• Test with browser extensions. Tools like the Chrome Accessibility DevTools, axe, and WAVE can audit your entire page at once.
• Check focus indicators. Interactive elements need visible focus outlines with at least 3:1 contrast against adjacent colors. The default browser outline is usually sufficient — do not remove it without replacing it.
• Test in grayscale. Apply filter: grayscale(1) to your page temporarily. If information disappears or becomes ambiguous, you are relying too heavily on color.
• Dark mode needs attention too. Many dark themes use low-contrast gray text that fails AA. Light gray on dark gray can look sleek but be unreadable for many users.

Common Color Combinations That Pass AA