Color Blindness Simulator
Free tool that simulates how a color appears to people with protanopia, deuteranopia, or tritanopia (color vision deficiency).
The three types of color vision deficiency
| Type | Name | Characteristics |
|---|---|---|
| Protanopia | Red-blind (L-cone deficiency) | The red-sensing cones function differently, making red and green harder to distinguish. |
| Deuteranopia | Green-blind (M-cone deficiency) | The green-sensing cones function differently, making red and green harder to distinguish. The most common type of color vision deficiency. |
| Tritanopia | Blue-blind (S-cone deficiency) | The blue-sensing cones function differently, making blue and yellow harder to distinguish. Very rare. |
What Is a Color Blindness Simulator
This free tool simulates how a single color you choose would appear to someone with color vision deficiency (commonly called color blindness or color weakness), across the three main types: protanopia, deuteranopia, and tritanopia. Just pick a color with the color picker or type in a hex code, and you can immediately compare how that same color looks under all three types of color vision.
When you are choosing colors for a website, app, presentation, or map, it helps to know in advance which combinations — red and green being the classic example — are hard for people with color vision deficiency to tell apart. That said, keep in mind that the conversion used here is a simplified approximation based on research by Brettel and Viénot. Because actual perception varies between individuals, this tool cannot medically guarantee an exact representation of what any one person sees.
How to Use the Color Blindness Simulator
- Enter the color you want to check Click the color picker to choose a swatch visually, or type a hex color code directly (for example, #ff0000) if you already know the exact value.
- Review the three simulated views The protanopia, deuteranopia, and tritanopia versions of your color are generated automatically and shown side by side, along with the original for comparison.
- Try different colors to compare Enter another color and see how distinguishability changes depending on which colors you pair together, especially combinations like red and green.
- Use the results to refine your palette If a pairing turns out to be hard to distinguish, consider adjusting the brightness contrast, changing the hue, or adding icons and text labels alongside color.
Tips for getting more out of it
- Pick a color with the color picker or type a hex code to instantly see how it looks under protanopia, deuteranopia, and tritanopia.
- Use this tool before publishing a design to check whether your color palette remains distinguishable for people with color vision deficiency.
- Red and green combinations are especially hard to tell apart, so it's worth checking charts and maps that rely on this pairing.
- The simulation is a simplified approximation, so for critical accessibility decisions you should also use dedicated tools and real user testing.
Common Use Cases
Checking web design color palettes
Before launching a site, use it to confirm that buttons, charts, and error states don't rely on color alone to convey meaning.
Reviewing slide decks and chart colors
Pie charts and bar graphs often lean on red-and-green color coding — check in advance how that combination reads for viewers with color vision deficiency.
Designing maps and transit diagrams
Maps that distinguish routes or zones by color alone can lose information for some viewers, so this helps you decide whether extra patterns or labels are needed.
Accessibility education and training
It also works well as a hands-on teaching aid, letting people experience firsthand what color vision deficiency looks like using real colors.
Glossary
- Color vision deficiency
- A general term for visual traits that make certain color combinations difficult to distinguish. It arises from differences in the sensitivity of cone cells in the retina and is usually present from birth.
- Protanopia
- A type in which the red-sensing cones function differently from typical. It makes red and green harder to tell apart.
- Deuteranopia
- A type in which the green-sensing cones function differently from typical. It is considered the most common form of color vision deficiency.
- Tritanopia
- A type in which the blue-sensing cones function differently from typical. It makes blue and yellow harder to tell apart, though it is very rare.
- Cone cells
- Light-sensing cells in the retina. There are three kinds, each most sensitive to red, green, or blue light, and color perception comes from combining the signals of all three.
- Brettel–Viénot model
- A widely used mathematical model for approximating how colors appear under color vision deficiency, based on published vision-science research. This tool's simulation is built on that model.
Frequently Asked Questions
Side Note — The history of color vision testing and the Ishihara test
Color vision deficiency affects an estimated 1 in 20 men and 1 in 500 women of Japanese descent, and reports suggest roughly 8% of men worldwide are affected. It is far from rare — statistically, there is likely at least one person with this trait in any given classroom or workplace.
The best-known color vision test, the Ishihara Color Test, was devised in 1917 by Japanese ophthalmologist Shinobu Ishihara. Its distinctive plates, which hide numbers or shapes among clusters of colored dots, were originally developed for color vision screening during military conscription exams, and the same design is still used in eye clinics around the world more than a century later.
In web and app design, relying too heavily on color — such as a chart that shows pass or fail only in red and green, or a map that distinguishes routes by color alone — can leave out information for a meaningful share of users. Checking color combinations with a simulation beforehand and pairing them with icons, patterns, or text labels is a basic practice of inclusive design that benefits everyone.