Color Blindness Simulator
See your colour through colour-blind eyes.
How to use
- 1 Type or pick the colour you want to test as a hex value.
- 2 Compare the four simulated swatches against the original.
- 3 Note any pair of colours that becomes indistinguishable.
- 4 Adjust the colour or add a non-colour cue (icon, label, pattern).
- 5 Copy the simulated hex values for your design notes.
About Color Blindness Simulator
The Color Blindness Simulator shows how a single colour is perceived by people with the most common types of colour-vision deficiency (CVD), which affects roughly one in twelve men and one in two hundred women.
Enter a hex colour and the tool instantly renders four simulated swatches alongside the original, so you can judge whether a colour will still read correctly for everyone.
It covers the three dichromacies — protanopia (red-blind), deuteranopia (green-blind) and tritanopia (blue-blind) — plus achromatopsia, where only brightness is perceived.
The simulation uses established sRGB transformation matrices for the dichromat types and a Rec. 709 luminance projection for the monochrome case, the same approach used by accessibility tooling.
Each swatch shows its resulting hex value so you can document the shift or feed it into other checks.
Use it to sanity-check a status colour, a chart palette, a heat map or a UI accent before launch: if your red error state and green success state collapse into the same muddy tone for a deuteranope, you know to add an icon or label instead of relying on hue alone.
Everything is computed locally in your browser, with no uploads and no limits, so you can iterate as quickly as you like.
FAQ
Which types of colour blindness does it simulate?
Protanopia (red), deuteranopia (green) and tritanopia (blue), plus achromatopsia (total colour blindness, brightness only).
Is the simulation medically exact?
It is a well-established approximation suitable for design review, not a clinical diagnosis. Real perception varies between individuals.
Can I simulate partial (anomalous) colour vision?
The library supports a severity blend; this preview shows the full dichromat case, which is the safest worst-case to design against.