See a palette or an image the way a colour-blind reader does — protan, deutan, tritan, and full achromatopsia, with severity as a slider rather than an on/off switch. Pairs that started clearly distinct and end up indistinguishable are flagged, so you get a list of collisions instead of a picture to squint at.
Step by step
01Bring in the colours
A set of swatches from your palette, or an image — a chart, a screenshot, a map. Everything is transformed on your machine.
02Pick the deficiency
Deutan is the most common and the right default. Protan darkens reds noticeably; tritan collapses blue and green; achromatopsia removes hue entirely and is the strictest test of whether your design works on lightness alone.
03Move severity off the extremes
Most colour-blind people have anomalous trichromacy — a reduced response rather than a missing cone. Checking at partial severity is closer to the common experience than checking only at 1.0.
04Read the flagged collisions
Pairs that were clearly different before the transform and are nearly identical after it are listed explicitly. That list is the actionable output — the picture is just the evidence.
Worked example
Red and green status indicators are the canonical failure, and they fail in the most common deficiency there is. The distances below are why.
Given
Distinct before, indistinguishable after
before red and green sit far apart in hue
and at similar lightness
a sighted reader separates them instantly
after both transform toward the same
yellow-brown, and their lightness
was already close
-> the pair is flagged as a collision
fix change lightness, or add a shape:
a tick and a cross survive every modeRed and green are chosen for status because they are opposites in hue — which is exactly the axis that red-green deficiency removes. The pair also tends to sit at similar lightness, so once hue is gone there is nothing left to tell them apart. Any fix that only changes the hues is treating the symptom; separating them in lightness, or adding an icon, fixes the cause.
Before you rely on colour
Never let colour be the only signal
This is the whole of the guidance and it is easy to satisfy: a shape, an icon, a label, a pattern, or a position alongside the colour. A chart with direct labels and a status list with a tick and a cross work for everyone, including people looking at a bad projector in a bright room.
Red-green is the common case by a wide margin
Deutan and protan together account for the overwhelming majority — roughly 8% of men and 0.5% of women of northern European descent. Tritan is rare and achromatopsia rarer still, but both are useful as stress tests: a design that survives them survives everything.
Most people are not dichromats
Full absence of a cone type is the minority case; far more people have a shifted or weakened response, which the severity slider models. Checking only at full severity can make a design look catastrophic when the lived experience is subtler — and can also let a marginal design pass at zero.
Lightness survives every deficiency
Achromatopsia removes hue entirely and lightness still carries. That makes it the most useful single check you can run: if your interface still works in that mode, it works in all the others. It is also why separating status colours in lightness is more robust than separating them in hue.
Simulation approximates, it does not reproduce
These are matrix transforms of a well-studied model, not a window into someone's perception. They are excellent for catching collisions and no substitute for testing with colour-blind users when the stakes are high — a medical chart, a safety indicator, a financial dashboard.
Everything runs locally
Both the swatch transform and the image transform run in your browser, so an unreleased design or an internal dashboard screenshot never leaves the machine.
The judgement call
Once a pair is flagged, these are the repairs in rough order of robustness.
Status indicators, success and error
Add a shape
A tick and a cross survive every deficiency and every bad screen. The most robust fix there is.
Two lines on a chart
Separate lightness
Lightness is the one channel that survives all four modes. Dashes and markers help further.
Categorical series, many colours
Label directly
Beyond about five categories no palette is reliably distinguishable. Put the name next to the line.
A required-field or validation colour
Add text
A red border alone tells a colour-blind user nothing. The message is what carries the meaning.
A heat map or a sequential scale
Use a single-hue ramp
Vary lightness along one hue rather than crossing red to green, and the ordering stays readable in every mode.
A decorative colour with no meaning
No action
If nothing is communicated by the colour alone, a collision does not cost the reader anything.
Reference
FAQ
Load your palette or a screenshot and switch between the four modes, starting with deutan as the most common. Read the flagged collisions rather than judging by eye: those are the pairs that a sighted viewer separates easily and a colour-blind viewer cannot.
Roughly 8% of men and 0.5% of women of northern European descent have some form, and red-green deficiency accounts for the overwhelming majority. In practical terms, any interface with more than a handful of users has some.
Red and green are opposites in hue, and hue is exactly the axis red-green deficiency removes. They also tend to sit at similar lightness, so once the hue difference is gone there is nothing left. Separating them in lightness helps; adding a tick and a cross fixes it outright.
Achromatopsia. It removes hue entirely, so anything still readable is being carried by lightness or by a non-colour cue. A design that survives that mode survives all the others, which makes it the fastest way to find out whether colour is doing work it should not be doing alone.
Yes. Complete absence of a cone type is the minority case — most colour-blind people have a reduced or shifted response, which is what the slider models. Checking only at full severity overstates the problem, and checking only at zero misses it.
The simulation is a matrix transform of a well-established model: reliable for finding collisions, and not a window into anyone's actual perception. For safety-critical or medical interfaces, use it to catch the obvious problems and then test with colour-blind users.
Both the swatch and image transforms run in your browser. Nothing is uploaded, which matters for unreleased designs and internal dashboards.
Keep going
Contrast Checker
Separate a colliding pair in lightness and verify the result.
Palette Generator
Build a scale whose steps differ in lightness, not only in hue.
Color Converter
Adjust a colour's lightness in OKLCH without changing its hue.
Named Color Library
Check how the CSS named colours behave under each deficiency.