Color Accessibility
Design for everyone with WCAG guidelines
Accessible design isn't just ethical — it's often legally required and good for business. About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. WCAG (Web Content Accessibility Guidelines) provides standards for ensuring your colors work for everyone.
WCAG Contrast Requirements
| Level | Normal Text | Large Text (18pt+) | UI Components |
|---|---|---|---|
AA (Minimum) The minimum acceptable standard. Required for most legal compliance. | 4.5:1 | 3:1 | 3:1 |
AAA (Enhanced) The gold standard. Recommended for body text and critical content. | 7:1 | 4.5:1 | 4.5:1 |
Contrast Examples
Sample Text
Black on White
21:1
Pass
Sample Text
Gray on White (AA)
4.54:1
Pass
Sample Text
Light Gray on White
2.94:1
Fail
Sample Text
White on Blue
4.5:1
Pass
Sample Text
White on Green
2.4:1
Fail
Sample Text
Gray on Dark
5.4:1
Pass
🎨 Designing for Color Blindness
Don't rely on color alone
Use icons, patterns, or text labels alongside color to convey meaning.
❌ Red = error, Green = success | ✅ ❌ Error + red, ✓ Success + green
Test with simulators
Use tools like Stark, Color Oracle, or Chrome DevTools to simulate color blindness.
8% of men and 0.5% of women have some form of color vision deficiency.
Avoid red/green combinations
The most common color blindness affects red-green perception. Use blue/orange instead.
For charts and data viz, use colorblind-safe palettes.
Deep Dive Articles
WCAG Contrast Requirements
The specific numbers you need to know for AA and AAA compliance.
8 min read
Designing for Color Blindness
How to ensure your designs work for 8% of male users with CVD.
9 min read
Accessibility Testing Tools
Browser extensions, plugins, and checkers for WCAG compliance.
6 min read
🛠 Accessibility Tools
- →WebAIM Contrast Checker — Free online tool for checking ratios
- →Stark — Figma/Sketch plugin for accessibility testing
- →Chrome DevTools — Built-in color blindness simulation
- →Aura Mixer — All generated palettes meet WCAG AA standards