Colour Blindness Simulator

What a simulator is for

A colour vision simulator is a design instrument, not a diagnostic one. You give it an image; it returns an approximation of which colour distinctions survive a given deficiency and which collapse. The value is in the collapses. If two things in your interface mean different things and the simulation renders them the same colour, you have found a defect that affects a substantial share of your audience.

It is worth being precise about what the output is not. It is not a window into anyone’s subjective experience. Someone with congenital deuteranomaly has seen the world this way since birth; their colour perception is unremarkable to them, and they are often better than trichromats at certain discrimination tasks. Presenting a simulation as “what they see” is both inaccurate and, when it frames the condition as deprivation, unhelpful.

What the simulation genuinely tells you is where your design depends on information a substantial minority of viewers does not receive. That is an actionable engineering fact.

The model behind the transformation

Naive simulators collapse an image onto the line of colours a dichromat can distinguish. That is adequate for dichromacy but wrong for the far more common anomalous trichromacy, where the affected cone is present with a shifted peak sensitivity and colour information is compressed rather than eliminated.

This simulator follows the physiologically-based approach of Machado, Oliveira and Fernandes, which models the shift in cone spectral sensitivity directly. Because the shift is a continuous parameter, the same model covers the full range from normal vision through mild anomaly to full dichromacy, rather than treating them as unrelated cases.

Understanding the distinction changes how you design. Deuteranopia — the medium-wavelength cone absent — is the strict case. Deuteranomaly — that cone present but shifted — is the common case, affecting far more people, and it produces subtler failures: colours that remain technically distinguishable but no longer separate at a glance in a dense chart or a small UI element.

Using the output well

Load an image that carries real meaning through colour: a dashboard, a chart with a colour-coded legend, a map, a form with red error states, a wayfinding diagram. Compare each simulation against the original and ask one question of every colour-coded distinction — does this still tell the viewer what it needs to?

Common failures worth looking for:

• Red and green status indicators that become the same muted tone. This is the single most widespread accessibility defect in software.
• Categorical chart palettes where adjacent series merge, particularly qualitative palettes chosen for aesthetic variety rather than perceptual separation.
• Sequential heatmaps running through red and green, which lose their ordering.
• Links distinguished from body text by colour alone, which disappear entirely.
• Required-field and error styling carried purely by a red border.

The fix is almost never “use different colours”. It is to add a second, non-colour cue: a text label, an icon, a shape, a fill pattern, a position, an underline. Colour then becomes reinforcement rather than the sole carrier of meaning — which is what WCAG’s use of colour criterion requires.

Where the simulation stops being reliable

The transformation is applied to the sRGB values in your image, so its accuracy is bounded by how faithfully your display renders sRGB and by whether the source image was authored in that space. Wide-gamut source material, HDR content and heavily colour-managed workflows will all shift the result.

The model also describes congenital deficiencies. Acquired colour vision loss — from glaucoma, diabetic retinopathy, optic nerve disease, cataract or medication — often behaves differently, frequently affects the two eyes unequally, and is commonly accompanied by reduced acuity or contrast sensitivity that no colour transform captures.

Finally, remember that the simulation is one lens. It tells you which hues merge; it tells you nothing about whether your text has enough luminance contrast to be legible in the first place. Pair it with the contrast checker.

For deeper guidance, see designing for colour blindness and making charts accessible.