Color Blindness Simulator

How to Use the Color Blindness Simulator

1. 1. Load a picture. Use Choose file for a PNG, JPEG, GIF, WebP or SVG, or try the built-in sample, which contains a hue sweep, the eight Okabe–Ito colors and a red–yellow–green palette. Large images are scaled down to 900 pixels on the long side.
2. 2. Choose the views. Protanopia, deuteranopia, tritanopia and achromatopsia are on by default. Turn off the ones you do not need.
3. 3. Set the severity. At 100% the tool simulates dichromacy (a cone type is missing). Lower values simulate anomalous trichromacy, where that cone type is only weakened.
4. 4. Compare and save. Each panel sits beside the original. Download one panel as a PNG, or download everything as a single labelled sheet to paste into a report or share with a co-author.

What Each View Shows

• Protanopia and protanomaly — no or weak long-wavelength (L, “red”) cones. Reds look dark and shift toward brown or olive; red and green are confused.
• Deuteranopia and deuteranomaly — no or weak medium-wavelength (M, “green”) cones. Red and green are confused, but reds do not darken as much as in protanopia. Deuteranomaly is the most common form.
• Tritanopia and tritanomaly — no or weak short-wavelength (S, “blue”) cones. Blue and green blur together, and yellow and pink are confused. It is rare.
• Achromatopsia — no usable cone function, so the world is shades of grey. The tool draws this as relative luminance, which is not part of the Machado model (see below).

About 1 in 12 men have some color vision deficiency, according to the US National Eye Institute, and far fewer women do — so in a lecture hall or a reviewer pool, someone is likely to be affected. Red–green deficiency is by far the most common type.

How the Simulation Works

The tool uses the matrices published with Machado, G. M., Oliveira, M. M., & Fernandes, L. A. F. (2009), “A physiologically-based model for simulation of color vision deficiency,” IEEE Transactions on Visualization and Computer Graphics, 15(6), 1291–1298. The authors give one 3 × 3 matrix for each type and each severity from 0.0 to 1.0 in steps of 0.1; the slider moves along that table and interpolates between rows for values in between.

1. Each pixel’s sRGB value is converted to linear light (the inverse gamma curve).
2. The linear RGB vector is multiplied by the matrix for the chosen type and severity.
3. The result is clamped to 0–1 and gamma-encoded again.
4. Alpha is left untouched. Greys and white pass through unchanged, because every row of every matrix sums to 1.

What the Simulation Cannot Tell You

• It is a model, not a person. Real vision varies within each type, and the model covers only the cone response, not brain adaptation or context.
• Achromatopsia is an approximation. The Machado model has no matrix for it. Here it is the WCAG relative luminance Y = 0.2126 R + 0.7152 G + 0.0722 B shown as grey. The condition usually also brings low visual acuity and light sensitivity, which are not simulated.
• Your screen matters. Canvas pixels are read as sRGB. A wide-gamut display or a night-mode filter changes what you see; the simulated file itself is accurate to the model.
• Most people with CVD still see color. Dichromacy is the extreme end of each spectrum. Many people have mild deficiencies, which the severity slider approximates.

Designing Figures That Survive

• Do not rely on hue alone. Add direct labels, markers, line styles or patterns so every category has a second cue.
• Vary lightness. If two colors look the same in the achromatopsia view, they are also hard to separate when printed in black and white.
• Avoid red against green — and blue against purple, or green against brown — as the only difference between two series.
• Start from a safe palette. The Okabe–Ito palette used by the chart makers on this site was designed for this. For heatmaps, viridis, cividis and ColorBrewer’s sequential schemes hold up well; the Heatmap Maker offers them.
• Check contrast too. A pair that passes in color can still fail WCAG 3:1 for graphics — use the Color Contrast Checker.

Frequently Asked Questions

Is my image uploaded to a server?

No. The file is opened by your browser, drawn to a canvas on this page and processed there. Nothing is sent over the network, and nothing is stored once you close or reload the page.

What is the difference between protanopia and deuteranopia?

Protanopia is the absence of long-wavelength (red) cones; deuteranopia is the absence of medium-wavelength (green) cones. Both make red and green hard to separate, but in protanopia reds also look much darker. The two can look alike in many figures, which is why palettes that fix one usually fix the other.

Which type of color blindness is the most common?

Red–green deficiency, mostly deuteranomaly (weak green cones), accounts for the vast majority of cases. Tritan deficiencies and complete achromatopsia are rare.

What does the severity slider do?

At 100% the tool simulates dichromacy, where one cone type is missing. At lower values it uses the Machado matrices for anomalous trichromacy (protanomaly, deuteranomaly, tritanomaly), where the cone responds but is shifted. At 0% the image is unchanged. Achromatopsia ignores the slider.

How do I make a chart colorblind-friendly?

Use a palette designed for it, such as Okabe–Ito for categories or viridis for continuous data, and add a second cue to color: labels, markers, line styles or patterns. Then check the result here: if every series and category is still distinguishable in all four views, the chart is robust.

Is this the same as how a colorblind person sees?

It is a good approximation for design checks, not a replica. People with the same diagnosis differ, and the model works on cone responses alone. Treat it as a way to find problems early; if a figure matters, ask someone who has the condition.