What percentage of users are colour blind?

Roughly 8% of men and 0.5% of women, or about 1 in 12 and 1 in 200. Deuteranopia and protanopia — the red-green forms — account for the large majority of cases.

What is the difference between protanopia and deuteranopia?

Both are red-green deficiencies. Protanopia is a missing red cone, which also makes reds appear darker overall. Deuteranopia is a missing green cone and is the more common of the two. Visually the effect is similar: red and green converge toward a muddy yellow-brown.

How do I make charts and status colours accessible?

Vary lightness as well as hue so the difference survives desaturation, and add a second channel — direct labels, icons, patterns or position. If a chart still reads correctly in the achromatopsia simulation, it will read for every user.

Is my screenshot uploaded to a server?

No. The simulation runs entirely in your browser on a canvas, so the image never leaves your device.

floow.design

Colour Blindness Simulator

See your screens the way users with each type of colour vision deficiency see them.

Simulate freeSign up to download the simulationNo usage limits

Drop a screen or design hereProcessed in your browser — nothing is uploaded

Simulate

No green cones — the most common form. Red and green converge.

Add a screenshot to see it through each type of colour vision deficiency.

Upload a screen and view it through each major type of colour vision deficiency: protanopia, deuteranopia, tritanopia and full achromatopsia.

Around 8% of men and 0.5% of women have some form of colour blindness. On an app with a hundred thousand users that is thousands of people who cannot see the distinction your interface depends on.

What the simulation is doing

Each type of colour blindness comes from a missing or shifted cone in the retina. The simulator applies the matrix transform that approximates each deficiency, collapsing the colour information those cones would have carried. It is an approximation rather than a clinical model, but it is more than accurate enough to reveal the failure that matters: two interface states that you can tell apart and a large share of your users cannot.

The red-green problem

Deuteranopia and protanopia both collapse red and green toward a similar muddy yellow-brown. That breaks the single most common convention in interface design — green for success, red for error — and it breaks it silently, because the affected user sees two states that look identical rather than an obvious fault they could report.

Never let colour carry meaning alone

Pair every colour signal with a second channel: an icon, a label, a shape, a position. A red field with an alert icon and the word 'Required' communicates through three channels; a red border communicates through one. This is the whole of WCAG 1.4.1, and it costs almost nothing to honour at design time.

How to use the colour blindness simulator

Upload a screenshot of a real screen — ideally one with status colours, a chart, or an error state.
Start with deuteranopia, the most common form, and look for anything that has become ambiguous.
Switch to achromatopsia as the hardest test: if the screen works with no colour at all, it works for everyone.
Anywhere a distinction disappears, add a second channel — an icon, a label, a pattern or a position.
Download the simulation to attach to a design review or accessibility ticket.

Use it with

Contrast Checker — Test any foreground and background pair against WCAG AA and AAA, at both body and large text sizes.
Color Picker from Image — Drop in a screenshot or photo and pull out every colour in it, ready to paste into your app's theme.
Gradient Generator — Build linear and radial CSS gradients with as many stops as you need, and copy the code.

Frequently asked questions

What percentage of users are colour blind?: Roughly 8% of men and 0.5% of women, or about 1 in 12 and 1 in 200. Deuteranopia and protanopia — the red-green forms — account for the large majority of cases.
What is the difference between protanopia and deuteranopia?: Both are red-green deficiencies. Protanopia is a missing red cone, which also makes reds appear darker overall. Deuteranopia is a missing green cone and is the more common of the two. Visually the effect is similar: red and green converge toward a muddy yellow-brown.
How do I make charts and status colours accessible?: Vary lightness as well as hue so the difference survives desaturation, and add a second channel — direct labels, icons, patterns or position. If a chart still reads correctly in the achromatopsia simulation, it will read for every user.
Is my screenshot uploaded to a server?: No. The simulation runs entirely in your browser on a canvas, so the image never leaves your device.