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
Accuracy & limitations
This applies the standard color-vision-deficiency matrices to a single color. It approximates how hues shift relative to one another — it is not a medical or diagnostic model.
- The simulation applies established color-vision-deficiency transformation matrices. It is a close approximation, not a medical or diagnostic model.
- Real color vision varies widely between individuals, including partial forms such as deuteranomaly that are milder than the full dichromacy simulated here.
- It transforms a single color at a time. Judging a whole design also depends on layout, size and surrounding colors.
- The result shows how colors shift relative to one another, which is what matters for design decisions — treat the exact simulated HEX values as indicative.
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.
Further reading
Accessible Color
How contrast ratio is calculated, what AA and AAA actually require, and how to design for color-vision deficiency without losing your brand.
PalettesColor Harmony
The classic harmony schemes as hue arithmetic, what each one feels like in a real interface, and how to keep a palette from falling apart.