WCAG Color Contrast Requirements: A Complete Guide

What is Color Contrast?

Color contrast refers to the difference in luminance between foreground text and its background. Poor contrast makes text difficult or impossible to read for users with low vision, color blindness, or those viewing screens in bright sunlight.

WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.1 defines two levels of contrast compliance:

Level AA (Minimum)

• Normal text : 4.5:1 contrast ratio
• Large text (18pt+ or 14pt+ bold): 3:1 contrast ratio
• UI components and graphics : 3:1 contrast ratio

Level AAA (Enhanced)

• Normal text : 7:1 contrast ratio
• Large text : 4.5:1 contrast ratio

Most organizations aim for Level AA compliance, as it's the standard required by laws like the ADA.

Common Contrast Mistakes

1. Light Gray Text on White

A common design trend that fails accessibility:

/* Bad: Only 2.5:1 ratio */
color: #999999;
background: #ffffff;

/* Good: 4.6:1 ratio */
color: #767676;
background: #ffffff;

2. Placeholder Text

Form placeholders often have insufficient contrast:

/* Bad */
::placeholder {
  color: #cccccc;
}

/* Good */
::placeholder {
  color: #757575;
}

3. Text on Images

Text overlaid on images needs careful consideration. Use:

• Semi-transparent overlays
• Text shadows
• Solid background boxes behind text

How to Test Contrast

Browser DevTools

Chrome and Firefox DevTools show contrast ratios when you inspect text elements.

Online Tools

Use ClearA11y to scan your entire page for contrast issues and get AI-powered fix suggestions.

Manual Calculation

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

Where L1 is the lighter color's relative luminance and L2 is the darker color's.

Fixing Contrast Issues

When you find contrast issues, you have several options:

1. Darken the text : Usually the easiest fix
2. Lighten the background : If you need to keep brand colors
3. Increase font size : Large text has lower requirements
4. Add a background : For text on images

Test Your Site

Don't guess about your site's accessibility. Scan your website with ClearA11y to find all contrast issues and get copy-paste code fixes.