Colour Blindness Simulator: Finding Meaning You Stored Only in Colour
Around one man in twenty has trouble separating red from green. The point of simulating that is not to reproduce their experience — it is to reveal which of your distinctions stop being distinctions.
Human vision uses three kinds of cone, sensitive to long (reddish), medium (greenish) and short (bluish) wavelengths. Colour is the ratio between their responses.
When one of them is missing, or its sensitivity is shifted toward its neighbour, colours that used to produce different responses start producing the same one. At that moment they become the same colour. Red and green are the common case because those two cones overlap heavily to begin with.
Upload an image here and you see it with that distinction removed.
The common case is not a missing cone
Most tools in this category simulate only complete absence of a cone. That is the rare version.
Far more common is a cone that is present but tuned toward its neighbour. A green cone shifted toward red makes red and green hard to separate without eliminating the distinction outright, so it comes and goes with lighting and size. Roughly 5% of men have this; about 1% lack the cone entirely.
That is why this tool has a severity control. 100% is the missing-cone case; somewhere around 40–60% is where most affected viewers actually sit. Design against 100% alone and you are calibrating to a condition more severe than nearly all of your users have.
Types and how common they are
Figures are for men. These genes sit on the X chromosome, so the conditions are much rarer in women.
| Type | Cone affected | Share of men | Colours that merge |
|---|---|---|---|
| Deutan | Green | ~6% | Red with green, brown with green |
| Protan | Red | ~2% | Red with green; reds also look darker |
| Tritan | Blue | ~1 in 10,000 | Blue with green, yellow with pink |
| Achromatopsia | All | ~1 in 30,000 | No colour discrimination at all |
The maths has to happen in light
This simulation may disagree with others you have used, and there is a specific reason.
Cones respond to light that arrives, not to the numbers in a file. sRGB values are not proportional to light: a grey of 128 emits about 21% of what white emits, not 50%. So the curve has to be undone before any of the cone maths happens.
Skip that step and multiply the matrix straight into sRGB values and the results shift substantially. The clearest symptom is pure green coming out as a dark muddy brown. Real red-green deficiency does not darken green — it moves it toward yellow.
This tool decodes sRGB to light, projects in cone-response space, and encodes back. It is checked against two properties any correct projection must satisfy: greys must survive untouched, and simulating an already-simulated image must change nothing further.
What the output does and does not show
The simulated image is not what a colour-blind person experiences. They have seen this way since birth and do not perceive anything as missing. They have a red, they call it red, and it has always worked.
The question the simulation answers is different: which of the distinctions you encoded in colour fail to arrive. If two states look the same in the simulated view, then your interface is not communicating that difference to those viewers.
That also tells you how to look at the result. Do not judge whether it is attractive. Check whether the things that need to be told apart still can be.
Where this usually bites
- •Status shown as green for success and red for failure — the classic. Add an icon or a word.
- •Charts where series are distinguished only by line colour. Vary the line style or label the lines directly.
- •Error messages carried by red text alone; the wording should say what is wrong.
- •Maps and seating plans divided by colour — add patterns or numbers.
- •Forms marking required fields with nothing but a red asterisk.
- •Red and green adjacent in a chart: at similar lightness the boundary between them disappears.
Extended FAQ
What severity should I test at?
100% is the worst case, so passing there is safe. To match the real distribution of users, also look at 40–60%, which is where most affected viewers fall.
This disagrees with another simulator.
Usually the gamma handling. There is a quick test: feed it pure green. A correct simulation returns a yellowish tone; one that multiplies the matrix into raw sRGB returns dark brown.
How is this different from checking in greyscale?
Greyscale removes all colour and therefore tests lightness contrast only. Red-green deficiency leaves the blue-yellow axis intact, so a design can pass one check and fail the other in either direction. Use both.
Should I avoid colour altogether?
No. Colour is a good redundant signal. It just should not be the only signal — colour plus an icon, or colour plus a word, is enough.
Is my image uploaded?
No. The pixels are processed in your browser.