Color Blindness Simulator
See how your palette looks with protanopia, deuteranopia, tritanopia, and achromatopsia to catch accessibility problems early.
Runs 100% in your browser
Shortcuts
- Copy the output
- Alt + Shift + C
Your input is saved in this browser only. Reset clears it.
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
How to use the Color Blindness Simulator
-
Add the colors in your palette.
-
Compare how they look under each type of color vision deficiency.
-
Adjust any colors that become hard to tell apart.
Frequently Asked Questions
What are the main types of color vision deficiency?
Protanopia and deuteranopia (red-green, the most common, affecting roughly 8% of men of northern European descent), tritanopia (blue-yellow, rare), and achromatopsia (no color perception at all, very rare). Red-green types are why red and green status colors are a poor pair on their own.
How does the simulation work?
Each color is transformed with a matrix that models how the missing cone type changes perception, rendered with SVG color matrix filters in your browser. It's a close approximation used widely in accessibility tooling, not a medical model.
How do I design for color blindness?
Never rely on color alone. Pair it with an icon, a label, a pattern, or position, so a chart or status badge still reads in grayscale. Keep enough lightness contrast between colors that must be distinguished, and check the palette in these simulations before shipping.
Is a color-blind-safe palette also WCAG compliant?
They're separate checks. WCAG contrast is about lightness between foreground and background, while color vision deficiency is about telling two colors apart. A palette can pass contrast and still be unusable if success and error look identical, so test both.
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.
Step 5 of How to Create a Website Color Palette in 5 Steps covers checking status colors for color vision deficiencies before you ship.
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.