Color Blindness Simulator

About this tool

The Color Blindness Simulator shows an uploaded image the way it might look to people with one of three color vision deficiencies. Choose a PNG, JPG or WebP image and pick a Vision type: Protanopia (red-blind), Deuteranopia (green-blind, the default), Tritanopia (blue-blind) or Normal vision. The tool draws the original and the simulated version side by side, scaled to at most 600 pixels wide, and re-renders as soon as you change the type. The simulation multiplies each pixel's red, green and blue values by a fixed 3×3 matrix, a simple and widely shared approximation applied directly to sRGB values. It is a quick visual check rather than a physiological model, so results differ from Chrome DevTools or Machado-style simulations, and partial (-anomaly) types and grayscale achromatopsia are not offered. Everything runs in your browser; the image is not uploaded. Use it to spot charts, status colors or maps that rely on hue alone.

Why use it

• Simulates the three dichromat types (protanopia, deuteranopia, tritanopia) on any image.

• Shows original and simulated images side by side for direct comparison.

• Helps check designs against WCAG guideline 1.4.1 (Use of Color).

• Instantly re-renders when you switch deficiency types.

• Runs in the browser, so confidential screenshots never leave your device.

How to use

1. Click Choose image (PNG/JPG/WebP) and pick a screenshot, chart or design export.
2. Select a Vision type: Protanopia, Deuteranopia, Tritanopia or Normal vision.
3. Compare the Original and simulated canvases side by side.
4. Switch between the three deficiency types to check each one; a CVD-friendly design should stay readable in all of them.

When it helps

• Verifying that charts and graphs convey information without relying solely on color (WCAG 1.4.1).
• Testing UI state indicators (error/success/warning states) are distinguishable by CVD users.
• Reviewing a brand palette for accessibility before finalizing it.
• Checking maps or data visualizations for color-independent readability.

Examples

Image of a solid #22c55e swatch, Vision type: Deuteranopia

Simulated swatch #5f537d

Image of a solid #ef4444 swatch, Vision type: Deuteranopia

Simulated swatch #afbc44

Image of a solid #f97316 swatch, Vision type: Deuteranopia

Simulated swatch #c7d132

Image of a solid #fbbf24 swatch, Vision type: Tritanopia

Simulated swatch #f8676e

Tips

• Test deuteranopia first — red-green deficiencies are the most common forms.
• Pair color with redundant cues: icons, labels, patterns, or position. WCAG 1.4.1 demands this regardless of CVD severity.
• Avoid red+green pairings for status (success/error). Use red+blue or red+gray instead, or add iconography.
• Convert a screenshot to grayscale in an image editor as an extra check; color pairs that stay distinct in grayscale survive most color vision deficiencies.
• Tritanopia (blue-yellow) is rare but should still be tested, especially for finance and medical UIs where blue is heavy.
• Use distinct lightness values between paired colors — luminance contrast survives all CVD simulations.

Frequently Asked Questions

Glossary

Color vision deficiency (CVD)

Umbrella term for any inherited or acquired condition that alters typical color perception. Affects roughly 8% of males and 0.5% of females.

Deuteranopia

A form of red-green color blindness — green-sensitive cones (M-cones) are absent. Reds, greens, and oranges look similar.

Protanopia

Red-green color blindness in which the long-wavelength (red) cones are absent. Reds appear darker than usual and shift toward gray.

Tritanopia

Rare blue-yellow color blindness — short-wavelength (blue) cones are absent. Affects roughly 0.01% of the population.

Achromatopsia

Total color blindness; the world is perceived in shades of gray. Very rare (1 in 33,000). Not simulated by this tool.

Anomaly vs anopia

An '-anomaly' suffix means reduced sensitivity (deuteranomaly, protanomaly, tritanomaly). An '-anopia' suffix means complete absence of one cone type — the more severe form.

WCAG 1.4.1 — Use of Color

Level A success criterion: 'Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.'

Simulation matrix

A 3×3 table of weights that mixes a pixel's red, green and blue values into new ones to imitate how a color vision deficiency merges colors. Accurate models apply it in linear light or cone space; this tool applies it to sRGB values directly.