Color Accessibility: A Developer's Guide to WCAG Contrast

Why Color Contrast Matters

1 in 12 men and 1 in 200 women have some form of color vision deficiency. Poor color contrast makes text unreadable for millions of users — and it's one of the most common accessibility failures on the web.

WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) define two levels:

| Level | Normal Text | Large Text | |-------|------------|------------| | AA (minimum) | 4.5:1 | 3:1 | | AAA (enhanced) | 7:1 | 4.5:1 |

Large text = 18px+ bold or 24px+ regular.

How Contrast Ratio Works

The contrast ratio ranges from 1:1 (no contrast, like white on white) to 21:1 (maximum contrast, black on white).

Formula: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance and L2 is the darker.

Common Mistakes

Light Gray on White

#999999 on #FFFFFF → 2.85:1 ❌ Fails AA
#767676 on #FFFFFF → 4.54:1 ✅ Passes AA

Brand Colors on Backgrounds

Many brand blues fail on white backgrounds:

#2B7DE9 on #FFFFFF → 3.75:1 ❌ Fails AA for normal text
#1B3A5C on #FFFFFF → 8.42:1 ✅ Passes AAA

Quick Fixes

1. Darken light colors — if your gray fails, go 1-2 shades darker
2. Add backgrounds — put text on a contrasting background card
3. Increase font weight — bold text at 18px+ qualifies as "large text"
4. Don't rely on color alone — use icons, patterns, or labels too

Check Your Colors

Use our Contrast Checker to test any color combination against WCAG AA and AAA standards. It shows:

• Contrast ratio
• AA pass/fail for normal and large text
• AAA pass/fail for normal and large text
• Live preview of how your text looks

Also try our Color Picker and Palette Generator to find accessible color combinations.