Color Blindness Simulator

What is the Color Blindness Simulator?

The Color Blindness Simulator is a free accessibility tool that shows how an image or a single color appears to people with color vision deficiencies (CVD). Upload or drag an image, or pick a color, and it instantly renders side-by-side previews for protanopia, deuteranopia, tritanopia, and achromatopsia, plus the milder anomalous variants when you switch them on.

Around 1 in 12 men and 1 in 200 women have some form of color blindness, so a design that relies on color alone can quietly exclude millions of users. Every simulation here runs on your own device using the Canvas API, so your images are never uploaded, saved, or sent anywhere.

How to use the color blindness simulator

1. Choose Image mode and drag a file onto the drop zone, click to browse, or paste a screenshot from your clipboard.
2. Alternatively, switch to Single color mode and enter any hex value or use the color picker.
3. Read the side-by-side simulations for each deficiency type next to the original.
4. Tick Show anomalous variants to add protanomaly, deuteranomaly, and tritanomaly for a fuller picture.
5. In color mode, click any resulting hex code to copy the simulated value.

How color blindness simulation works

Each simulation applies an established 3x3 color-matrix transform to every pixel. The tool reads the source pixels with getImageData, multiplies each pixel's red, green, and blue channels by the matrix for that deficiency, then writes the result back with putImageData. Protanopia and deuteranopia matrices collapse the red–green axis; the tritanopia matrix collapses the blue–yellow axis; and achromatopsia uses luminance weights (roughly 0.299 R, 0.587 G, 0.114 B) to convert everything to gray. The anomalous variants use gentler versions of the same matrices to approximate partial cone sensitivity rather than a full absence.

What are the types of color vision deficiency?

• Protanopia / protanomaly: missing or weak long-wavelength (red) cones. Reds look darker and can blur into black, brown, or green.
• Deuteranopia / deuteranomaly: missing or weak medium-wavelength (green) cones. This is the most common red–green deficiency.
• Tritanopia / tritanomaly: missing or weak short-wavelength (blue) cones. Blues and yellows become hard to separate; this type is rare.
• Achromatopsia: total color blindness, where only brightness differences remain and the world is seen in grayscale.

Why designing for color blindness matters

Color is a fast, intuitive channel, but it should never be the only channel. WCAG 1.4.1 (Use of Color) requires that information conveyed by color is also available another way — through text labels, patterns, icons, or shape. A red "error" and green "success" state look nearly identical to someone with deuteranopia, so pairing them with words or icons keeps them distinguishable. Because contrast underpins legibility for everyone, it is worth confirming your text still passes with the Color Contrast Checker after you commit to a palette.

Simulating early saves rework. Run charts, maps, status badges, and marketing images through the simulator before launch, and favor color pairs that stay distinct across all four types — blue and orange, for example, survive most deficiencies far better than red and green.

When to use this instead of a color tool

This simulator is for auditing how colors are perceived, not for choosing them. When you are still building a scheme, grab exact values with the HTML Color Picker or generate a full set with the Color Palette Generator, then bring the results here to confirm they remain readable. To sample colors straight out of an existing screenshot or photo, the Image Color Picker is the quickest path, and if you want to preview a permanent grayscale or hue-shift effect in CSS you can prototype it with the CSS Filter Generator.

Frequently Asked Questions

Are my images uploaded to a server?

No. The simulator processes everything locally in your browser with the Canvas API. Your images and colors never leave your device, so you can safely test unreleased designs and private screenshots.

How accurate are these simulations?

They use established color-matrix transforms that closely approximate how each deficiency shifts color perception. They are an excellent design and QA aid, but they are an approximation, not a medical diagnosis, and real perception varies from person to person.

What is the difference between protanopia and protanomaly?

Protanopia means the red (L) cones are absent, so red perception is essentially lost. Protanomaly means those cones are present but shifted or weakened, giving a milder version of the same red–green confusion. The same dichromacy-versus-anomaly relationship applies to the green and blue types.

Which color combinations are safest for color blind users?

Blue paired with orange or yellow stays distinct across nearly all types, while red-versus-green is the riskiest pairing. Best practice is to also encode meaning with text, icons, or patterns so nothing depends on color alone.

Can I simulate a single color instead of an image?

Yes. Switch to Single color mode, enter a hex value or use the picker, and the tool shows the simulated hex for each deficiency type. Click any result to copy it.

Does the simulator support the anomalous (-omaly) variants?

Yes. Tick "Show anomalous variants" to add protanomaly, deuteranomaly, and tritanomaly next to the full dichromatic types, which is useful because milder deficiencies are far more common than complete ones.