Approximately 8% of men and 0.5% of women have some form of color vision deficiency (CVD). That's roughly 1 in 12 men and 1 in 200 women worldwide. If your design relies solely on color to convey information, you're excluding millions of users.
Types of Color Blindness
Color blindness isn't seeing the world in grayscale. It's difficulty distinguishing between specific colors. Understanding the types helps you design inclusively.
Reduced sensitivity to green light. Difficulty distinguishing between red/green, brown/green, blue/purple.
Reduced sensitivity to red light. Red appears as dark gray, orange and green look similar.
Difficulty distinguishing blue from green, and yellow from red/pink.
Complete absence of color vision. Everything appears in shades of gray.
Color Combinations to Avoid
These combinations are problematic for users with color vision deficiencies:
Red & Green (Most Important)
The classic problem. Never rely on red vs green alone for critical information like success/error states.
Indistinguishable for deuteranopia users
Icons provide additional context
Other Problematic Combinations
- Green & Brown: Look nearly identical to deuteranopes
- Blue & Purple: Hard to distinguish for most CVD types
- Light Green & Yellow: Merge together for protanopes
- Blue & Gray: Difficult for tritanopes
Golden Rule: Never use color as the only means of conveying information. Always pair color with text, icons, patterns, or position.
Safe Color Palettes
These palettes work well for most color vision deficiencies:
Blue
Red
Amber
Gray
These colors have sufficient brightness differences and work with patterns/icons.
Optimized for charts and graphs with high color differentiation.
Using Patterns and Textures
Add patterns to distinguish elements that might otherwise rely on color alone:
Charts and Graphs
- Use different line styles (solid, dashed, dotted)
- Add distinct shapes to data points (circles, squares, triangles)
- Apply patterns to bar fills (stripes, dots, crosshatch)
- Include data labels directly on visualizations
Form Validation
- Add icons to success/error messages (✓ checkmark, ✗ X)
- Use text descriptions ("Valid email" vs "Invalid format")
- Position matters: errors above fields, success below
- Add borders or underlines to highlight problematic fields
Status Indicators
- Pair colors with text labels ("Online", "Away", "Offline")
- Use icon shapes (filled circle = active, outlined = inactive)
- Add patterns (solid fill, diagonal lines, empty)
- Consider animation (pulsing = active, static = inactive)
Testing Tools
Browser-Based Simulators
- Chrome DevTools: Built-in vision deficiency emulation
- Colorblindly: Chrome extension with 8 CVD simulations
- Stark: Figma/Sketch plugin for accessibility checking
Desktop Applications
- Color Oracle: Free, open-source simulator for Mac/Windows/Linux
- Sim Daltonism: Mac-only real-time color blind simulator
Color Palette Validators
- Coblis: Upload screenshots and see CVD simulations
- Viz Palette: Test data visualization colors
- Coloring for Colorblindness: Generate CVD-safe palettes
Pro Tip: Test your design through all major CVD types (deuteranopia, protanopia, tritanopia) before launch. Chrome DevTools makes this easy.
Case Studies
GitHub Pull Request Status
Problem: Used green (merged) and red (closed) for PR status.
Solution: Added icons (checkmark, X) and moved to purple (merged) and red (closed) with clear labels.
Trello Card Labels
Problem: Color-only labels were indistinguishable.
Solution: Added optional text labels and patterns to each color.
Duolingo Streak Counter
Problem: Green/gray calendar squares for completed days.
Solution: Added flame icon to completed days, uses orange (not green), includes tooltip text.
Implementation Checklist
- Never use color as the only indicator of state or action
- Ensure minimum 4.5:1 contrast ratio for text
- Use icons, patterns, or text alongside color
- Choose colors with different brightness levels
- Test with CVD simulation tools
- Provide alternative views (e.g., high contrast mode)
- Use semantic HTML for screen readers
- Include text descriptions of color-coded information
Quick Wins
- Replace green success buttons with blue
- Add icons to all alert/notification messages
- Use underlines for links, not just color
- Add text labels to color-coded tags
- Use patterns in data visualizations
- Increase contrast between adjacent colors
Conclusion
Designing for color blindness isn't about removing color from your designs—it's about ensuring color isn't the only way to understand them. By combining color with text, icons, patterns, and proper contrast, you create experiences that work for everyone.
Remember: accessible design is better design. The patterns that help color-blind users also improve usability for everyone, especially in challenging viewing conditions like bright sunlight or low battery modes.