Color Blindness Simulator
See how your color palette looks under five types of color vision. Spot accessibility issues before they reach users.
Your Palette
Click any swatch to edit its color. Up to 16 colors.
Normal vision
Full color perception
Protanopia
No red cones · ~1% of males
Deuteranopia
No green cones · ~1% of males
Tritanopia
No blue cones · rare
Achromatopsia
No color perception · rare
About color blindness
Roughly 8% of males and 0.5% of females have some form of color vision deficiency. Red-green blindness (Protanopia + Deuteranopia) is by far the most common.
Accessibility tips
- • Don't rely on color alone to convey information
- • Use patterns, icons, or labels alongside color
- • Ensure sufficient contrast between adjacent colors
- • Check the WCAG contrast checker for text on color
About the Color Blindness Simulator
Around 300 million people worldwide experience some form of color vision deficiency. This tool simulates how your color palette appears to users with different types of color blindness, helping you catch accessibility problems at design time rather than after shipping.
Types of Color Blindness
Protanopia
Missing long-wavelength (red) cone cells. Reds appear as dark brown or black; cannot distinguish red from green. Affects ~1% of males.
Deuteranopia
Missing medium-wavelength (green) cone cells. The most common form of color blindness. Reds and greens look similar. Affects ~1% of males.
Tritanopia
Missing short-wavelength (blue) cone cells. Blues and greens, and yellows and reds, become hard to tell apart. Rare, affecting less than 0.01% of people.
Achromatopsia
Complete absence of color perception — everything appears in shades of grey. Very rare, but an important extreme case to consider for critical UI.
WCAG Accessibility Guidelines
The Web Content Accessibility Guidelines (WCAG) require that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Key design practices include:
- Use icons or patterns alongside color coding (e.g. error states)
- Ensure text has sufficient contrast with its background (4.5:1 minimum for normal text)
- Test charts, graphs, and maps — these rely heavily on color differentiation
- Avoid red/green-only distinctions in status indicators, form validation, and charts
Pro Tip
A quick check: if your palette still communicates its intent when viewed through the Achromatopsia (greyscale) filter, it will work for the vast majority of color blind users. Focus first on sufficient lightness contrast between colors, not just hue differences.