Color-Blind Friendly Color Palettes
Design color palettes that work for all types of color blindness — deuteranopia, protanopia, and tritanopia.
Published:
Tags: color blind friendly palette, accessible color palette, colorblind safe colors
Color-Blind Friendly Color Palettes About 8% of men and 0.5% of women have some form of color blindness. A color-blind friendly palette ensures your UI communicates effectively without relying on color distinctions that may be invisible to some users. For a full overview of color utilities, see the Color Tools for Designers and Developers guide. --- What is Types of Color Blindness? | Type | Prevalence | What Is Affected | |---|---|---| | Deuteranomaly | ~5% males | Green receptors weakened | | Deuteranopia | ~1% males | No green receptors | | Protanomaly | ~1% males | Red receptors weakened | | Protanopia | ~1% males | No red receptors | | Tritanomaly | ~0.01% | Blue receptors weakened | | Tritanopia | ~0.003% | No blue receptors | | Achromatopsia | ~0.003% | No color receptors…
Frequently Asked Questions
What are the types of color blindness?
The main types are deuteranopia (red-green, most common in men at ~5%), protanopia (red-green, ~2% of men), and tritanopia (blue-yellow, rare at ~0.003%). Deuteranomaly and protanomaly are weaker versions of the first two where colors are perceived but shifted, not absent. Achromatopsia (total color blindness) affects about 1 in 30,000 people.
How do I design for color blind users?
Use color plus a secondary signal — shape, pattern, texture, or text label — for any information that relies on color distinction. Test your palette using a color blindness simulator in browser DevTools or a standalone tool. Avoid red/green as the only differentiator. Ensure sufficient contrast between all colors in your palette.
What colors should I avoid for accessibility?
Avoid using red and green as the only way to distinguish two states (error/success, yes/no). These look nearly identical to deuteranopes and protanopes. Also avoid light red vs dark red, light green vs dark green combinations. Red on black and green on black have poor luminance contrast for protanopes who perceive red as very dark.
What is a colorblind-safe palette?
A colorblind-safe palette uses colors that remain distinguishable under the three main types of color blindness. These palettes typically favor blue-orange-purple combinations, which remain distinct across all color vision types. The Wong (2011) and IBM Carbon palettes were designed specifically with colorblind simulation validation.
How do I simulate color blindness?
Chrome DevTools (Rendering tab → Emulate vision deficiencies) simulates deuteranopia, protanopia, tritanopia, and achromatopsia directly on any webpage. Firefox offers similar simulation. Standalone tools include Coblis (upload an image) and the macOS Accessibility Inspector. Always test your final UI in at least deuteranopia mode.
All articles · theproductguy.in