Use the free Vision Deficiency Simulator below. Educational simulation only: this is an approximation, not a medical diagnosis. Your images never leave your browser — all work happens on your device, and nothing is uploaded to any server.
What this simulator shows you
About one in twelve men and one in two hundred women lives with some form of colour vision deficiency. The most common types shift how reds and greens are told apart; rarer types affect blues, and the rarest remove colour entirely. People with typical colour vision often have no idea what that looks like, which is why charts, maps, and buttons sometimes fail the people who need them most.
The tool above simulates four common deficiencies on your own images: protanopia, deuteranopia, tritanopia, and achromatopsia. Upload an image, pick a type, and see the image recoloured as someone with that deficiency might perceive it.
An important note before you start
This is an educational simulation, an approximation, not a medical diagnosis and not a test of your own vision. Real colour vision varies from person to person, and a screen simulation cannot capture any individual’s exact experience. If you are concerned about your own vision, see an eye care professional. The simulator’s value is in building understanding and in checking designs, not in diagnosing anyone.
Your images never leave your device: all processing happens locally in your browser and nothing is uploaded to any server.
How to use the simulator
Upload any image: a chart, a map, a website screenshot, a poster, or a photo. Choose a deficiency type. Protanopia reduces sensitivity to red light, so reds darken and red-green differences shrink. Deuteranopia reduces sensitivity to green light, with a similar red-green confusion but a different shift. Tritanopia affects blue-yellow vision, which is rarer and often acquired rather than inherited. Achromatopsia removes colour entirely, showing the image in greys.
Compare the result with the original. The question to ask is not whether the image looks pretty, but whether its meaning survives. Can you still tell the data series apart in a chart? Can you still spot the warning in red? Can you still read the map legend?
How the simulation works
Every pixel colour is recalculated with a 3 by 3 colour matrix, a small table of numbers that models how the eye’s cone responses shift for that deficiency. Red, green, and blue values go in, and mixed values come out, following research models of colour vision. The math is simple, but it captures the core effect: colours that differ mainly in the affected channel collapse toward each other.
That is also why the simulation is an approximation. Real vision involves the brain, lighting, and individual variation, none of which a matrix can fully model. Treat the result as a guide, not a photograph of someone else’s sight.
Designing for everyone
The most common design failure is relying on colour alone to carry meaning: red for bad and green for good, with no other difference. Under a red-green simulation those two can become nearly identical. The fix is to add a second signal: labels, icons, patterns, or shapes alongside the colour. A chart with different line styles as well as colours, a form error with an icon as well as red text, and a map with labels as well as coloured regions all survive simulation.
Run your key graphics through this simulator before publishing. If the meaning survives all four simulations, your design works for far more people. If it fails, add labels or patterns rather than just changing the palette, because a new palette can fail a different deficiency.
Try it on your own work
Upload a chart, a poster, or a screenshot of your site, and step through the four simulations. The differences are often surprising, especially for red-green types where familiar colours merge. That surprise is the point: it turns an abstract accessibility rule into something you can see, and it usually leads to one or two small fixes that make the design better for everyone.