Skip to content
ToolBoxGeniehome

Colour Blindness Simulator

Developer Tools · Added

Red for failure and green for success is the most common accessible-design mistake there is, and it looks fine to the person who chose it. Enter two colours and see what happens to the pair under each form of colour vision deficiency.

100% is full dichromacy. Most people with a colour vision deficiency are anomalous trichromats and see a reduced version of the difference, which is what the lower settings represent.

Try:

Result

The two stay distinguishable under all four simulations. Hue is not the only thing separating them.
Difference as seen normally
237

Under 40 is hard to tell apart

Contrast ratio
1.47:1

Unchanged by every simulation below — which is the point

Affected by
0

None of the four

How the pair looks

Normal colour vision

#16a34a
#dc2626
difference 237

Deuteranopia (green-blind)

About 6% of men, 0.4% of women
#88884f
#898900
difference 79

By far the commonest. Reds, greens and browns collapse towards a yellow-beige, and a red-green status indicator stops carrying any information.

Protanopia (red-blind)

About 1% of men
#96964b
#686822
difference 77

Similar confusions to deuteranopia, with one addition: red also appears much darker, so red text on a dark background can disappear entirely.

Tritanopia (blue-blind)

Under 0.01%, and equal between the sexes
#3d9b9b
#dc2626
difference 229

Blue and green confuse, as do yellow and violet. Rare enough to be missed in testing, and it is the one that breaks blue-yellow palettes chosen to avoid red-green problems.

Achromatopsia (no colour)

Around 1 in 30,000
#8e8e8e
#727272
difference 48

Very rare, and the strongest test there is: if a design still works here, hue was never carrying meaning alone.

The contrast ratio is identical in every row above, because contrast is computed from luminance and luminance barely changes under these deficiencies. That is exactly why a red-green status indicator can pass every automated contrast check and still tell one man in twelve nothing at all. The fix is never a different shade — it is to carry the meaning in something besides hue: a label, an icon, a shape, or a real difference in lightness. The simulation is a model of complete dichromacy, and most people affected see a reduced version of the difference rather than none of it, which is what the severity slider represents.

How to use the colour blindness simulator

  1. 1Enter two hex colours, or pick from the common interface pairs.
  2. 2Compare each simulated row against the original at the top.
  3. 3Read the separation figure — a low number means the two have merged.
  4. 4Where a pair collapses, add a second signal: a label, an icon, a shape or a difference in lightness.

Examples

The classic status pair

Input
#d62828 red against #4a7c2f green
Result
Collapses under protanopia and under complete colour blindness. Under protanopia the two land at #666625 and #757530 — a separation of 24 out of 441.

Deuteranopia keeps them barely apart; achromatopsia renders them one greyscale step from identical.

A pair that survives

Input
A dark blue against a light amber
Result
Stays distinguishable in every simulation, because the two differ in lightness as well as hue — and lightness is what no form of colour blindness takes away.

About the colour blindness simulator

Colour as the only signal

Around one man in twelve and one woman in two hundred has some form of colour vision deficiency, which on any real audience means a meaningful slice of it. The failure mode is rarely that a page looks ugly — it is that a distinction the design depends on simply stops existing.

A red-bordered invalid field beside a green-bordered valid one, a chart whose series are only told apart by their line colour, a map keyed entirely by hue: all of these carry their whole meaning in the one channel that may not arrive. WCAG's first success criterion under Distinguishable is exactly this, and it asks for a second signal rather than a different palette.

Lightness is the channel that always survives

Every form of colour vision deficiency affects hue discrimination. None of them takes away the ability to tell light from dark. That single fact is the most useful design heuristic available here: if two colours differ substantially in lightness, they will stay apart under every simulation on this page, and in greyscale printing too.

It also explains why the usual advice to 'use a colour-blind-safe palette' is only half the answer. Palettes designed for the purpose work because their colours vary in lightness, not because certain hues are inherently safe — and a palette applied at uniform lightness will fail regardless of which hues went into it.

Frequently asked questions

How accurate is the simulation?
It uses the Brettel-Viénot-Mollon model, the approach most simulation tools are built on, which projects colours onto the plane of hues a dichromat can still tell apart. That models the three dichromacies — a missing cone type — well. It cannot model anomalous trichromacy, the far commoner mild form where a cone is shifted rather than absent, and it says nothing about how any individual actually experiences colour.
What do the deficiency names mean?
Protanopia is the absence of long-wavelength cones and deuteranopia the absence of medium-wavelength ones; together they account for nearly all colour blindness and both compress the red-to-green axis. Tritanopia, the loss of short-wavelength cones, is rare and affects blue against yellow. Achromatopsia, rarer still, is the absence of colour vision altogether.
What counts as enough separation?
The figure shown is the straight-line distance between the two colours in RGB, out of a possible 441. Below about 40 they are effectively the same colour on a screen. Treat it as a tripwire rather than a standard: it is a rough perceptual measure, and the useful conclusion is 'these have merged, do something else' rather than a score to optimise.
Does passing here mean my page is accessible?
No — this checks one pair of colours for one property. It says nothing about text contrast, which the contrast checker handles, and nothing about focus order, labelling, keyboard operation or anything else. It answers a single narrow question: if these two colours are the only thing telling two states apart, does that still work when the hue difference goes away?

Related tools