Color Contrast Accessibility: WCAG Requirements & How to Fix

Quick Definition: Color contrast is the difference in brightness between foreground (text) and background colors. WCAG requires a minimum contrast ratio so text is readable.

Color Contrast Explained

Color contrast measures how easily text can be distinguished from its background. Low contrast makes text difficult or impossible to read for users with low vision, color blindness, or those viewing screens in bright conditions.

**WCAG Contrast Requirements:**

**Normal text** (under 18pt or 14pt bold): - Level AA: 4.5:1 minimum ratio - Level AAA: 7:1 minimum ratio

**Large text** (18pt+ or 14pt+ bold): - Level AA: 3:1 minimum ratio - Level AAA: 4.5:1 minimum ratio

**UI components and graphics:** - Level AA: 3:1 minimum ratio

Common contrast failures: - Light gray text on white backgrounds - Placeholder text that's too light - Colored text on colored backgrounds - Text over images without sufficient overlay

Why Color Contrast Matters for Your Website

For Users

8% of men have color blindness. Millions more have low vision. Poor contrast excludes these users entirely.

Legal Risk

Color contrast is one of the most common WCAG failures cited in lawsuits. It's easy to identify and prove.

SEO Impact

Readable content leads to better engagement. Users who can't read your content will bounce.

How to Check for Color Contrast Issues

AccessiCheck automatically checks all text on your page against WCAG contrast requirements and identifies specific failures.

Check Your Website Now

How to Fix Color Contrast Issues

1

Use a contrast checker

Tools like WebAIM's contrast checker let you test color combinations before implementing.

/* Bad: 2.5:1 ratio */
color: #999;
background: #fff;

/* Good: 7:1 ratio */
color: #595959;
background: #fff;
2

Increase text darkness

The simplest fix is usually making text darker. Move from light gray to dark gray or black.

3

Add background overlays

For text over images, add a semi-transparent dark overlay to ensure consistent contrast.

.hero-text {
  background: rgba(0,0,0,0.6);
  padding: 1rem;
}
4

Don't rely on color alone

Use additional indicators (icons, underlines, bold) alongside color for meaning.

Related Terms

WCAG

Check Your Website for Color Contrast Issues

Get a free accessibility scan and see exactly what needs to be fixed.

Start Free Scan