Color Accessibility Guide
Make your designs accessible to everyone. Learn about WCAG contrast requirements, color blindness, and best practices for inclusive design.
WCAG Contrast Requirements
| Level | Ratio | Applies To |
|---|---|---|
| AAA Large | 4.5:1 | Large text (18pt+ or 14pt+ bold) |
| AA Normal | 4.5:1 | Normal text (under 18pt) |
| AA Large | 3:1 | Large text (18pt+ or 14pt+ bold) |
| AAA Normal | 7:1 | Normal text (under 18pt) |
💡 Quick tip: Large text is 18pt (24px) regular or 14pt (19px) bold. Most body text is "normal" and needs 4.5:1 contrast minimum for AA compliance.
Good Color Combinations
❌ Avoid These Combinations
Types of Color Blindness
Protanopia
1% of menRed blindness - difficulty distinguishing red from green
⚠️ Avoid: Red-green distinctions without other cues
Deuteranopia
6% of menGreen blindness - similar to protanopia
⚠️ Avoid: Red-green distinctions without other cues
Tritanopia
0.01%Blue blindness - difficulty with blue-yellow
⚠️ Avoid: Blue-yellow as only distinguisher
Achromatopsia
0.003%Complete color blindness - sees only grayscale
⚠️ Avoid: Relying on color alone for any information
Accessibility Best Practices
Add icons, patterns, or text labels. Error states need more than just red.
Use color blindness simulators to verify your design works for everyone.
High contrast mode, dark mode, and user preference respect.
Hover, focus, active, and disabled states all need adequate contrast.
Testing Tools & Resources
Check Your Color Contrast!
Use our color picker to find accessible color combinations instantly.
🎨Open Color Picker