Color Blindness Simulator

See your colors through every type of color blindness

Check how a colour or an image appears to people with the eight main types of colour vision deficiency. Everything runs in your browser — images are never uploaded.

What is colour vision deficiency?

Colour vision deficiency — commonly called colour blindness — is a reduced ability to tell certain colours apart. It is far more common than many designers realise: it affects roughly 1 in 12 men and 1 in 200 women. The most widespread types affect the perception of red and green.

The main types

Protanopia and deuteranopia are the absence of red and green cones respectively, making those colours hard to distinguish. Tritanopia affects blue and is rare. Each also has a milder "anomalous" form (protanomaly, deuteranomaly, tritanomaly) where the cone is present but less sensitive. Achromatopsia, total colour blindness, is very rare.

Designing with colour blindness in mind

The practical takeaway: never rely on colour alone to convey meaning. Pair colour with text, icons or patterns, and check that important contrasts survive the red-green simulations above. If two colours become indistinguishable under deuteranopia, choose a different pair.

Practical rules that help

A handful of habits make interfaces work for everyone. Add a second signal — don't mark errors with red alone; add an icon or the word "error". Avoid problematic pairings like red/green and blue/purple for things that must be told apart, such as chart series or status indicators. Use labels directly on data rather than relying on a colour-coded legend the viewer has to match up. Keep strong lightness contrast between adjacent colours, because even when hue is hard to distinguish, a difference in lightness usually still reads. And test with the simulations above — if your key colours stay distinguishable through deuteranopia and protanopia (the most common types), you've covered the large majority of cases.

Where this matters most

Charts and graphs are the biggest offender — a line chart with red and green series is unreadable for many people. Status systems (online/away/busy), form validation, maps, and any "good vs bad" colour coding all need a non-colour backup. Run your palette through the simulator before shipping a dashboard, data visualization or status UI.

About the simulation

The simulations use established colour-vision-deficiency transformation matrices to approximate how each type of CVD alters perception. They are an excellent design check — accurate enough to reveal which colour pairs collapse together — but they are an approximation, not a medical or diagnostic tool. Individual experience of colour blindness varies. Treat the result as "would these colours cause a problem?" rather than an exact reproduction of any one person's vision.

Frequently asked questions

What is color blindness?
A reduced ability to distinguish certain colours. The common forms affect red and green and are far more common in men — about 8% of men and 0.5% of women.
Does this tool upload my image?
No. Image simulation runs entirely in your browser using the canvas. Nothing is sent to any server, so it's safe for private or unreleased designs.
What are protanopia and deuteranopia?
Protanopia is the absence of red cones, deuteranopia the absence of green cones. Both make red and green hard to tell apart and are the most common types.
How many types does this simulate?
Eight: protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia and achromatomaly — covering the full range from mild to total.
Is the simulation medically accurate?
It uses established CVD transformation matrices and is an excellent design check, but it is an approximation rather than a diagnostic tool. Individual experience varies.

More color tools

Color Picker →
Pick visually, get every code.
Converter →
Convert between any formats.
Contrast Checker →
WCAG AA/AAA pass-fail.
Color Codes →
Named colors, charts, game codes.