Color Blindness Simulator

Roughly one man in twelve and one woman in two hundred has some form of colour-vision deficiency. This tool shows what your colours look like to them, and — more usefully — tells you which pairs stop being tellable apart. Everything runs in your browser: an image you open here is decoded and processed in the tab, never uploaded.

The four types. Protanopia is the absence of long-wavelength (red) cones, deuteranopia the absence of medium-wavelength (green) cones. Both are red-green deficiencies, both affect about 1% of men, and they are the reason a red/green status indicator is the classic accessibility mistake. Tritanopia — no short-wavelength (blue) cones — is far rarer at roughly 1 in 10,000, and unlike the other two it is not sex-linked. Achromatopsia is the absence of working cones altogether: vision is monochrome, at roughly 1 in 30,000.

What the simulation actually does. The dichromacy simulations use the method of Brettel, Viénot & Mollon (1997). A person missing one cone type cannot distinguish colours that differ only along that cone's axis, so the set of colours they can perceive collapses from a volume to a surface — two half-planes meeting along the neutral grey axis. The simulation projects each colour onto that surface, giving a colour you and they see the same way. The work is done in linear light rather than on sRGB values directly, because projecting gamma-encoded numbers gives the wrong answer. Achromatopsia is Rec.709 luminance, replicated across all three channels.

Worked example. Pure red #ff0000 becomes #6c5c0c — a dark olive — under protanopia, but #a48b00, a distinctly brighter yellow-brown, under deuteranopia. Both lose the redness, but only the protanope loses the brightness too, because the missing cone is the one carrying most of the luminance response at long wavelengths. That difference is a good check on any simulator: if red comes out equally bright in both, it isn't modelling the luminance loss.

Reading the pair findings. Separation is the Euclidean distance between two simulated colours in OKLab, a perceptually uniform space — so 0.05 means roughly the same perceptual gap wherever on the colour wheel it occurs, which is not true of raw RGB or HSL distance. Below 0.04 the tool calls a pair collides; below 0.10, close. For scale, the near-identical greys #808080 and #858585 sit at 0.017, mid-grey against white at 0.400, and black against white at 1.000.

The distinction between clearly different to normal vision and already close for everyone matters more than the raw number. Tailwind's red-500 and green-500 are 0.364 apart normally and 0.077 apart under deuteranopia — a real accessibility finding. Two colours only 0.02 apart to begin with are a palette problem for every viewer, and fixing the deficiency case would not help.

A finding people miss: blue and orange survive all three dichromacies well — Tailwind's blue-500 and orange-500 stay above 0.30 for protanopes, deuteranopes and tritanopes alike, which is why that pairing is a common recommendation. But under achromatopsia they fall to 0.070, because they are close in luminance. If your interface has to survive greyscale printing as well as colour-vision deficiency, check the achromatopsia row rather than assuming a colour-blind-safe palette covers it.

Limitations, stated plainly. The severity slider blends linearly between normal vision and full dichromacy. That is an approximation of anomalous trichromacy (protanomaly, deuteranomaly, tritanomaly) — the condition most colour-blind people actually have, where the cone exists but its sensitivity is shifted. The rigorous treatment is Machado, Oliveira & Fernandes (2009), which derives a separate matrix per severity step rather than interpolating; the difference is smallest at the extremes and largest in the middle of the range. Two bounds on the pair report: at most 200 colours are compared — every colour is checked against every other, so the work grows with the square of the palette — and the worst 50 pairs are listed per deficiency. Both say so on screen when they apply, and neither changes a verdict: what is reported is reported in full. Beyond that: dichromacy varies between individuals, simulations assume a calibrated sRGB display, and no simulation can tell you what someone else's experience is actually like. Treat the output as a design check, not as a claim about anyone's perception.

What to do about a collision. The fix is rarely a different hue. Separate the colours in lightness rather than hue, and — the part that actually satisfies WCAG — carry the information in something other than colour as well: a label, an icon, a pattern, a position. Colour should be the redundant channel, not the only one.

Related tools: Color Converter for the same colour in hex, RGB, HSL and OKLCH with a WCAG contrast checker, and Color Palette Generator to build a harmonious palette to test here.