Colour Blindness Simulator

about this tool

Drop in an image, or paste a palette, and see it as someone with each common kind of colour vision deficiency would. The palette view goes further and measures which of your colours end up hard to tell apart, so a chart can be fixed before anyone has to squint at its legend.

Four kinds, and how common each is

Most colour vision works with three kinds of cone in the eye, most sensitive to long, medium and short wavelengths — loosely, red, green and blue. A deficiency is one of those working differently, or not at all.

Red–green deficiency is by far the most common: about 8% of men and 0.4% of women of European descent (Birch, 2012), most of them with deuteranomaly, a green response that is shifted rather than gone. Tritan deficiency is rare, and complete achromatopsia rarer still, which is why the deuteran view comes first. The severity slider runs from typical vision at 0% to the cone type missing at 100%.

How it is simulated

Red–green deficiency uses Machado, Oliveira and Fernandes, "A Physiologically-based Model for Simulation of Color Vision Deficiency" (2009), which works from how each kind of cone responds to light. Its authors published the result as a 3×3 matrix for each deficiency at every tenth of severity, and suggest interpolating between them as a fast approximation that is also very accurate; this does exactly that, and the tests check it against colorspacious's own test values to six decimal places.

Tritan deficiency is different. The same authors write that they "restrain our model from trying to model tritanopia", so the tritan view uses the older model of Brettel, Viénot and Mollon (1997) — two projections either side of a plane through neutral grey — with the sRGB parameters published by libDaltonLens, and blends towards typical vision below 100%.

Both work in linear light rather than on stored pixel values. A cone responds to how much light arrives, and a stored value of 128 is about a fifth of the light of 255, not half. The 2009 paper does not specify which space its matrices belong in, and its authors showed results on stored values; but linear light is the better-founded choice, the one DaltonLens, colorspacious and R's colorspace now all make, and for saturated reds the difference is large.

Achromatopsia is shown as a simplification: each colour's daylight luminance, from the sRGB standard's own weights. That brightness is carried by the cones, which is exactly what the commonest complete form lacks — it sees through rods, which find reds darker and blues brighter than this grey — and the real condition also brings blur and sensitivity to light. Below 100% the achromat view is simply partly desaturated.

Every view approximates a typical person with that deficiency; real people vary.

Checking a palette

Paste the colours of a chart, a map key or a status system — hex, rgb(), hsl(), oklch(), names and most other CSS notations, separated by spaces, commas or lines — and every pair is measured with CIEDE2000, the CIE's colour-difference formula, twice: with typical vision and as each deficiency sees them. The implementation is checked here against all 34 test pairs Sharma, Wu and Dalal published for it. Colours outside sRGB are brought inside it first the way CSS does, keeping their lightness and hue, and the page says which.

Every pair that ends up close is listed, with both figures and whether the deficiency brought it there or it was close for everyone already. As a rule of thumb — it is not a standard — a difference below 5 is likely to be confused, and 5 to 10 is close; lines in a chart that must be told apart at a glance want well above that.

Contrast is not the same question

A colour pair can pass every contrast check and still fail here: telling apart colours that differ mainly in hue, a red line and a green one of similar lightness, is what colour blindness takes away, and no contrast ratio measures it. The fix is to give them different lightness, or a second cue — a label, a pattern, a shape — so colour is never the only way to tell. The colour palette generator builds scales with lightness steps wide enough to do that.

Contrast itself can change too. A protan sees red much darker — its luminance nearly halves — so pure red on black falls from 5.25:1, a pass, to about 3.3:1, a fail. For most other colours contrast holds up, and the contrast checker remains the right test for text.

Images

Images are read in the page and never uploaded. The browser converts them to sRGB as it reads them, so the most saturated colours of a wide-gamut phone photo are clipped before anything is simulated, and only the first frame of an animated image is used. The previews are drawn with their longest side at most 900 pixels to stay quick; because an image is shrunk before it is simulated, very fine detail — a pattern of one-pixel stripes — can look different in the preview from the full-size download, which is worked out again at full size. The largest image is 4096 × 4096, the biggest canvas a phone's browser will draw. Nothing is stored.

questions

How accurate is the simulation?

For red–green deficiency it uses Machado, Oliveira and Fernandes (2009), a model built from how each kind of cone responds to light, with the matrices its authors published at every tenth of severity; its results match colorspacious’s own test values to six decimal places. For tritan deficiency those authors decline to model tritanopia, so it uses Brettel, Viénot and Mollon (1997) instead, the model DaltonLens recommends. Each view approximates a typical person; real people vary.

Which kind of colour blindness is most common?

Red–green, by a long way. About 8% of men and 0.4% of women of European descent have some red–green deficiency (Birch, 2012), and most of them have deuteranomaly, where the green cones’ response is shifted rather than missing. Tritan deficiency is rare, and complete achromatopsia rarer still. That is why the deuteran view comes first here.

What does the severity slider do?

At 100% the cone type is missing altogether — deuteranopia, protanopia, tritanopia. Below that, for red–green, the cones are shifted rather than missing: deuteranomaly, and protanomaly, which is about as common as protanopia itself. Milder tritan forms are hardly documented, and are shown as a blend towards tritanopia. At 0% nothing changes.

Why does it work in linear light?

Because a cone responds to the amount of light that arrives, and pixel values are not amounts of light: 128 is about a fifth of the light of 255, not half. The 2009 paper does not say which space its matrices belong in — its authors showed results on stored values — but linear light is the better-founded choice, and the one DaltonLens, colorspacious and R’s colorspace now all make. For saturated reds the two differ a great deal.

How do I know if two colours in my chart will be confused?

Use the palette view. It measures every pair with CIEDE2000, the CIE’s colour-difference formula, both with typical vision and as each deficiency sees them, and lists every pair that ends up close — saying whether the deficiency brought it there or it was close for everyone already. As a rule of thumb, not a standard, below 5 is likely to be confused and 5 to 10 is close. The formula is checked against all 34 of its published test pairs.

If my colours pass a contrast checker, are they colour-blind safe?

Not necessarily, on two counts. Telling two colours apart when they differ mainly in hue — a red line and a green one of similar lightness — is what colour blindness takes away, and no contrast ratio measures it; give such colours different lightness, or a label or pattern. And contrast itself can change: a protan sees red much darker, so pure red on black falls from 5.25:1, a pass, to about 3.3:1, a fail.

Is my image uploaded?

No. It is decoded, simulated and saved in this page, on your device, and no part of it is sent anywhere. The previews are drawn with their longest side at most 900 pixels to stay quick; the download is worked out again at the image’s full size.

How large an image can it take, and what happens to it?

Up to 16.7 million pixels — 4096 × 4096, the largest canvas iOS Safari will draw — with no side longer than 16,384. The browser converts the image to sRGB as it reads it, so the most saturated colours of a wide-gamut phone photo are clipped first, and only the first frame of an animated image is used. The simulation runs in short slices; reading and writing the pixels themselves cannot be split.