Ensuring color choices work for everyone, including people with vision differences.
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Beyond color blindness, many more people experience situational impairments—bright sunlight, aging eyes, low-quality displays. Accessible color design serves everyone.
Why Accessibility Matters
Ethical Imperative
Excluding users based on vision differences is discrimination. Good design serves the full range of human experience.
Legal Requirements
Many jurisdictions require digital accessibility:
- ADA (Americans with Disabilities Act) in the US
- EAA (European Accessibility Act) in the EU
- AODA in Canada
- Similar laws worldwide
Non-compliance creates legal exposure.
Business Impact
- Larger addressable audience
- Better experience for all users
- Reduced support burden
- Brand reputation benefits
Better Design
Accessible design often improves experience for everyone. High contrast is easier for all users. Not relying on color alone creates clearer communication.
Types of Color Vision Deficiency
Red-Green (Most Common)
Protanopia/Protanomaly: Reduced sensitivity to red. Affects ~2% of men.
Deuteranopia/Deuteranomaly: Reduced sensitivity to green. Affects ~6% of men.
Result: Red and green appear similar. Orange, yellow, and green can be confused. Pink may appear gray or blue.
Blue-Yellow (Rare)
Tritanopia/Tritanomaly: Reduced sensitivity to blue. Affects <1% of population.
Result: Blue and yellow are confused. Blue may appear green.
Complete Color Blindness (Very Rare)
Achromatopsia: No color perception. Vision in grayscale only.
Affects approximately 1 in 30,000 people.
WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) define contrast ratios for text legibility.
Contrast Ratio
A comparison of luminance (perceived brightness) between foreground and background. Range is 1:1 (no contrast) to 21:1 (black on white).
Level AA (Minimum)
- Normal text: 4.5:1 minimum contrast ratio
- Large text (18pt+ or 14pt bold): 3:1 minimum
- UI components and graphics: 3:1 minimum
Level AAA (Enhanced)
- Normal text: 7:1 minimum contrast ratio
- Large text: 4.5:1 minimum
Meeting Requirements
Level AA should be the baseline for all design work. Level AAA is ideal where possible, especially for critical content.
Designing for Color Accessibility
Don't Rely on Color Alone
Color should never be the only way to convey information.
Bad: Red and green icons to show status Good: Red X and green checkmark with labels
Bad: Required fields marked only with red asterisk Good: Required fields marked with asterisk AND "required" label
Bad: Error messages only in red text Good: Error messages with icon, red text, AND error message
Use Sufficient Contrast
Test all color combinations for WCAG compliance:
Sample Text
The quick brown fox jumps over the lazy dog.
Small text for accessibility testing
Normal Text
Large Text
Tools:
- WebAIM Contrast Checker
- Stark (Figma/Sketch plugin)
- Color contrast analyzers in browser dev tools
Build contrast checking into design process, not just auditing.
Choose Accessible Color Combinations
Some color pairs are problematic:
- Red/green (most common CVD)
- Blue/purple (can look similar in some CVD)
- Light colors on light backgrounds
- Colors that rely on saturation differences alone
Safe strategies:
- Combine hue differences with value differences
- Use very light against very dark
- Test with color blindness simulators
Create Value Contrast
If colors were converted to grayscale, would distinctions remain clear?
Strong value contrast:
- Navy and white
- Dark purple and light yellow
- Black and orange
Weak value contrast:
- Red and green at similar brightness
- Blue and purple at similar brightness
- Two pastels of different hues
Testing for Accessibility
Automated Tools
Contrast checkers:
- WebAIM Contrast Checker (online)
- Colour Contrast Analyser (desktop app)
- axe DevTools (browser extension)
Color blindness simulators:
- Sim Daltonism (Mac)
- Color Oracle (Windows/Mac/Linux)
- Figma and Sketch plugins (Stark, Color Blind)
Manual Testing
- Grayscale test: View design in grayscale. Is hierarchy clear?
- Squint test: Blur vision. Do important elements stand out?
- Screen variation: Test on multiple devices, brightness levels
- User testing: Include users with color vision deficiencies
Accessible Palette Development
When creating brand palettes (see Palette Creation):
Build Accessibility In
Don't create the palette then check accessibility. Design for it from the start:
- Select primary colors that offer high contrast options
- Develop tint/shade scales with AA-compliant combinations marked
- Test brand color on white, black, and common backgrounds
- Create an accessibility-approved combination chart
Document Safe Combinations
In brand guidelines, specify:
- Which color combinations meet AA/AAA
- Which combinations are prohibited
- Alternative treatments when brand colors lack contrast
Provide Alternatives
When brand colors don't meet requirements:
- Approved darker/lighter variants for text use
- High-contrast alternatives for critical UI
- Monochrome options for accessibility-critical contexts
Common Patterns
Text and Backgrounds
| Text Color | Background | Typical Ratio | Notes |
|---|---|---|---|
| Black | White | 21:1 | Maximum contrast |
| Dark gray (#333) | White | ~12:1 | Slightly softer |
| White | Dark blue | Varies | Test specific shades |
| Brand color | White | Must test | Many brand colors fail |
Interactive Elements
- Link text: Must contrast with surrounding text AND background
- Buttons: Text must contrast with button background
- Focus states: Must be visible (3:1 contrast with unfocused state)
Data Visualization
- Use patterns/shapes in addition to color
- Ensure legend is accessible
- Test charts with color blindness simulation
- Consider sequential single-hue scales