If your design conveys meaning through color alone — red for errors, green for success, differently-hued lines on a chart — then roughly 1 in 12 men and 1 in 200 women will have trouble reading it. This simulator lets you preview a single color, or an entire image, as it would appear to someone with one of the four most common color vision deficiencies, so you can catch problems before shipping.
Pick a mode: color input produces a row of swatches showing the same color under each condition; image input lets you upload a PNG or JPEG and see the whole image transformed. Paste any hex, RGB, or HSL value — all three formats are accepted. Both operations run entirely in your browser — nothing is uploaded.
The four types
- Protanopia: missing L-cones (red perception). The person’s sensitivity to longer wavelengths is shifted toward where M-cones already respond, which means reds and greens become hard to distinguish, and pure red appears significantly darker. About 1% of men.
- Deuteranopia: missing M-cones (green perception). Similar end effect to protanopia — reds and greens look alike — but without the red-darkening. About 1% of men. Deuteranomaly (the partial form) is more common, at around 5% of men.
- Tritanopia: missing S-cones (blue perception). Yellows and blues get mixed up; purples look pinkish. Very rare, below 0.01% of the population. Acquired tritanopia (as opposed to inherited) is more common in people with diabetes or certain eye diseases.
- Achromatopsia: total colorblindness. No functional cones at all, just rod cells, which respond only to brightness. The visual experience is monochromatic — like a black and white photograph. About 1 in 30,000 people.
How the simulation works
Each deficiency is simulated by applying a 3×3 linear transformation matrix to each RGB pixel:
Where $M$ is specific to the deficiency type. For protanopia, the matrix shifts the red channel mostly into green; for deuteranopia, the green channel is split between red and blue; for tritanopia, the blue channel redistributes toward green and red; for achromatopsia, every output channel is the standard BT.601 luminance value (0.299R + 0.587G + 0.114B), giving a pure greyscale output.
The matrices are the commonly-cited forms derived from Brettel, Viénot, and Mollon (1997) and subsequent simplifications. They are approximate — real color vision deficiency is a continuous spectrum, not a binary condition — but they are good enough to spot whether a design depends on color information that won’t survive the transformation.
Example: a status indicator pair
Many UIs use green and red to indicate success and error. Both are pure highly-saturated colors, so the contrast feels unmistakable to people with normal color vision. Pick #22c55e (a typical success green) and click through the simulations; then do the same for #ef4444 (an error red).
Under protanopia and deuteranopia, the two colors collapse onto each other — both become a muddy yellow-brown, and the contrast between them falls through the floor. A user with red-green colorblindness cannot tell your success indicator from your error indicator without additional cues. This is why WCAG 1.4.1 (Use of Color) exists: never rely on color alone to convey information. Add an icon, a text label, or a positional difference, and your design becomes legible to everyone regardless of cone type. Then check the foreground/background contrast ratio to confirm the non-color cues are also legible.
Example: a full image
Upload a photograph or UI screenshot and the tool draws it four times: once per deficiency. For photographs, the simulations are usually subtle — the human brain compensates for a lot of color variation, so a landscape photo looks “similar but a bit flat” under red-green deficiencies. For UI screenshots, the effect can be dramatic: charts that use five colors for five data series often collapse into two or three distinguishable ones, and hyperlink colors that rely on blue-green distinction vanish entirely.
This is the fastest way to check whether your actual interface survives a simulated pass — much faster than setting up browser extensions, filters, or third-party accessibility tooling.
What this tool does not do
It does not simulate anomaly (partial) forms — only the severe dichromacy forms. Protanomaly and deuteranomaly, which are more common than full dichromacy, have intermediate appearance between normal vision and the full deficiency; the tool shows you the worst case.
It does not compute contrast ratios, which are the other half of color accessibility. For WCAG-compliant text/background contrast, use a dedicated contrast ratio checker — they’re a separate category.
It does not handle CSS color-scheme, dark-mode transformations, or any other non-deficiency color mappings. Just the four linear matrix simulations, applied either to a single hex or to the pixels of an uploaded image.