Color Blindness Simulator

What Is Color Blindness?

Color blindness (more accurately called color vision deficiency or CVD) is the reduced ability to see colors or distinguish between them. It affects roughly 1 in 12 men and 1 in 200 women worldwide — about 300 million people total. It's usually inherited and caused by differences in the cone cells of the retina, which detect color.

Types of Color Vision Deficiency

• Protanopia — Complete absence of red cones. Reds appear very dark, and reds/greens look similar. Affects about 1% of men.
• Protanomaly — Reduced red sensitivity (not total loss). Milder than protanopia, but still affects red/green distinction. About 1% of men.
• Deuteranopia — Complete absence of green cones. The most common severe form. Reds and greens blur together, and yellow looks pale. About 1% of men.
• Deuteranomaly — Reduced green sensitivity. The most common type overall — about 5% of men. Mild, but can still cause confusion with reds and greens.
• Tritanopia — Complete absence of blue cones. Blues look green, and yellows look pink or gray. Very rare (less than 1 in 10,000).
• Tritanomaly — Reduced blue sensitivity. Even rarer than tritanopia.
• Achromatopsia — Total color blindness. Only black, white, and shades of gray. Extremely rare (1 in 30,000). Often accompanied by light sensitivity.
• Achromatomaly — Partial color blindness. Colors are muted and washed out.

How This Simulator Works

This tool uses Brettel-Viénot-Mollon (BVM) matrices, the standard method for simulating color vision deficiency. Each type of CVD is modeled as a mathematical transformation applied to the RGB values of every pixel in the image. The severity slider blends between the original image (0%) and the full simulation (100%).

Why Simulate Color Blindness?

• Designers — check that charts, maps, and infographics are readable for color-blind users.
• Developers — verify that UI colors (buttons, error states, links) don't rely solely on color.
• Accessibility testing — meet WCAG 2.1 Success Criterion 1.4.1 (Use of Color).
• Educators — show students what color vision deficiency looks like in practice.
• Curiosity — see the world through different eyes.

How to Use This Tool

• Upload an image — drag and drop or click the upload zone.
• Choose a CVD type — pick from the 9 types of vision.
• Adjust severity — from 0% (no effect) to 100% (full simulation).
• Switch views — Split (original vs. simulated), Single (full-screen simulated), or Compare 4 (see the most common types side by side).
• Download the simulated image with the "Download" button.

Accessibility Tips

• Never rely on color alone — pair color with text, icons, or patterns.
• Check contrast ratios — use tools like the Contrast Checker to verify text readability.
• Avoid red/green pairings — the most common deficiency affects these. Use blue/orange instead.
• Use distinguishable shades — vary lightness, not just hue.
• Test with actual users — simulation is a starting point, not a substitute for real feedback.

Related Tools

• Contrast Checker — verify WCAG contrast ratios for text and UI.
• HEX to RGB Converter — convert color formats.
• Palette Generator — create accessible color palettes.
• Color Picker from Image — extract colors from photos.

Privacy Note

All image processing happens in your browser using the Canvas API. Your images are never uploaded to a server, never stored, and never shared.