Color Blindness Simulator
See how a color appears under protanopia, deuteranopia, tritanopia and achromatopsia.
About the Color Blindness Simulator
See how a color appears under protanopia, deuteranopia, tritanopia and achromatopsia. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.
How to use
Choose a color
Enter a HEX value or use the picker.
View the simulations
The color is shown as it appears under several vision types.
Compare the swatches
Look for colors that become hard to tell apart.
Adjust if needed
Copy the simulated HEX values to document or refine your choices.
Benefits
Design inclusively
Preview how a large share of users may perceive your colors.
Spot clashes early
Identify pairs that collapse into the same shade.
Educate your team
Show stakeholders why a color choice may not work for everyone.
Features & supported formats
Features
- Protanopia, deuteranopia, tritanopia and achromatopsia
- Side-by-side swatches
- Simulated HEX values
- Matrix-based transforms
- Runs fully in-browser
Supported formats
Frequently asked questions
How accurate is the simulation?
It applies standard color-vision-deficiency transformation matrices client-side, giving a close approximation of how colors shift.
Which conditions are covered?
It simulates protanopia, deuteranopia, tritanopia and full achromatopsia (no color vision).
How common is color blindness?
It affects roughly one in twelve men and one in two hundred women, so designing for it matters.
What should I do if colors clash?
Add non-color cues such as labels, patterns or icons, and increase contrast between affected colors.
Can I simulate a whole image?
This tool simulates single colors; apply the same matrices conceptually when reviewing full designs.