About the Color Blindness Simulator
Upload a screenshot, chart, map or design and see an approximation of how people with the four main types of colour vision deficiency perceive it. Around 8% of men and 0.5% of women have some form of colour blindness — roughly 300 million people — so a red/green status indicator or a rainbow heat map that looks obvious to you may be unreadable to a sizeable part of your audience. Images are processed in your browser and never uploaded.
The four simulations
- Protanopia — red-blind. Reds appear dark and are confused with greens and browns; about 1% of men.
- Deuteranopia — green-blind. The most common form; greens shift toward beige and reds toward brown; about 1% of men (with milder deuteranomaly affecting another 5%).
- Tritanopia — blue-blind. Blues and greens are confused, yellows look pink; very rare (under 0.01%).
- Achromatopsia — total colour blindness. Everything is seen in shades of grey; rare, but the grayscale view is also a great test of whether your design relies on colour alone.
Designing for colour vision deficiency
- Never use colour as the only signal — add icons, labels, patterns or text (a red X and a green tick, not just red and green dots).
- Avoid red/green and blue/purple pairings for adjacent categories; blue/orange is the safest contrasting pair.
- Use lightness contrast as well as hue contrast so the difference survives in grayscale.
- For data visualisation, prefer colour-blind-safe palettes such as Okabe-Ito, Viridis or ColorBrewer's qualitative sets.
- Check text and background contrast with the Contrast Checker; colour-blind users are also affected by low contrast.
About the simulation
This tool applies CSS filter approximations to give a fast, visual sense of each condition. It is a good first check for spotting designs that depend on colour, but it is not a colorimetrically exact model. For compliance work or scientific figures, follow up with a matrix-based simulator (Brettel/Viénot/Machado models are implemented in Chrome DevTools' Rendering panel, Figma plugins and Photoshop's Proof Setup) and, ideally, feedback from colour-blind users.
How to use the Color Blindness Simulator
- 1Upload an image. Drop a screenshot, chart or design onto the page. It is loaded locally.
- 2Select a condition. Switch between protanopia, deuteranopia, tritanopia and achromatopsia.
- 3Compare. Look for elements that become indistinguishable, then adjust colours, add labels or patterns.
Frequently asked questions
- How accurate is the simulation?
- It uses approximate CSS filters — useful for catching obvious problems quickly, less precise than matrix-based scientific models. Treat it as a screening tool and verify important work with a full simulator.
- What is the most common type of colour blindness?
- Deuteranomaly (reduced green sensitivity) affects about 5% of men, and red-green deficiencies together account for the vast majority of cases.
- Can I test a live website instead of a screenshot?
- Take a screenshot and upload it here, or use Chrome DevTools → Rendering → Emulate vision deficiencies for a live view.
- Is my image uploaded?
- No. The image is displayed and filtered in your browser only.