Free Color Blindness Simulator

Understanding colour-blindness simulation

Three cones, several common rearrangements.

What "colour blind" actually means at the retina, the three common conditions, and the transforms a simulator runs to show you what they see.

The biology, briefly.

Most humans have three cone types in the retina — L (long, peak ~564 nm, red), M (medium, ~534 nm, green), S (short, ~420 nm, blue). The brain compares signals from each to perceive colour. Colour blindness happens when one cone type is shifted (anomalous) or absent. The three common forms: protanomaly/protanopia (red cone shifted/absent), deuteranomaly/deuteranopia (green), tritanomaly/ tritanopia (blue). Roughly 8 % of men and 0.5 % of women have some form, almost always red-green.

The simulator's job.

Take an image (or a palette) and transform every pixel into the colour the condition-affected viewer would perceive. The most-used model is Brettel-Viénot- Mollon (1997): project the colour onto a plane in LMS colour space corresponding to the dichromat's confusion line, then transform back. The result is the designer's-eye view of "this is what your red/green status icons look like to a person with deuteranopia". Useful for catching designs that lean on colour alone.

What goes wrong in real interfaces.

Red error states next to green success states — look identical to a deuteranope. Red-on-green charts (financial deltas, fitness app stats) — same. Status pills that rely only on hue — same. The fix isn't "pick different colours"; it's "encode the difference in something other than colour too". An icon shape, a text label, a position. WCAG criterion 1.4.1 (Use of Color) requires exactly this: colour is never the only carrier of meaning.

A worked check.

A dashboard with red-down / green-up financial deltas. Run it through a deuteranopia simulator: both numbers render as similar yellowish-brown. The user can't tell winners from losers at a glance. Two fixes work. Replace the red/green hues with a perceptually distinct pair like blue/orange (still readable for most colour-blind viewers). Or add a triangular up/down arrow icon next to each number — the shape encodes the same information that colour was trying to.

Red/green → blue/orange

Hue swap, same data encoding

Blue and orange survive every common colour-blindness type.

#FF4444 / #44CC44 → #FF8800 / #4488DD

= Universally distinguishable

The other accessibility neighbours.

Low vision (general, not specifically colour) affects far more people than colour blindness. Cataracts shift the whole image yellow-brown. Macular degeneration removes the centre of vision. Diabetic retinopathy adds dark patches. The colour-blindness simulator is the easiest accessibility check to run; passing it isn't enough on its own, but failing it is a signal that the design needs more redundancy.

Quick answers.

›What types of colour blindness are supported?

The simulator covers red-green deficiencies like deuteranopia and protanopia, blue-yellow deficiency known as tritanopia, and total colour blindness or achromatopsia.

›Are my images uploaded to your server?

No. The simulator uses the HTML5 Canvas API to process pixels directly on your device, ensuring your private designs and mockups remain secure.

›How accurate is the simulation?

The tool uses industry-standard transformation matrices based on the Smith-Pokorny human cone response curves to provide a scientifically grounded approximation.

›Why should I use this for web design?

Roughly 8% of men and 0.5% of women have some form of colour vision deficiency. Checking your palette ensures that critical information, like success or error states, is not conveyed by colour alone.

Color Blindness Simulator

Normal vision

Protanopia

Deuteranopia

Tritanopia

Protanomaly

Deuteranomaly

Tritanomaly

Achromatopsia