Color Blindness Simulator
See how an image or a set of colours may look to people with the common types of colour vision deficiency: protanopia, deuteranopia and tritanopia, their milder anomalous forms (protanomaly, deuteranomaly, tritanomaly) with an adjustable severity, and achromatopsia and achromatomaly. All previews appear side by side with the original, and each can be downloaded as a PNG.
Simulate Colour Vision Deficiency
Simulated views
Colour comparison
Your download
How to Use the Color Blindness Simulator
- Choose an image, or leave the file empty to use the colour strip made from the colours in the second box.
- Edit the colour list if you want to compare your own palette.
- For the anomalous types, set how severe the deficiency is with the slider (100% equals the full dichromat form).
- Press Simulate, compare the views with the original, and use the Download button under any view to save it.
About This Tool
Designers, chart authors and developers who want to check that colour-coded information, status icons and brand palettes still make sense for the roughly 1 in 12 men and 1 in 200 women with a colour vision deficiency.
Input: Image (JPG, PNG, WebP, GIF) or colours · Output: Simulated PNG previews.
Features and Limitations
Features
- Eight types: protanopia, deuteranopia, tritanopia, protanomaly, deuteranomaly, tritanomaly, achromatopsia and achromatomaly.
- Machado, Oliveira and Fernandes (2009) matrices applied in linear RGB, with their published severity table in 10% steps.
- Colour table showing the simulated hex value of every entered colour.
- Per-view PNG download and a text alternative for each preview.
- Runs in your browser; the image is never uploaded.
Limitations
- Simulation is approximate. Real colour vision varies between people, screens and lighting, and the model describes an average dichromat or anomalous trichromat.
- Previews are limited to 900 pixels on the longest side to keep the page responsive; downloads have the same size.
- Achromatomaly is modelled as a blend between the original image and its luminance-only version, following the severity slider.
- The simulator does not test whether your design meets WCAG; use it together with a contrast check and never rely on colour alone.
- Processing happens on your device, so very large files depend on your browser's available memory.
Example
Pure red #ff0000 appears as a dark olive (about #6d5f00 in protanopia), which is why red and green status icons need shapes or labels as well as colour.
Frequently Asked Questions
Which model does the simulator use?
The physiologically based model of Machado, Oliveira and Fernandes (IEEE Transactions on Visualization and Computer Graphics, 2009). Their 3 × 3 matrices are applied to linear RGB values, after removing and before re-applying the sRGB gamma curve.
What is the difference between -opia and -anomaly?
The -opia types (protanopia, deuteranopia, tritanopia) mean a cone type is missing. The -anomaly types mean it is present but shifted, so the effect ranges from mild to almost as strong as the -opia form. The severity slider controls this.
Is my image uploaded?
No. The picture is drawn into a canvas in your browser and the matrices are applied locally, so it never leaves your device.
How accurate is this?
It is a good guide for spotting problems, not a medical or exact reproduction. Individual vision and display settings differ, so use the previews to find risky colour combinations and confirm important designs with real users.
Why does the colour strip appear when I choose no image?
So the page always has something to simulate. The strip is built from the colours in the colour box; its text alternative lists every colour with its simulated value.
Related Tools
More like this: all Accessibility tools, all Developer & Web tools or the TinySandy home page.