Colour Blindness Simulator
See a design as the four main kinds of colour vision deficiency do.
Does The Information Survive?
About one man in twelve and one woman in two hundred has some form of colour vision deficiency. For a chart with a red line and a green line, or a form that marks errors in red alone, that is a meaningful share of your readers who cannot get the information at all — and they will not write in to say so, because from their side the page simply makes no sense.
This simulates the four main types on your own image so you can ask the only question that matters: does the information survive? If two lines become the same colour here, the chart needs a second signal — a label, a dash pattern, a marker shape — not merely a different pair of colours.
Key features
- All five views at once — normal vision alongside protanopia, deuteranopia, tritanopia and achromatopsia.
- Adjustable severity — full deficiency down through the partial forms, which are far more common.
- Correct colour handling — the simulation works in linear light, which is why it does not come out too dark.
- A downloadable comparison — all five labelled side by side, for a report or a design review.
- Nothing is uploaded — useful when the design is not public yet.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Colour Blindness Simulator
- Open your design
A chart, a screenshot, a mock-up, a photograph. - Compare the five views
Deuteranopia is the one to look at first; it is by far the most common. - Try a partial severity
Most people with a deficiency have a partial form rather than a complete one. - Fix what disappears
Add a label, a pattern or a shape — not just another colour.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
Which type should I design for?
Deuteranopia and its partial forms, which together account for the large majority of cases. Getting red and green apart is most of the work. Tritanopia is rare, and achromatopsia is very rare — but a design that survives greyscale survives essentially everything, which is why checking it is a quick and thorough test.
How accurate is the simulation?
It uses the Brettel–Viénot–Mollon model, which is the standard approach and the same one behind browser developer tools' accessibility features. It approximates what a person with a deficiency perceives; it cannot capture individual variation, and people who have never had full colour vision often distinguish things by cues a simulation does not model. Treat it as a design check, not as a description of anyone's experience.
My chart fails. What is the fix?
Add a channel that is not colour. Direct labels on the lines, different dash patterns, different marker shapes, or different line weights all work, and all of them help everyone in a black-and-white printout too. Choosing a colour-blind-safe palette helps as well, but on its own it only moves the problem.
Is a contrast checker enough on its own?
No — they answer different questions. A contrast checker measures lightness difference, which is what makes text legible. This shows whether two colours remain distinguishable from each other, which is what makes a legend work. A chart can pass contrast and still be unreadable because two of its lines have merged.
Does this work on a screenshot of a website?
Yes, and it is one of the quickest useful checks there is. Screenshot the page, drop it in, and look at what stops being distinguishable — error states, chart series, status indicators and map keys are where problems usually are.