Fix Color Contrast

Meet WCAG contrast requirements so everyone can read your text.

Your text is too light. WCAG requires specific contrast ratios: 4.5:1 for body text, 3:1 for large text. Here’s how to check yours and fix what fails.

Minimum WCAG Contrast Ratios

WCAG 2.1 Level AA requires:

• Normal text: 4.5:1 contrast ratio minimum
• Large text (18px+ bold or 24px+ regular): 3:1 minimum
• UI components and graphics: 3:1 minimum

Level AAA (enhanced) requires 7:1 for normal text—harder to achieve but better for everyone.

Quick Checks

What Passes (4.5:1+)

• #000000 on #FFFFFF ? 21:1 ? (maximum possible)
• #333333 on #FFFFFF ? 12.6:1 ?
• #595959 on #FFFFFF ? 7:1 ? (AAA compliant)
• #767676 on #FFFFFF ? 4.5:1 ? (AA minimum)

What Fails

• #999999 on #FFFFFF ? 2.8:1 ? (common “light gray” failure)
• #AAAAAA on #FFFFFF ? 2.3:1 ?
• Placeholder text in light gray ? usually fails

Testing Tools

Pick the tool that fits your workflow and budget.

• WebAIM Contrast Checker — Enter two colors, get the ratio
• TPGI Colour Contrast Analyser — Desktop app, eyedropper tool
• Chrome DevTools ? Elements ? Computed ? hover over color ? shows ratio

Common Failures

1. Placeholder Text

That light gray “Enter your email” placeholder? Probably fails. Either darken it or add a visible label.

2. Disabled Buttons

Grayed-out buttons often fail contrast. That’s technically allowed by WCAG (disabled elements are exempt), but consider whether users understand the button is disabled.

3. Text Over Images

White text on a photo works in some spots, fails in others. Solutions:

• Add a dark overlay behind text
• Add a text shadow
• Use a solid background behind the text

4. Brand Colors

“But our brand yellow is #FFD700!” Then don’t use it on white backgrounds for text. Use it for large graphics where 3:1 is acceptable, or darken it for text use.

The Fix Pattern

1. Run contrast checker on every text/background combo
2. Fix anything below 4.5:1 by darkening text or lightening background
3. Check hover and focus states too
4. Check dark mode if you have one

Edge Cases That Tools Miss

Automated checkers catch static text-on-background pairs, but several failure patterns slip through.

Dark-on-dark interfaces: Dark mode designs often pair #333 text on #1a1a1a backgrounds—technically above 3:1 for large text, but unreadable in bright environments. Test dark themes at daytime screen brightness, not in a dim room.

Text over gradients: A heading that passes contrast against the left side of a gradient may fail against the right side. Check the lowest-contrast point, not the average. CSS overlay with rgba(0,0,0,0.5) is more reliable than hoping the gradient stays dark enough.

Hover and focus states: A link that passes at rest may fail on hover if you lighten it. Focus rings that use your brand color need 3:1 against both the element background and the page background. Check every interactive state, not just the default.

Semi-transparent text: Text using opacity or rgba colors reduces effective contrast. A pure white heading at opacity: 0.7 on a white background drops well below passing. Compute the flattened color before checking the ratio.

Practical walkthrough: In Chrome DevTools, inspect any text element, click the color swatch in the Styles panel, and the contrast ratio appears with a pass/fail indicator. Expand it to see both AA and AAA thresholds. For bulk checking, run the axe DevTools extension—it flags every failing element with a CSS selector you can search for directly.

Confirming Contrast Ratios Pass

• Text contrast ratio is at least 4.5:1 (WCAG AA)
• UI components have 3:1 contrast against background
• Color is not the only way information is conveyed
• Automated tools (WAVE, axe) show no contrast errors

Sources

• WebAIM Contrast Checker
• TPGI Colour Contrast Analyser