Learn what WCAG color contrast is, how to calculate contrast ratios, and why accessibility matters for your website. Check yours free.

What is WCAG Color Contrast and Why Does It Matter?

WCAG color contrast is the measurable difference in brightness between text and its background. If that difference is too small, people with low vision or color blindness cannot read your content.

🎨 Try it free: Color Contrast Checker — Test WCAG 2.1 AA and AAA instantly.

What is a Contrast Ratio?

A contrast ratio compares the relative luminance of two colors, expressed as a ratio like 4.5:1.

| Ratio | Meaning | |---|---| | 1:1 | No contrast — invisible | | 3:1 | WCAG AA minimum for large text | | 4.5:1 | WCAG AA minimum for normal text | | 7:1 | WCAG AAA — enhanced accessibility | | 21:1 | Maximum — black on white |

WCAG AA vs WCAG AAA

WCAG AA (Legal Standard in Most Countries)

| Text Type | Minimum Ratio | |---|---| | Normal text (under 18pt) | 4.5:1 | | Large text (18pt+) | 3:1 | | UI components (buttons, inputs) | 3:1 |

WCAG AAA (Enhanced)

| Text Type | Minimum Ratio | |---|---| | Normal text | 7:1 | | Large text | 4.5:1 |

Pro Tip: Target AA everywhere, AAA for body text.

Why It Matters

Legal Compliance — The ADA (US), Equality Act (UK), and EN 301 549 (EU) require WCAG AA for most digital products.

User Reach — Over 2.2 billion people have vision impairment. Poor contrast excludes them all.

SEO — Sites that are difficult to read have higher bounce rates, negatively affecting rankings.

🎨 Try it free: Vision Simulator — See your design through 8 types of color blindness.

How to Check Your Contrast

Open the Contrast Checker
Enter your text color (foreground) HEX
Enter your background color HEX
See your ratio and AA/AAA pass/fail
Adjust until you pass

Common Failures

Grey text on white — Light grey (#9CA3AF) on white = 2.5:1. Fails AA.

Placeholder text — Often styled too light. Must still be 4.5:1.

Colored text on colored backgrounds — Always check it, don't assume.

Icon-only UI elements — Need 3:1 against their background.

How to Fix Contrast Issues

Option 1: Darken the text — #9CA3AF (fails) → #6B7280 (passes AA)

Option 2: Lighten the background — Adjust until you reach the minimum ratio

Option 3: Add a background behind text on images

.hero-text-wrapper {
  background: rgba(0, 0, 0, 0.6);
  padding: 1rem 1.5rem;
  border-radius: 8px;
}

FAQs

What is the minimum contrast ratio for WCAG AA? 4.5:1 for normal text, 3:1 for large text and UI components.

Does contrast ratio apply to images? No — applies to text and UI components. But text overlaid on images must still meet requirements.

Is WCAG compliance legally required? In many jurisdictions, yes. ADA (US), Equality Act (UK), EN 301 549 (EU) all reference WCAG.

What's the difference between WCAG 2.1 and 3.0? 3.0 introduces APCA — a more perceptually accurate algorithm. Not yet finalized or legally required.

Conclusion

The standard is clear: 4.5:1 for normal text, 3:1 for large text and UI. Use our Contrast Checker to verify, and the Accessibility Checker for full palette audits.

What is WCAG Color Contrast and Why It Matters