Color Blindness Simulator — See Your Design as Colour-Blind Users Do
Preview an image or a set of colours under protanopia, deuteranopia, tritanopia and more, side by side with normal vision.
🔒 Runs in your browser — files never uploaded ⚡ No signup 💯 Free
Colours that look alike on the right will be hard to tell apart for that group. Add a second cue — a label, a pattern, a shape — wherever the difference matters.
Simulate how a chart, a screenshot, a map or a palette looks to people with colour vision deficiency: red-blind (protanopia), green-blind (deuteranopia), blue-blind (tritanopia), the milder anomalous forms, and total colour blindness. Drop an image for a side-by-side comparison, or paste HEX colours to see each one transformed. Everything runs in your browser.
How to use Color Blindness Simulator
- Choose a deficiency — deuteranomaly is the most common, affecting about 5% of men.
- Drop an image to compare it with normal vision, or type colours to check a palette.
- If two colours that must be distinguishable look alike in the simulation, change one or add a non-colour cue — labels, patterns, icons.
The types
- Deuteranomaly (weak green) — about 5% of men, 0.4% of women. Reds and greens shift towards each other; the most common form by far.
- Protanomaly / protanopia (weak or missing red) — about 1% of men each. Red looks dark and dull; red and green merge.
- Deuteranopia (no green cones) — about 1% of men. Red and green become shades of yellow-brown.
- Tritanopia (no blue cones) — rare and not sex-linked. Blue and green confuse; yellow and pink too.
- Achromatopsia — very rare; no colour at all. A useful worst case: if your design works in greyscale, it works for everyone.
Altogether roughly 1 in 12 men and 1 in 200 women — about 300 million people — see colour differently from the majority.
How the simulation works
Each pixel is converted to linear RGB and multiplied by a matrix that projects the colour onto what the reduced set of cone cells can distinguish, then converted back. The matrices are the standard ones used by design-tool plugins and the Coblis simulator. It is a simulation of a typical case: real perception varies between people and the anomalous forms come in every severity, so treat the result as a strong hint, not a measurement.
Designing so it does not matter
- Never rely on colour alone. Pair it with a label, a pattern, an icon or a position. A red/green status light becomes a tick/cross.
- Vary lightness, not just hue. Light green and dark red survive every deficiency; mid-green and mid-red do not.
- Use proven palettes for charts (viridis, Okabe–Ito, ColorBrewer's colour-blind-safe sets).
- Check contrast for text with the contrast checker; low contrast hurts everyone.
Frequently asked questions
Which type should I test with?
Deuteranomaly first — it is by far the most common, about 5% of men. Then deuteranopia and protanopia, which are the strongest red-green cases. If a design survives those three, it is in good shape; achromatopsia is the ultimate stress test.
How accurate is the simulation?
It uses the standard matrices behind most design-tool plugins and the Coblis simulator, applied in linear RGB. It represents a typical case; individual perception varies and the anomalous forms come in every severity. Use it to find problems, not to certify their absence.
My red and green look the same in the simulation. What do I change?
Vary lightness as well as hue — a light green and a dark red stay distinct — or replace one colour with blue or orange. Better still, add a second cue: a label, an icon, a pattern, a different shape.
Can I check a whole website?
Take a screenshot and drop it in. Charts, maps, status indicators and form validation colours are the usual trouble spots.
Is my image uploaded?
No. The simulation runs on a canvas in your browser, and the downloaded result comes straight from it.