Color Blindness Simulator

// The eight types, and how common each one is

Color vision starts with three cone types, sensitive to long, medium and short wavelengths, and the eight deficiencies below are what happens when one of them is shifted or missing. When a cone is shifted the condition is anomalous trichromacy and it comes in degrees, which is what the severity slider on this page is for. When a cone is missing entirely the condition is dichromacy and there is no dial: an axis of color is simply gone.

Deuteranomaly, a shifted green cone, is far and away the most common, at roughly 5% of men. Protanomaly, protanopia and deuteranopia each sit around 1% of men. All four are carried on the X chromosome, which is why they are perhaps sixteen times more common in men than in women. Tritan deficiencies are different in kind: they are not sex-linked, so they turn up equally in men and women, and they are rare, on the order of 1 in 10,000. Complete achromatopsia, no color vision at all, is rarer still at about 1 in 30,000, and usually comes with real discomfort in bright light.

Taken together that is about one man in twelve and one woman in two hundred. If a chart, a status badge or a form error uses red and green to carry its meaning, a meaningful slice of the people looking at it are reading a different picture from the one you designed.

// Why the numbers here differ from other simulators

A large share of the color blindness simulators on the web, including some that rank well, share one matrix set that circulated in a JavaScript widget in the 2000s, and they apply it straight to the sRGB values in the image file. That is wrong in two separate ways. The coefficients themselves are not the published ones, and sRGB values are gamma-encoded, so multiplying them as if they were light produces a result that is systematically darker and flatter than the deficiency being simulated.

This page does the published thing instead. Protanopia and deuteranopia use the projection matrices from Vienot, Brettel and Mollon (1999). Tritanopia uses the two-half-plane construction from Brettel, Vienot and Mollon (1997), which it genuinely needs: the tritan confusion cannot be written as a single matrix, and the one that circulates for it is a known shortcut. Achromatopsia is the one row with no published simulation to borrow, so it is reasoned from the biology: complete achromatopsia is rod monochromacy, and rods follow the scotopic curve that peaks near 507nm rather than the photopic one that peaks near 555nm. That distinction is not a detail. Photopic luminance, which is what almost every grayscale on the web uses, ranks red brighter than blue; rod vision does the opposite, and gets it wrong by a factor of about 199. Red comes out near black here and blue comes out light, which is what people with the condition describe. Every one of those runs in linear light, with the gamma undone first and reapplied after.

Anomalous trichromacy, the four severity-adjustable types, is modeled by interpolating between the original color and the dichromat endpoint in linear light. That is an approximation and worth being upfront about. The best-known alternative, Machado's published per-severity tables from 2009, models anomalous trichromacy directly rather than interpolating toward the endpoint. The interpolation is used here as a judgment call: variation between two people with the same diagnosis is wide, and the slider then means something a reader can hold onto, namely how far along the way to the full deficiency this is.

// What a simulation can and cannot tell you

The useful question a simulator answers is structural: does this design still work when one axis of color is removed. Put a chart through deuteranopia and the red line and the green line either stay apart or they do not. Put a form through it and the error state either still reads as an error or it collapses into the neutral text around it. That result is reliable, and it is why the color mode here shows all nine rows at once rather than one at a time.

What a simulation cannot tell you is what any particular person sees. Deficiency varies between individuals with the same diagnosis, adaptation and lighting change the picture, and a simulation shown on your own screen is filtered through your own vision on the way in. Nobody with normal color vision can experience the deficiency by looking at a simulated image; they can only inspect whether the information survived.

The practical rule that follows is older than any of these matrices: never let color be the only channel. Pair it with a word, a shape, a position or a weight. A status that says Failed next to a red dot survives every row on this page; a bare red dot does not survive the first one.

// fair questions

What are the types of color blindness?

There are eight, in three families. Red-green: protanomaly and protanopia (the red cone shifted or missing) and deuteranomaly and deuteranopia (the green cone shifted or missing). Blue-yellow: tritanomaly and tritanopia. And the achromat forms: achromatomaly, partial loss of all color, and achromatopsia, no color vision at all. The ones ending in -anomaly are a shifted cone and come in degrees; the ones ending in -anopia are a missing cone and do not. The grid above is not grouped into those families, though: it runs from most common to least, so deuteranomaly sits directly under normal vision. It is roughly 5% of men on its own, more than every other deficiency on the page combined, and it is the one worth checking a design against first.

What is the most common type?

Deuteranomaly, a shifted green cone, at roughly 5% of men. The other three red-green types sit near 1% of men each. Together the red-green family affects about one man in twelve and one woman in two hundred, because the genes involved sit on the X chromosome. Tritan deficiencies are rare, around 1 in 10,000, and affect men and women equally since they are not sex-linked.

How accurate is this simulation?

For the dichromat types it is as accurate as the published models get: Vienot, Brettel and Mollon (1999) for protanopia and deuteranopia, Brettel, Vienot and Mollon (1997) for tritanopia, applied in linear light rather than to gamma-encoded sRGB. The anomalous types are an interpolation toward the full deficiency, which is an approximation of a condition that varies from person to person anyway. The achromat rows are the weakest claim on the page and should be read as such: no peer-reviewed simulation of rod monochromacy exists to borrow, so they use scotopic luminance reasoned from the biology, and the exact coefficients depend on a display's actual emission spectra in a way sRGB does not pin down. No simulation predicts what one individual sees; what it reliably shows is whether the information in a design survives losing an axis of color.

Can I check my own design or screenshot?

Yes. Switch to image mode and drop, click or paste a screenshot. It is decoded and simulated in your browser using the canvas API, so the file never leaves your device, and the page keeps working with the network off once loaded. The image is fitted to 1200px on its long edge before the per-pixel work so that the simulation stays instant, and the result downloads as a PNG.

What does the severity slider do?

It sets how far an anomalous type is shifted, from 0% (normal vision) to 100% (the matching dichromat). It applies to protanomaly, deuteranomaly, tritanomaly and achromatomaly, and it is deliberately inert for the dichromat types, because a missing cone is not a matter of degree. The default of 60% sits mid-range: anomalous trichromacy is a spectrum, and pinning it at the endpoint would make protanomaly a duplicate of protanopia.

How do I design for color blindness?

Do not let color be the only thing carrying a meaning. Add a label, an icon, a shape or a position, so a red state reads as a red state without the red. Keep enough luminance contrast between elements that need to be told apart, since brightness survives every type on this page, and check it with the contrast checker. Avoid red-on-green and any palette whose categories differ only in hue. Then run the result through deuteranopia here, because that one type covers most of the affected population.

Do my colors or images get uploaded?

No. Both modes run entirely in your browser. The color mode is arithmetic on nine matrices, and the image mode decodes and redraws your file on a canvas in the page. Nothing is sent to a server, nothing is stored, and the tool keeps working offline once the page has loaded.