Colour Blindness Simulator
Roughly one in twelve men and one in two hundred women has some form of colour vision deficiency. This shows what your chart, map, UI or diagram looks like to them. The simulation works in linear light using the standard LMS projection — the same method accessibility tooling uses, and the reason the results are believable rather than a crude hue rotation.
Drop images here
Multiple files allowed
What each type means
Deuteranopia (green cones absent) and deuteranomaly (green cones shifted) are by far the most common, together accounting for about three quarters of all colour vision deficiency. Red and green collapse toward a shared yellow-brown. Protanopia is the red-cone version — similar confusions, plus reds appear noticeably darker, which matters for anything relying on a red warning colour being visually prominent.
Tritanopia (blue cones) is rare, under 0.01%, and confuses blue with green and yellow with violet. Achromatopsia — total colour blindness — is rarer still, but simulating it is the fastest way to answer the question that matters most: does this still work with no colour information at all? If the answer is yes, every other case is fine too.
Severity below 100% blends toward the original, approximating the anomalous trichromacy (deuteranomaly, protanomaly) that most affected people actually have, rather than the complete dichromacy that 100% represents. Checking at 100% is the conservative test.
What to do about what you see
The fix is almost never "pick different colours" — it is stop relying on colour alone. Add a second channel that survives the simulation: direct labels on chart series instead of a colour legend, distinct line styles or markers, patterns or hatching in fills, an icon beside a status colour, text on a coloured badge. WCAG 2.2 success criterion 1.4.1 is exactly this rule, and it is the one this page helps you test.
Where colour must carry meaning, choose palettes that stay separable — blue-to-orange rather than red-to-green, and vary lightness as well as hue so the ordering survives even in the achromatopsia view. For text and UI contrast, which is a separate requirement, use the WCAG contrast checker.
FAQ
How accurate is the simulation?
It uses the standard Brettel/Viénot-style LMS projection applied in linearised sRGB, which is what browser devtools and most accessibility tools implement. It is a good model of dichromacy, not a medical instrument — individual perception varies, and no simulation can tell you what someone actually experiences.
Why does it linearise the colours first?
Because sRGB values are gamma-encoded, and matrix maths on gamma-encoded values is wrong. Simulators that skip this step produce results that are too dark and too saturated. Here each channel is converted to linear light, projected, then converted back.
Does it handle transparency?
Yes — fully transparent pixels are skipped and the alpha channel is passed through unchanged, so a PNG with a transparent background stays transparent.
Can I check a whole page rather than an image?
Screenshot the page and drop it here. Browser devtools also have a built-in vision-deficiency emulator that works on the live page, which is better for interactive states; this is better when you want files to attach to a ticket.