What is WCAG?
The Web Content Accessibility Guidelines (WCAG) are international standards for making web content accessible to people with disabilities. Color contrast is a critical component.
Why Color Contrast Matters
285M
285 million people worldwide have visual impairments
8%
8% of men have some form of color blindness
☀
Poor contrast affects readability for everyone, especially in bright environments
WCAG Contrast Requirements
AA
AA (Minimum)
Normal Text4.5:1
Large Text3:1
UI Components3:1
AAA
AAA (Enhanced)
Normal Text7:1
Large Text4.5:1
UI Components3:1
What is "Large Text"?
• At least 18pt regular weight• At least 14pt bold weight
Common Contrast Mistakes
Aa
Light gray on white
Hard to read
Use darker gray (#595959 minimum)
Aa
Low contrast brand colors
Fails accessibility
Create accessible alternatives
Aa
Only using color to convey meaning
Colorblind users miss information
Add text labels or patterns
Aa
Placeholder text too light
Users can't see form hints
Use sufficient contrast for placeholders
Quick Tips for Accessible Colors
- 1Start with sufficient contrast - Don't try to fix it later
- 2Test with real users - Include people with visual impairments
- 3Don't rely on color alone - Use icons, text, or patterns
- 4Consider all states - Hover, focus, disabled states need contrast too
- 5Document your color system - Make accessibility part of your design system