How to use the Color Blindness Simulator
- Drop, paste or choose an image (a screenshot of your design works well).
- Pick a type of color vision deficiency, or show all of them at once.
- Drag the divider to compare with the original, and download the simulated image.
Color Blindness Simulator features
- Protan, deutan and tritan simulations, plus monochrome (achromatopsia)
- Severity slider from mild anomaly to full dichromacy
- Before/after divider to compare with the original
- All types side by side in one view
- Download the simulated image
- Scientific Machado (2009) model in linear RGB
- Runs on your device; your last image is kept in your browser
See your images through colorblind eyes
This color blindness simulator shows how an image looks to people with color vision deficiency. Drop in a photo, a screenshot of your website or app, a chart, a map or a presentation slide, then choose a type of color blindness. A draggable divider lets you compare the simulation with the original, and you can view all types side by side or download the simulated image to share with your team.
It is one of the quickest ways to find problems such as red and green status colors that look identical, chart lines that cannot be told apart or links that disappear into body text.
Types of color blindness you can simulate
| Type | Affected cones | What happens | How common |
|---|---|---|---|
| Deuteranopia / deuteranomaly | Green (M) | Reds, greens, browns and oranges are confused | The most common type, about 6% of men |
| Protanopia / protanomaly | Red (L) | Red and green are confused, and reds look darker | About 2% of men |
| Tritanopia / tritanomaly | Blue (S) | Blue and green, and yellow and pink, are confused | Rare, affects men and women equally |
| Achromatopsia (monochromacy) | All | Little or no color is seen, only lightness | Very rare |
The names ending in -opia describe a missing cone type, while the -anomaly forms describe a cone that is present but shifted, which causes milder confusion. Use the severity slider to move between them, from a slight anomaly to complete dichromacy.
How common is color blindness?
Around 1 in 12 men and 1 in 200 women have some form of color vision deficiency, which adds up to roughly 300 million people worldwide. Red-green types are inherited on the X chromosome, which is why they are much more common in men. In practice, almost every website, app and presentation has colorblind users.
How the simulation works
The simulator uses the model published by Machado, Oliveira and Fernandes in 2009, which predicts how each type and severity of color vision deficiency changes perceived colors. The calculation is done in linear RGB for every pixel of your image. It is the same model behind the vision deficiency emulation in Chrome's developer tools. Like any simulation, it is an approximation: everyone's color vision is slightly different, but it reliably shows which colors become hard to tell apart.
How to design for color blindness
- Never use color as the only signal. Pair colors with text, icons, patterns or position. An error message should say "Error", not just turn red.
- Rely on lightness contrast. Colors with different lightness stay distinguishable for everyone. Check text with the Contrast Checker.
- Choose safer pairs. Blue and orange, or blue and red, work far better than red and green. Purple and blue are also often confused.
- Label charts directly. Put labels on lines and bars instead of relying on a color legend, and vary line styles and marker shapes.
- Underline links. Links that differ from body text only by color can be invisible to some readers.
- Test early. Check your palette in the Color Palette Generator, which has the same simulations built in, before you design whole screens with it.
Private by design
Your image is processed on your own device and never uploaded, so unreleased designs and confidential documents stay private. The last image you used is kept in your browser so you can come back to it.
To make an image grayscale for print or style, use Image Filters. To check a single color's appearance across all types, use the Color Picker.
Color Blindness Simulator: frequently asked questions
What is the difference between protanopia and deuteranopia?
Both make red and green hard to distinguish. Protanopia is a missing red (L) cone and also makes reds look darker. Deuteranopia is a missing green (M) cone and is the most common type.
What does "anomaly" mean, for example deuteranomaly?
An anomaly is a milder form: the cone type is present but shifted, so colors are confused less strongly. Use the severity slider to see the range.
How can I make my design colorblind friendly?
Do not rely on color alone: add labels, icons or patterns, keep strong lightness contrast, and prefer blue/orange over red/green pairs. Check text with the Contrast Checker.
What is the most common type of color blindness?
Deuteranomaly, a reduced sensitivity to green light. Together with deuteranopia it affects about 6% of men.
What colors are hardest for colorblind people to tell apart?
Red and green are the most commonly confused, along with brown, orange and olive. Blue and purple, and pink and gray, can also be hard to separate.
How accurate is the simulation?
It uses a well-established scientific model and shows reliably which colors become hard to distinguish. Individual color vision varies, so treat it as a close approximation.