👁️ Color Blindness Simulator
By ToolNimba Design Team · Updated 2026-06-19
PNG, JPG, WEBP, GIF or BMP. Your image never leaves your browser.
100% is full dichromacy. Lower values model milder anomalous trichromacy.
Choose an image to get started.
This color blindness simulator shows how your colors look to people with color vision deficiency (CVD). Upload an image or pick a single color, choose protanopia, deuteranopia or tritanopia, and see the simulated result side by side with the original. Everything runs in your browser using canvas pixel math, so your images are never uploaded anywhere. It is a fast way to sanity-check a design, chart or palette for the roughly 1 in 12 men and 1 in 200 women who see color differently.
What is the Color Blindness Simulator?
Color vision relies on three types of cone cell in the retina, each most sensitive to long (red), medium (green) or short (blue) wavelengths. Color vision deficiency happens when one cone type is missing or shifted. The three dichromatic types are protanopia (no working red cones), deuteranopia (no green cones) and tritanopia (no blue cones). Milder anomalous forms, where a cone is present but shifted, are called protanomaly, deuteranomaly and tritanomaly, and the severity slider in this tool approximates that range between normal vision and full dichromacy.
The simulator works by transforming each pixel. The image is drawn to an off-screen canvas, the raw pixel data is read with getImageData, and every red, green and blue value is multiplied through a 3x3 transform matrix that models how the missing cone type collapses certain colors together. The new values are written back with putImageData. The matrices used here are the widely cited standard CVD transforms (Brettel and Viénot style, as popularised by Machado and others), the same family of matrices behind most browser and design-tool simulations.
A simulation is an approximation, not a medical diagnosis. Real CVD varies from person to person, viewing conditions and display calibration matter, and the standard matrices operate on sRGB values rather than a fully linearised color space. Treat the output as a strong design check: if two colors that must be distinguishable (a red error state versus a green success state, two lines on a chart) merge into the same shade under deuteranopia, that is a real accessibility problem worth fixing, regardless of the exact pixel values.
When to use it
- Checking whether a chart, map or dashboard stays readable for color blind users before you ship it.
- Testing a brand palette or UI color scheme so red and green states do not become indistinguishable.
- Reviewing a status design (success, warning, error) that relies on color alone to convey meaning.
- Demonstrating to a client or team why color contrast and non-color cues matter for accessibility.
- Previewing a single color across all three deficiency types when picking accent or label colors.
How to use the Color Blindness Simulator
- Choose Image mode and upload a PNG, JPG or WEBP, or switch to Single colour mode and pick a color.
- Select the deficiency to simulate: protanopia, deuteranopia, tritanopia or total achromatopsia.
- In image mode, adjust the severity slider to model a milder anomalous form if you want.
- Click Simulate to see the original and simulated versions side by side.
- Compare the two, then download the simulated image or read off the shifted hex values.
Formula & method
Worked examples
A pure red pixel (255, 0, 0) simulated as deuteranopia at full severity.
- Deuteranopia matrix row R = (0.625, 0.375, 0.000)
- R2 = 0.625 x 255 + 0.375 x 0 + 0 x 0 = 159
- G row = (0.700, 0.300, 0.000): G2 = 0.700 x 255 = 178.5, rounded to 179
- B row = (0.000, 0.300, 0.700): B2 = 0
- Result pixel = (159, 179, 0), a muddy yellow-green
Result: Red (255, 0, 0) becomes (159, 179, 0), so it reads as a dull yellow instead of red.
A pure green pixel (0, 255, 0) simulated as protanopia at full severity.
- Protanopia matrix row R = (0.567, 0.433, 0.000): R2 = 0.433 x 255 = 110
- G row = (0.558, 0.442, 0.000): G2 = 0.442 x 255 = 113
- B row = (0.000, 0.242, 0.758): B2 = 0.242 x 255 = 62
- Result pixel = (110, 113, 62)
Result: Green (0, 255, 0) becomes (110, 113, 62), a dull olive that is easy to confuse with red.
Types of color vision deficiency and what they affect
| Type | Cone affected | Confused colors | Rough prevalence (men) |
|---|---|---|---|
| Protanopia / protanomaly | Long (red) | Red vs green, red looks darker | About 1% |
| Deuteranopia / deuteranomaly | Medium (green) | Red vs green (most common) | About 5% |
| Tritanopia / tritanomaly | Short (blue) | Blue vs green, yellow vs pink | Rare, under 0.01% |
| Achromatopsia | All / none | Sees only brightness (greyscale) | Very rare |
Standard 3x3 simulation matrix rows used by this tool (full severity)
| Type | R row | G row | B row |
|---|---|---|---|
| Protanopia | 0.567, 0.433, 0 | 0.558, 0.442, 0 | 0, 0.242, 0.758 |
| Deuteranopia | 0.625, 0.375, 0 | 0.700, 0.300, 0 | 0, 0.300, 0.700 |
| Tritanopia | 0.950, 0.050, 0 | 0, 0.433, 0.567 | 0, 0.475, 0.525 |
Common mistakes to avoid
- Relying on color alone to carry meaning. If a chart, form or status uses only red versus green to signal something, color blind users may miss it entirely. Add labels, icons, patterns or text so the meaning survives when the colors merge.
- Treating the simulation as a diagnosis. This is a design check, not a medical test. Real color vision deficiency varies by person and severity, so use the simulator to spot problems, not to diagnose anyone.
- Assuming red and green are the only risk. Red-green confusion (deuteranopia and protanopia) is most common, but tritanopia confuses blues with greens and yellows with pinks. Check your palette against all three types, not just one.
- Forgetting contrast still matters. Even with distinct hues, low brightness contrast hurts everyone, including color blind users who rely heavily on lightness differences. Pair this tool with a contrast checker.
Glossary
- CVD
- Color vision deficiency, the technical term for what is commonly called color blindness.
- Protanopia
- A dichromacy where the long-wavelength (red) cones are absent, causing red-green confusion and dimmer reds.
- Deuteranopia
- A dichromacy where the medium-wavelength (green) cones are absent. It is the most common form of red-green color blindness.
- Tritanopia
- A rare dichromacy where the short-wavelength (blue) cones are absent, causing blue-green and yellow-pink confusion.
- Dichromacy
- Color vision based on only two cone types instead of three, the full form of a single deficiency.
- Anomalous trichromacy
- A milder deficiency where all three cone types are present but one is shifted, modelled here by the severity slider.
Frequently asked questions
What is a color blindness simulator?
It is a tool that transforms an image or color to approximate how someone with color vision deficiency would perceive it. This one applies standard CVD transform matrices to each pixel for protanopia, deuteranopia and tritanopia, so you can check a design for accessibility.
What is the difference between protanopia and deuteranopia?
Both cause red-green confusion. Protanopia is the loss of red (long-wavelength) cones, which also makes reds look darker. Deuteranopia is the loss of green (medium-wavelength) cones and is the most common form. The hue shifts differ slightly, so this tool simulates each separately.
Is my image uploaded to a server?
No. The image is read with FileReader, drawn to a canvas, and processed pixel by pixel entirely in your browser using getImageData and putImageData. Nothing is sent anywhere, so it works offline and keeps your files private.
How accurate is the simulation?
It uses the widely cited standard CVD matrices, the same family behind most design-tool simulations. It is a solid approximation for design checks but not a medical diagnosis, since real deficiency varies by person, severity and display calibration.
What does the severity slider do?
Full severity (100%) models complete dichromacy, where a cone type is effectively absent. Lower values blend the simulation matrix with normal vision to approximate anomalous trichromacy, the milder and more common forms where a cone is present but shifted.
How common is color blindness?
Roughly 1 in 12 men (about 8%) and 1 in 200 women have some form of color vision deficiency, with red-green types by far the most common. That is why testing designs, charts and status colors against a simulator is worth the few seconds it takes.