👁️ Color Blindness Simulator: Protanopia, Deuteranopia, Tritanopia
By Shihab Mia · Updated 2026-07-01
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.
A color blindness simulator transforms an image or a single color to approximate how it looks to someone with color vision deficiency (CVD). Upload a picture or pick a color, choose protanopia, deuteranopia, tritanopia or full achromatopsia, and this tool renders the simulated result next to the original in real time. Everything runs locally in your browser with canvas pixel math, so your images are never uploaded. It is the fastest way to check whether a chart, palette, map or UI still works for the roughly 1 in 12 men (about 8%) and 1 in 200 women who see color differently.
What is the Color Blindness Simulator?
Normal human color vision is trichromatic: three types of cone cell in the retina respond to long (L, red), medium (M, green) and short (S, blue) wavelengths, and the brain reconstructs color from the ratio of their signals. Color vision deficiency happens when one cone type is missing or its sensitivity is shifted. When a cone type is effectively absent you have a dichromacy: protanopia (no working L/red cones), deuteranopia (no M/green cones) or tritanopia (no S/blue cones). When a cone is present but shifted you have the milder, far more common anomalous trichromacy: protanomaly, deuteranomaly and tritanomaly. The severity slider in this tool blends between normal vision and full dichromacy, so it can approximate both the anomalous and complete forms.
The simulator works one pixel at a time. Your image is drawn to an off-screen canvas, the raw RGBA values are read with getImageData, and each pixel's red, green and blue values are multiplied through a 3x3 transform matrix that collapses the color information a given cone type would normally carry. The transformed values are clamped to the 0 to 255 range and written back with putImageData. The matrices used here belong to the widely cited standard CVD family (Brettel, Vienot and Machado style) that also powers most browser dev tools, design plugins and operating-system accessibility filters, so the output is consistent with what your colleagues will see in Figma, Chrome or macOS.
Red-green deficiencies dominate the numbers. Deuteranomaly alone affects around 5% of men, and red-green types together account for roughly 99% of all inherited CVD. That skew exists because the genes for the L and M cones sit on the X chromosome: men have a single X, so one faulty copy is enough, while women need two, which is why red-green CVD is about sixteen times more common in men. Tritan (blue-yellow) deficiency is different. It is coded on chromosome 7, not the X, so it is rare (well under 1%) and affects men and women about equally.
A key distinction is simulation versus correction. This tool simulates: it shows a normally sighted designer what a color blind viewer loses. That is the opposite of daltonization, which remaps colors to push confusable pairs apart so a color blind viewer can distinguish them better. Simulation is a diagnostic step for your design; daltonization is a remedy applied to the final artwork. Use this tool to find the problem, then fix it in your source palette rather than relying on a viewer's filter.
Treat every result as an approximation, not a medical diagnosis. Real CVD varies between individuals, monitor calibration and ambient light shift the outcome, and the standard matrices operate on gamma-encoded sRGB rather than a fully linearized color space, which slightly overstates or understates some hues. The practical test is simple: if two colors that must stay distinct (a red error state versus a green success state, or two adjacent lines on a chart) merge into nearly the same shade under deuteranopia or protanopia, that is a genuine accessibility failure worth fixing, whatever the exact pixel numbers say.
Because this is a design and awareness tool rather than a screening device, it never claims to test a person's vision. To check your own color vision, use a validated plate test (such as Ishihara) administered by an eye care professional. What this simulator gives you instead is empathy and evidence: a concrete, side-by-side picture you can show a client or teammate to explain why color alone should never be the only way your interface communicates meaning.
When to use it
- Checking whether a chart, heat map, dashboard or infographic stays readable for color blind users before you ship it.
- Testing a brand palette or UI theme so red and green states do not collapse into the same shade.
- Auditing status designs (success, warning, error) that rely on color alone to convey meaning, against WCAG 1.4.1 use of color.
- Demonstrating to a client, PM or team why non-color cues (icons, labels, patterns) matter for accessibility.
- Previewing a single accent or label color across all three deficiency types before locking it into a design system.
- Comparing data-visualization palettes (like categorical vs colorblind-safe schemes) to pick the safest option.
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 or paste a hex color.
- Select the deficiency to simulate: protanopia, deuteranopia, tritanopia or total achromatopsia.
- In image mode, drag the severity slider to model a milder anomalous form, or leave it at 100% for full dichromacy.
- Click Simulate to render the original and simulated versions side by side.
- Compare the two: look for colors that merge, 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.
A red versus green pair tested at 50% severity (anomalous form) to see if they stay distinct.
- Blend the deuteranopia matrix with the identity: Mused = 0.5 x M + 0.5 x I
- Red (255, 0, 0) -> roughly (207, 89, 0), a warm orange
- Green (0, 255, 0) -> roughly (48, 178, 66), a desaturated green
- The two now differ mainly in lightness, not hue
Result: At 50% the pair is still weakly separable by brightness, but at 100% they nearly merge, so this pairing fails for full deuteranopia and needs an icon or label.
Types of color vision deficiency and what they affect
| Type | Cone affected | Confused colors | Rough prevalence (men) |
|---|---|---|---|
| Protanopia / protanomaly | Long (L, red) | Red vs green; reds look darker | About 1% to 1.3% |
| Deuteranopia / deuteranomaly | Medium (M, green) | Red vs green (most common) | About 5% to 6% |
| Tritanopia / tritanomaly | Short (S, blue) | Blue vs green, yellow vs pink | Rare, under 0.01% |
| Achromatopsia | All / none | Sees only brightness (greyscale) | Very rare, about 1 in 30,000 |
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 |
Prevalence and inheritance at a glance
| Group | Men affected | Women affected | Why |
|---|---|---|---|
| Red-green (protan + deutan) | About 8% | About 0.5% | L and M cone genes sit on the X chromosome |
| Blue-yellow (tritan) | Under 0.01% | Under 0.01% | Coded on chromosome 7, so sexes affected equally |
| All inherited CVD | About 1 in 12 | About 1 in 200 | Red-green types make up roughly 99% of cases |
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. This is exactly what WCAG 1.4.1 (Use of Color) requires.
- 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. For a real diagnosis, use a validated plate test with an eye care professional.
- 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 that brightness contrast still matters. Even with distinct hues, low brightness contrast hurts everyone, including color blind users who lean heavily on lightness differences to tell colors apart. Pair this tool with a contrast checker and keep an adequate luminance gap.
- Testing only at 100% severity. Full dichromacy is the worst case, but anomalous trichromacy (a mild shift) is far more common. Slide severity down to around 40% to 60% to see the typical everyday experience, then confirm the design also survives the full-dichromacy extreme.
- Confusing simulation with correction (daltonization). Simulating shows what a color blind viewer loses; it does not fix anything. Do not ship the simulated image expecting it to help color blind users. Use the simulation to find weak pairs, then adjust your real palette.
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 complete 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.
- Achromatopsia
- Total color blindness, in which little or no cone function remains and the world is seen essentially in shades of grey.
- Daltonization
- A correction technique that remaps colors to make confusable pairs easier to tell apart, the opposite of simulation.
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 in seconds.
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 noticeably darker. Deuteranopia is the loss of green (medium-wavelength) cones and is the single 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 and browser simulations. It is a solid approximation for design checks but not a medical diagnosis, since real deficiency varies by person, severity, monitor calibration and lighting.
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 far 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 (about 0.5%) 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.
Why does color blindness affect men more than women?
The genes for the red and green cones sit on the X chromosome. Men have one X, so a single faulty copy causes red-green CVD, while women have two X chromosomes and usually need both copies affected. That is why red-green deficiency is about sixteen times more common in men.
Which type of color blindness is the rarest?
Blue-yellow deficiency (tritanopia and tritanomaly) is the rarest common inherited type, affecting well under 1% of people. Complete color blindness (achromatopsia), where someone sees only shades of grey, is rarer still, at roughly 1 in 30,000.
Can this tool test whether I am color blind?
No. It shows normally sighted designers what color blind viewers lose; it is not a screening test. To check your own color vision, take a validated plate test such as Ishihara with an eye care professional, who can also confirm the type and severity.
What colors should I avoid for color blind accessibility?
Avoid relying on red versus green alone, and be careful with green versus brown, blue versus purple, and light green versus yellow. Instead of removing colors, add a second cue (icon, label, pattern or shape) and keep a strong brightness contrast so meaning never depends on hue alone.
Sources
- Types of Color Vision Deficiency , National Eye Institute (NIH)
- Color Blindness: What It Is, Types and Causes , Cleveland Clinic