What the color blindness simulator shows
Most people see color with three kinds of cone cells in the eye, sensitive to long (red), medium (green) and short (blue) wavelengths of light. When one kind is missing or works differently, some colors become hard to tell apart. This simulator recolors your image to show how it may look with each of the common types of color vision deficiency, so you can check a chart, a map, a game, a website screenshot or a product photo before others see it.
The grid shows the original next to all seven simulations at once. One type, compare puts a single simulation over the original with a slider, and every result downloads as a PNG at the full size of your image.
The types of color vision deficiency
| Type | Cones | What changes |
|---|---|---|
| Protanopia | Red cones missing | Red and green cannot be told apart, red looks darker |
| Protanomaly | Red cones shifted | Some reds look more green and less bright; mild |
| Deuteranopia | Green cones missing | Red and green cannot be told apart |
| Deuteranomaly | Green cones shifted | Some greens look more red; mild, the most common red-green type |
| Tritanopia | Blue cones missing | Blue and green, purple and red, yellow and pink look alike |
| Tritanomaly | Blue cones shifted | Blue and green, yellow and red are hard to tell apart |
| Achromatopsia | No color vision | No color at all, only light and dark |
The descriptions follow the National Eye Institute, which also notes that blue-yellow types are less common and complete color blindness is rare. The paper behind this simulator lists the incidence of red-green color vision deficiency at 7.9 percent of Caucasian men and 0.42 percent of Caucasian women, 4.2 and 0.58 percent among Asians, and 2.6 and 0.54 percent among Africans, citing earlier studies by Rigden (1999) and Sharpe and colleagues (1999). It puts tritanopia at about 0.003 percent of the Caucasian population.
How the simulation works
The tool uses the model of Gustavo Machado, Manuel Oliveira and Leandro Fernandes, published in IEEE Transactions on Visualization and Computer Graphics in 2009. It describes how the cone responses change for each deficiency and turns that into one 3 × 3 matrix per type and severity, which is multiplied with the red, green and blue value of every pixel. The authors publish these matrices for severities from 0 to 1 in steps of 0.1, and this tool uses them as published. Between two steps, for example at 55 percent, it blends the two nearest matrices.
The matrices are derived from the light of the screen's red, green and blue primaries, so the tool applies them to light intensities rather than to the gamma-encoded numbers stored in the file. Each 8-bit value is first decoded with the sRGB transfer function, then multiplied by the matrix, clipped to the range 0 to 1 and encoded again. Because every row of each matrix adds up to 1, white stays white and every gray stays the same gray.
The paper models anomalous trichromacy as a shift of the sensitivity of one cone type; at full severity protanomaly and deuteranomaly look like protanopia and deuteranopia. The authors do not model tritanopia or achromatopsia. This tool shows tritanopia as tritanomaly at full severity, and achromatopsia as the brightness of each pixel, the relative luminance Y = 0.2126 R + 0.7152 G + 0.0722 B from ITU-R BT.709 applied to the linear values. Both are approximations.
A worked example
Take a red of 220, 50, 47 (#dc322f) and a green of 60, 170, 70 (#3caa46), a common pair for "bad" and "good" in charts. The table shows what this tool turns them into, computed with the same code:
| Simulation | Red becomes | Green becomes |
|---|---|---|
| Protanopia | 103, 93, 44 | 173, 155, 60 |
| Deuteranopia | 145, 130, 39 | 159, 146, 78 |
| Tritanopia | 242, 0, 52 | 33, 166, 148 |
With protanopia and deuteranopia both colors turn into olive and khaki tones of almost the same hue. With deuteranopia they come out nearly identical; with protanopia the red turns much darker, so only the brightness still separates a red bar from a green one. With tritanopia the red stays red and the green turns teal, so the pair remains easy to tell apart.
Design tips for color blind readers
- Do not use color alone. WCAG success criterion 1.4.1, Use of Color, asks that color is not the only visual means of conveying information. Add labels, icons, patterns or line styles to charts, and underline links.
- Vary brightness, not only hue. A dark red next to a light green stays readable in every simulation, while a red and a green of the same brightness merge.
- Prefer blue and orange to red and green for pairs like good and bad, and check the result here.
- Check contrast. Text needs enough contrast against its background for everyone; the color contrast checker computes the WCAG ratio. For a whole set of colors, try the color palette generator and run the result through this simulator.
Limits
A simulation shows an estimate on your screen, not what a particular person sees. Monitors, color profiles and brightness settings change the result, and two people with the same type can see differently. Achromatopsia can also affect sharpness of vision and light sensitivity, which a recolored image does not show. The preview is drawn smaller to stay quick; downloads keep the full width and height, except for very large images that the browser cannot draw at full size, in particular on iPhone and iPad, where the tool scales them down and tells you.
How to use the color blindness simulator
- 1Drop an image on the box, choose one, paste one, or try the sample chart.
- 2Look at all seven simulations in the grid. Move the severity slider to see milder or stronger -anomaly types.
- 3Switch to One type, compare and drag across the picture to compare it with the original.
- 4Download any result as a PNG, or copy a link with your settings.
Sources
- Machado, Oliveira and Fernandes, A Physiologically-based Model for Simulation of Color Vision Deficiency, IEEE TVCG 15(6), 2009: the precomputed matrices for protanomaly, deuteranomaly and tritanomaly at severities 0 to 1, the paper with Table 1 (incidence of red-green CVD), the 0.003 percent for tritanopia and the note that tritanopia and monochromacy are not modeled
- National Eye Institute: Types of color vision deficiency: what each type changes, deuteranomaly as the most common red-green type, complete color blindness as rare
- W3C CSS Color Module Level 4: the sRGB transfer function in section 19, sample code for color conversions
- Recommendation ITU-R BT.709-6: luminance weights 0.2126, 0.7152 and 0.0722
- W3C: Understanding WCAG 2.2 success criterion 1.4.1, Use of Color
Related guides
- Designing for Color Blindness: Palettes That Still Work
- sRGB vs Display P3: Color Spaces, Gamut and CSS color()
- WCAG Basics: Accessibility Levels, Principles and Checks
Frequently asked questions
Is my image uploaded?
No. Your browser opens the image, simulates each type of color vision deficiency and saves the results on your own device. Nothing is sent to a server.
How accurate is the simulation?
It is an approximation. It uses the model of Machado, Oliveira and Fernandes from 2009, which is based on how the cone cells respond to light, and applies it on a typical screen. Your monitor, its settings and the way each person sees all differ, so no simulation shows exactly what one person sees. Use it to find colors that are hard to tell apart, not as a diagnosis.
What is the difference between protanopia and protanomaly?
Protanopia means the red-sensitive cones are missing, so red and green are hard to tell apart and red looks darker. Protanomaly means those cones work but respond more like the green ones. It is milder, and the severity slider sets how strong it is. At 100 percent an -anomaly simulation looks like the matching -opia one. The same pattern holds for deuteranopia and deuteranomaly (green cones) and tritanopia and tritanomaly (blue cones).
Which type of color blindness is most common?
According to the National Eye Institute, deuteranomaly is the most common type of red-green color vision deficiency. Blue-yellow types are less common and complete color blindness is rare. Red-green types are far more common in men than in women.
Can this tool test whether I am color blind?
No. It shows how an image may look to other people. A color vision test is done by an eye doctor, for example with plates of colored dots or other tests.
Why does my image look the same in some views?
Black, white and grays do not change, because each type only affects how colors are told apart. An image that is mostly gray or uses only colors with different brightness will look almost the same. That is a good sign: the information does not depend on color alone.