A colour blindness simulator for designers and developers
Around 8% of men and 0.5% of women of Northern European descent have some form of red-green colour vision deficiency (CVD), and the rates are similar in many other populations. If your chart, map, app or poster relies on red versus green to carry meaning, a sizeable share of your audience cannot read it. The Color Blindness Simulator shows you what they see.
Upload any image — or use the built-in palette, chart and UI samples — and preview it under protanopia, deuteranopia, tritanopia, achromatopsia and the milder anomalous forms, individually or in a side-by-side grid of all eight. A colour pair checker tells you whether two specific colours remain distinguishable, and you can download any simulated image for a design review. Everything runs on your device; images are never uploaded.
How to use the Color Blindness Simulator
- Drop an image onto the upload area, paste one with Ctrl+V, or click “Colour palette”, “Chart” or “UI states” for a sample.
- Choose a vision type from the list. The simulated view updates instantly next to the original.
- Open “Compare all eight types side by side” to review every form of colour blindness at once.
- Enter two colours in the pair checker to see how far apart they remain (ΔE) under each vision type.
- Press “Download” to save the current simulation as a PNG for your team or accessibility report.
Color Blindness Simulator features
Published, physiologically based matrices
Uses the Machado, Oliveira and Fernandes (2009) model, applied in linear RGB as intended — the same approach as Chrome DevTools’ vision deficiency emulation.
All eight types
Protanopia, deuteranopia, tritanopia and achromatopsia plus the weaker protanomaly, deuteranomaly, tritanomaly and achromatomaly.
Side-by-side grid
One click renders every type from the same image so you can spot which conditions break your design.
Colour pair checker
Shows two colours as each vision type perceives them and rates the difference with the CIE76 ΔE metric.
Built-in samples
A saturated and pastel palette, a line chart with colour-only legend and a set of UI status messages — common trouble spots.
Private and downloadable
Processing happens in a canvas in your browser; save any simulated view as a PNG.
How the simulation works
Human colour vision uses three cone types sensitive to long (L, “red”), medium (M, “green”) and short (S, “blue”) wavelengths. Dichromacy means one cone type is missing: protanopia (no L), deuteranopia (no M) or tritanopia (no S). Anomalous trichromacy means one cone type is present but shifted, giving a milder deficiency; deuteranomaly alone accounts for about 5% of men.
The simulator converts each pixel from sRGB to linear light, multiplies it by a 3×3 matrix from Machado et al. (2009), A Physiologically-based Model for Simulation of Color Vision Deficiency, and converts back. The dichromacy matrices use full severity; the anomalous ones use the model’s 0.6 severity step, a moderate case. Achromatopsia is rendered as Rec. 709 luminance, since people with it perceive brightness only. Simulations are approximations — real vision varies from person to person — but they reliably reveal the colour combinations that fail.
Prevalence of colour vision deficiency
Red-green deficiencies are inherited on the X chromosome, which is why they are far more common in men. Figures are for populations of Northern European descent; rates are somewhat lower in many African and Asian populations.
| Type | What is affected | Approximate prevalence |
|---|---|---|
| Deuteranomaly | Weak green cones | ~5% of men, ~0.35% of women |
| Protanomaly | Weak red cones | ~1% of men, ~0.03% of women |
| Deuteranopia | No green cones | ~1% of men, ~0.01% of women |
| Protanopia | No red cones | ~1% of men, ~0.01% of women |
| Tritanopia / tritanomaly | Blue cones | Under 0.01%, men and women equally |
| Achromatopsia | All colour | About 1 in 30,000 |
Design tips for colour-blind-safe work
- Never use colour alone. Pair it with text, icons, patterns or position — a red “error” message also needs an icon and a clear label (WCAG 1.4.1).
- Avoid red–green and blue–purple pairs for categories that must be told apart. Blue–orange is the safest two-colour contrast for almost every vision type.
- Vary lightness, not just hue. Colours that differ in brightness survive every simulation; check with the Contrast Checker.
- Use tested palettes such as Okabe–Ito or ColorBrewer’s colour-blind-safe schemes, or build one in the Color Palette Generator and verify it here.
- Label charts directly. Put series names next to the lines instead of in a colour-only legend, and use different markers or dash patterns.
- Test early. Drop screenshots of maps, dashboards and form states into the side-by-side grid before shipping.
Color Blindness Simulator FAQ
Is this colour blindness simulator accurate?
It uses the peer-reviewed Machado et al. (2009) model, applied in linear RGB, which is the method most browser developer tools and accessibility plug-ins rely on. It is an approximation of typical cases, not of any one person’s vision, but it reliably exposes colour choices that fail.
What is the difference between deuteranopia and deuteranomaly?
Deuteranopia means the green-sensitive cones are missing entirely. Deuteranomaly means they are present but respond more like red cones, giving a milder, variable deficiency. Deuteranomaly is by far the most common form, affecting about 5% of men.
How common is colour blindness?
About 1 in 12 men (8%) and 1 in 200 women (0.5%) have a red-green deficiency, which is the most common type. Blue-yellow deficiency and complete colour blindness are far rarer.
Can I test my own colour palette?
Yes. Use the “Colour palette” sample for a quick look, upload a screenshot of your palette, or check specific pairs with the colour pair checker, which reports the ΔE difference under each vision type.
Is my image uploaded to a server?
No. The image is drawn to a canvas and processed with JavaScript entirely in your browser. Nothing leaves your device.
Which colours are safe for colour-blind users?
Blue and orange are distinguishable in nearly every form of CVD. Differences in lightness are always safe. Avoid relying on red versus green, green versus brown, or blue versus purple, and add a second cue such as text, shape or pattern.