Colour blindness simulator

See which pairs in your palette stop being tellable apart.

Your palette

3 pairs collapse

Each colour below may pass contrast against the background on its own. That is not the same as being tellable apart from its neighbour.

  • dc3545 / 0d6efdcollapses under achromatopsiaΔE 0.4
  • dc3545 / 28a745collapses under deuteranopia, achromatopsiaΔE 4.0
  • 28a745 / 0d6efdcollapses under achromatopsiaΔE 9.6

Simulated

What colour blindness simulator is

A tool that transforms colours to approximate how they appear to someone with a colour-vision deficiency. A useful one compares every colour in a set against every other, because the failure being looked for is two colours becoming the same, not one colour becoming hard to read.

What this tool does that others do not

  • Pairwise, which is the whole point

    Contrast checking asks whether a foreground separates from a background and never whether two foregrounds separate from each other. A red and a green can both clear 4.5:1 on white and be indistinguishable to a deuteranope, because the thing separating them is the exact axis that person cannot see.

    Bootstrap’s danger and success colours sit about 74 apart in perceptual distance for typical vision and about 4 under deuteranopia. Tailwind’s red-500 and green-500 fall from 76 to about 8.

  • The Machado model, applied in the right space

    The transform is Machado, Oliveira and Fernandes (2009) — physiologically based, modelling a shift in cone response rather than desaturating or rotating hues. Its matrices operate on linear RGB, so the tool linearises, transforms, then re-encodes. Applying them straight to sRGB values is a common shortcut and produces visibly wrong colours.

  • Eight deficiencies, with prevalence stated

    Dichromacy — protanopia, deuteranopia, tritanopia — is modelled at full severity, and the anomalous forms are the same transform at partial strength. The prevalence figures are labelled approximate because populations differ and the tritan and achromat numbers are small enough that sources disagree.

    Deuteranomaly is by far the most common at roughly 5% of men; deuteranopia, protanomaly and protanopia are each around 1%; tritanopia and achromatopsia are near 0.003%.

How to use it

  1. Paste the whole palette, not one pair

    The failure is a relationship between two colours in your set, so the set is the unit of analysis.

  2. Read the collapses before the previews

    The list names which pairs stop being tellable apart and under which deficiency. The rendered previews are for conviction; the list is the finding.

  3. Separate by lightness

    Lightness perception is unaffected by every red-green deficiency, so two colours a clear step apart in lightness stay distinguishable whatever the cones are doing.

  4. Add a second cue

    This is the one that satisfies WCAG 1.4.1, which asks that colour never be the sole carrier of meaning: an icon on the error state, a direct label on the chart series, dashed against solid.

Worked examples

Real input, real figures.

A framework’s status colours

You give it

Bootstrap’s #dc3545 and #198754, both of which pass contrast on white at 4.53:1.

You get

Perceptual distance about 74 for typical vision, about 4 under deuteranopia. For roughly 5% of men an error banner and a success banner are the same colour, and every contrast audit will have passed them.

Choosing a two-colour axis that survives

You give it

Blue against orange, compared with red against green.

You get

Blue and orange survive every red-green deficiency intact — in measurement the pair often separates further under deuteranopia than under typical vision. Red and green at similar lightness is the pair that collapses.

Against a filter preview

AspectThis toolA CSS filter or image overlay
MethodMachado 2009 cone-response modelHue rotation or desaturation
Colour spaceLinearised, transformed, re-encodedApplied to sRGB values directly
What it comparesEvery colour against every otherThe whole page, by eye
OutputNamed pairs that collapse, with the deficiencyA tinted screenshot

Guides and measurements

What it will not do

  • Simulation shows what is likely lost, not what a specific person sees. The anomalous forms in particular vary from person to person, and the model is an approximation of a continuum.
  • Passing here does not make a design accessible. WCAG 1.4.1 requires that colour is never the only carrier of meaning, which is a structural fix rather than a palette one.

The gap contrast checking leaves

A contrast checker asks one question: is this foreground separable from this background? It is a good question and it misses an entire category of failure, because it never compares two foreground colours to each other.

Take the status colours most frameworks ship. Bootstrap's danger red and success green sit at a perceptual distance of about 74 for typical vision — unmistakably different. Simulate deuteranopia and that distance drops to roughly 4. Tailwind's red-500 and green-500 fall from 76 to about 8. For the ~5% of men with deuteranomaly, a red error state and a green success state are close to the same colour, and every contrast audit will have passed them.

What the simulation is doing

The model is Machado, Oliveira and Fernandes (2009), the same one Chrome DevTools uses. It is physiologically based: it models a shift in cone response rather than simply desaturating or rotating hues.

One implementation detail matters more than it sounds. The matrices operate on linear RGB, not on the sRGB values in your hex codes. Applying them directly to sRGB is a common shortcut and it produces visibly wrong colours, so this tool linearises, transforms, then re-encodes.

Dichromacy — protanopia, deuteranopia, tritanopia — is modelled at full severity. The anomalous forms are the same transform at partial strength, which is an approximation of a condition that genuinely varies from person to person.

What to do about a collapse

Separate by lightness, not just hue.Lightness perception is unaffected by every red-green deficiency. Two colours a clear step apart in lightness stay distinguishable no matter what the cones are doing.

Use the blue-orange axis.It survives red-green deficiency intact — in measurement it often separates further under deuteranopia than under typical vision.

Add a second cue.This is the one that actually satisfies WCAG 1.4.1, which asks that colour never be the sole carrier of meaning. An icon on the error state, a direct label on the chart series, a dashed versus solid line. Then the palette stops being load-bearing.

Questions people ask

Straight answers. Each one links directly: copy the address after opening it.

How common is colour blindness?

Around 1 in 12 men and 1 in 200 women of Northern European ancestry have some form. Deuteranomaly — green cones shifted toward red — accounts for the majority at roughly 5% of men. Prevalence varies by population.

Why does my palette pass contrast but still fail here?

Contrast checking compares each colour against its background. It never compares two foreground colours against each other. A red and a green can both clear 4.5:1 on white and still be indistinguishable to a deuteranope, because the thing that separates them is the exact axis that person cannot see.

Which colour pairs are safe?

Blue against orange survives every red-green deficiency and is the most reliable two-colour axis. Anything separated mainly by lightness also survives, because lightness perception is unaffected. What fails is a pair that differs only along the red-green axis at similar lightness.

Is simulation enough to call a design accessible?

No. Simulation shows you what is likely lost, not what a specific person experiences, and the models are approximations. WCAG 1.4.1 asks that colour never be the only way information is conveyed — so the durable fix is a second cue: a label, an icon, a pattern or a position. Treat this tool as a way to find problems, not to certify their absence.