Color Blindness Simulator
Upload a photo, chart or design and see how it looks with each type of color vision deficiency. Compare with a split slider or side by side, adjust severity, and download the simulated image.
All types at a glance
How to use the Color Blindness Simulator
- Add an image: drop it on the box, paste it with Ctrl+V, or click Choose image. The sample palette is loaded so you can start right away.
- Pick a type of color vision deficiency from the list, or click any preview in the overview grid.
- Set the severity for anomalous types (protanomaly, deuteranomaly, tritanomaly and achromatomaly). 100% equals the full dichromat simulation.
- Compare: drag the divider in Split view, or switch to Side by side or Simulated only.
- Download the simulated PNG at the original resolution, or a side-by-side comparison image to share with your team.
Types of color vision deficiency
Normal color vision relies on three kinds of cone cells in the retina, sensitive to long (L, "red"), medium (M, "green") and short (S, "blue") wavelengths. Color blindness happens when one cone type is missing (dichromacy), shifted (anomalous trichromacy) or when cones barely work at all (monochromacy). Prevalence figures below are typical values for people of Northern European ancestry.
| Type | Affected cones | What changes | Approx. prevalence (men / women) |
|---|---|---|---|
| Protanopia | L (red) missing | Reds look dark; red, orange, yellow and green merge | 1% / 0.02% |
| Protanomaly | L (red) shifted | Reds look weaker and darker | 1% / 0.03% |
| Deuteranopia | M (green) missing | Red and green look like similar olive and beige tones | 1% / 0.01% |
| Deuteranomaly | M (green) shifted | Greens look more yellow-red; the most common type | 5% / 0.35% |
| Tritanopia | S (blue) missing | Blue and green are confused; yellow looks pink or gray | Very rare (about 1 in 10,000 or fewer) |
| Tritanomaly | S (blue) shifted | Blue looks greener, yellow less vivid | Very rare |
| Achromatopsia | Rod monochromacy | No color at all, only light and dark; often light sensitivity | About 1 in 30,000 |
How the simulation works
Each pixel is first converted from sRGB to linear RGB by undoing the display gamma: a channel value c (0 to 1) becomes c / 12.92 when c ≤ 0.04045, otherwise ((c + 0.055) / 1.055)2.4. Working in linear light matters because the eye responds to the amount of light, not to the encoded pixel number.
The linear color is then multiplied by a 3 × 3 matrix from Machado, Oliveira and Fernandes (2009), a physiologically based model that simulates how a shifted or missing cone changes the signals sent to the brain. For example, the deuteranopia matrix is:
| × R | × G | × B | |
|---|---|---|---|
| R′ | 0.367322 | 0.860646 | −0.227968 |
| G′ | 0.280085 | 0.672501 | 0.047413 |
| B′ | −0.011820 | 0.042940 | 0.968881 |
Every row adds up to 1, so white, black and neutral grays stay unchanged. For anomalous types the tool blends the matrix with the identity matrix at the chosen severity (0% = normal vision, 100% = dichromacy). Achromatopsia uses the Rec. 709 luminance weights 0.2126 R + 0.7152 G + 0.0722 B. Finally the result is clipped to the 0 to 1 range and gamma-encoded back to sRGB.
Worked example: pure red with deuteranopia
Take the pixel #FF0000. In linear RGB it is (1, 0, 0). Multiplying by the deuteranopia matrix gives R′ = 0.3673, G′ = 0.2801, B′ = −0.0118, which is clipped to 0. Gamma-encoding gives roughly (163, 144, 0), an olive-gold color. Pure green #00FF00 becomes (0.8606, 0.6725, 0.0429) in linear light, or about (239, 214, 58) in sRGB: a pale yellow. Both now sit in the same yellow-brown family, which is exactly why red and green warning lights or chart series are hard to tell apart.
Tips for color-blind-friendly design
- Never use color as the only signal. Add text labels, icons, patterns or line styles.
- Make sure colors that must be distinguished also differ clearly in lightness. Check it with the achromatopsia view: if two areas look the same gray, they need more contrast.
- Prefer blue and orange over red and green for "good versus bad" or two-series charts.
- Use direct labels on charts instead of legends that rely on matching color swatches.
- Test with deuteranopia and protanopia first, since red-green types cover the large majority of color-blind users.
Frequently asked questions
How accurate is this color blindness simulator?
It uses the physiologically based model by Machado, Oliveira and Fernandes (2009), applied to linear RGB values after removing sRGB gamma. This is one of the most widely used models in research and accessibility tools. Any simulation is an approximation: real color vision varies from person to person, and your own screen calibration also affects what you see.
What is the difference between protanopia and deuteranopia?
Both are red-green color blindness. In protanopia the long-wavelength (red) cones are missing, so reds look darker and shift toward brown or olive. In deuteranopia the medium-wavelength (green) cones are missing; reds keep their brightness but red, orange, yellow and green become hard to tell apart.
What does the severity slider do?
Anomalous trichromacy (protanomaly, deuteranomaly, tritanomaly) means one cone type is present but shifted, so the effect ranges from mild to strong. The slider blends between normal vision at 0% and the full dichromat simulation at 100%. Most people with deuteranomaly fall somewhere in the middle.
Which type of color blindness is most common?
Deuteranomaly (weak green) is the most common, affecting about 5% of men of Northern European ancestry. All red-green types together affect roughly 8% of men and 0.5% of women. Blue-yellow types (tritanopia and tritanomaly) and achromatopsia are rare.
Is my image uploaded to a server?
No. The image is decoded and processed with JavaScript in your browser. Nothing is sent anywhere, so it is safe for unreleased designs and private photos.
How can I make designs that work for color blind users?
Do not rely on color alone: add labels, icons, patterns or position. Use strong lightness contrast between colors that must be told apart, avoid red/green and blue/purple pairs in charts, and check your design with each simulation here, especially deuteranopia and protanopia.
Can I download the simulated image?
Yes. Download simulated PNG saves the processed image at the original resolution. Download comparison saves the original and the simulated version next to each other with labels.