Color Blindness Simulator
Preview images and palettes as people with color vision deficiencies may see them.
This is a simulation for checking designs, not a vision test. It shows typical effects; real color vision differs from person to person.
Simulation
Colors to check
HEX codes, rgb(), hsl(), oklch() or CSS names — one per line, separated by commas, or pasted from CSS or a Tailwind config. Up to 24 colors.
How the colors look
About the Color Blindness Simulator
Open an image or screenshot — a chart, a map, a user interface, a photo — and see it as it may look with the four main kinds of color vision deficiency: protanopia, deuteranopia, tritanopia and achromatopsia. Compare all of them side by side with the original, or drag a split slider across one of them. A severity slider covers the milder, anomalous forms (protanomaly, deuteranomaly and tritanomaly), and you can download the simulated image.
The Palette mode does the same for a list of colors and points out the pairs that become hard to tell apart. The simulation uses the physiologically based model of Machado, Oliveira and Fernandes, computed on your device in a background thread. It is a design aid that shows typical effects; it is not a vision test.
How to use it
- Choose Image and drop, paste or select a picture — or choose Palette and paste a list of colors.
- Pick Side by side to compare every type with the original, or Split to drag a divider across one type.
- Move Severity to see the milder, anomalous forms; 100% is the full deficiency (dichromacy). Achromatopsia is always shown in full.
- Download the simulated image, or select Copy results to copy the palette check as text. Fix the colors it flags — for example by making the two colors differ more in lightness.
Examples
Palette: #d62728 (red), #2ca02c (green), #1f77b4 (blue), #ff7f0e (orange)
Deuteranopia: #8b7c1f, #968838, #456cb3, #c4ae05 Flagged: colors 1 & 2 (red and green) look alike
Red and green turn into similar olive browns. With protanopia, green and orange are the pair that nearly match.
Same palette · Deuteranopia · Severity 60%
Deuteranomaly · 60%: #9f6d1f, #888e35, #416fb3, #d2a300
The colors drift in the same direction, but less far: red and green are harder, not impossible, to tell apart.
Common uses
- Checking that charts, maps and dashboards still work for colleagues and customers with color vision deficiencies.
- Reviewing a user interface for status colors (error red, success green) that rely on color alone.
- Teaching how color vision deficiencies change what people see.
- Comparing palette options before choosing one for a data visualization.
What the four types are
- Protanopia / protanomaly: the red-sensitive (L) cones are missing or shifted. Reds look darker, and reds, oranges, yellows and greens are easily confused.
- Deuteranopia / deuteranomaly: the green-sensitive (M) cones are missing or shifted; red and green are confused. Deutan deficiencies are the most common kind.
- Tritanopia / tritanomaly: the blue-sensitive (S) cones are missing or shifted; blues and greens, and yellows and pinks, are confused. This kind is rare.
- Achromatopsia: no working cones, so only lightness is seen. It is very rare and usually comes with reduced sharpness and light sensitivity, which a simulation cannot show.
Red–green (protan and deutan) deficiencies are far more common in men than in women, because the genes involved are on the X chromosome.
How the simulation works
Simulations of dichromacy go back to the work of Brettel, Viénot and Mollon. This tool uses the later model of Machado, Oliveira & Fernandes, which also covers the anomalous (partial) forms: the authors publish one 3 × 3 matrix per type for severities from 0 to 1 in steps of 0.1, and values in between are blended from the two nearest matrices, as they suggest.
Each pixel is converted from sRGB to linear light with the standard sRGB transfer curve (IEC 61966-2-1), multiplied by the matrix, clipped to the displayable range and converted back. Achromatopsia keeps only the relative luminance (0.2126 R + 0.7152 G + 0.0722 B) — an approximation: rod vision is most sensitive to blue-green light, so for a real rod monochromat reds look darker than they do here. The work runs in a Web Worker, so large images do not freeze the page.
Designing for color vision deficiencies
WCAG SC 1.4.1 asks that color is never the only way information is shown. In practice: label chart lines directly, add patterns or icons to states such as error and success, make neighboring colors differ clearly in lightness as well as hue, and avoid relying on red versus green. The palette check here flags pairs closer than 0.06 in OKLab (three times the 0.02 just-noticeable difference used by CSS Color 4); the Color Palette Generator has a Color-blind safe style that avoids such pairs.
Limitations
- This is a simulation for design work, not a diagnosis. To find out whether you have a color vision deficiency, see an optometrist or eye doctor.
- The model represents a typical observer. Real perception varies between people, and with lighting, screen and viewing distance.
- Severity applies to protan, deutan and tritan types; achromatopsia is shown at full strength only.
- Downloads are full resolution up to about 16.7 megapixels; larger images are scaled down first.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Is this a color blindness test?
No. It shows how images may look with a color vision deficiency, which helps designers check their work. It cannot tell whether you have one — for that, see an optometrist or eye doctor, who can use standardized tests.
What does the severity slider change?
Many people have an anomalous deficiency, where a type of cone works but is shifted, rather than missing completely. Lower severities show these milder forms (for example deuteranomaly at 60%); 100% shows the complete form (deuteranopia).
Which simulation should I check first?
Deuteranopia and protanopia, because red–green deficiencies are by far the most common. If your design passes those and also works in achromatopsia (lightness only), it will work for most viewers.
Why do red and green look almost the same in the simulation?
The red- and green-sensitive cones respond to overlapping wavelengths. If one of them is missing or shifted, the brain receives almost the same signal for reds and greens of similar lightness, so they look like the same olive or brown.
Are my images uploaded?
No. Images are processed in your browser, in a background thread on your device. Nothing is sent to a server, and the tool works offline once loaded.