Approximately 8% of men and 0.5% of women of Northern European ancestry have some form of color vision deficiency (CVD); rates are somewhat lower in many other populations. 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.
Real-World Patterns
You don't need a redesign to fix most color-only signals. These are patterns you can see in widely used products today:
Status uses icon + color + label
GitHub pull requests are green when open, purple when merged and red when closed, but each state also has its own icon and a text label ("Open", "Merged", "Closed"), so the color is never the only cue.
Optional patterns on colored labels
Trello offers a color-blind friendly mode that adds a distinct pattern to each colored card label, so labels stay distinguishable without relying on hue.
Data labels on charts
Direct labels on lines and bars (instead of a color legend alone) make charts readable for everyone. Try your own chart colors in our color blindness simulator.
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.