TOOLADEX
light
← Back to Blog

Color Blindness Simulator: See Your Designs the Way 300 Million People Do

By Tooladex Team •
Color BlindnessAccessibilityDesign ToolsWCAGColor VisionUI DesignWeb Design
Side-by-side comparison of a colorful UI and its color-blindness-simulated version

An estimated 300 million people worldwide have some form of color blindness — roughly 1 in 12 men and 1 in 200 women. That’s a bigger group than the population of most countries, and if your product leans on color to communicate status, direction, or meaning, a meaningful share of your users are seeing something different than you designed.

The Tooladex Color Blindness Simulator lets you upload any image — a screenshot, a chart, a mockup — and see it the way someone with protanopia, deuteranopia, tritanopia, or another color vision deficiency would see it. Everything runs locally in your browser; nothing is ever uploaded to a server.

What is color blindness?

Color vision starts with three types of cone cells in the retina, each tuned to a range of wavelengths roughly corresponding to red, green, and blue light. Your brain combines their signals to produce the full color spectrum you perceive.

Color blindness happens when one of those cone types is missing entirely (dichromacy) or shifted so it responds to the wrong wavelengths (anomalous trichromacy). The result isn’t usually seeing in black and white — it’s that certain colors that look obviously different to typical vision become hard, or impossible, to tell apart.

Most color blindness is inherited on the X chromosome, which is why it’s so much more common in men (who have only one X chromosome) than in women (who have two, and would need both copies affected).

Types of color blindness this tool simulates

  • Protanopia (red-blind) — no red cones at all. ~1% of men.
  • Protanomaly (red-weak) — red cones are shifted. ~1% of men.
  • Deuteranopia (green-blind) — no green cones at all. ~1% of men.
  • Deuteranomaly (green-weak) — green cones are shifted. ~5% of men — the most common form.
  • Tritanopia (blue-blind) — no blue cones at all. ~1 in 10,000 people.
  • Tritanomaly (blue-weak) — blue cones are shifted. Extremely rare.
  • Achromatopsia (monochromacy) — no functioning cones. ~1 in 30,000 people.
  • Achromatomaly (partial monochromacy) — severely reduced cones. Extremely rare.

Red-green deficiencies (protanopia, protanomaly, deuteranopia, and especially deuteranomaly) account for the overwhelming majority of color blindness cases. If you can only design and test for one thing, design and test for those.

How to use the simulator

  1. Upload an image — a screenshot, chart, logo, or UI mockup — or start with the built-in demo image, which is deliberately full of the classic accessibility traps (a red/green status pair, a traffic light, a rainbow gradient).
  2. Pick a vision type from the selector, or scan the comparison grid to see every type side by side.
  3. Compare original vs. simulated — the tool remaps every pixel’s red, green, and blue values using color-transformation matrices that approximate how that vision type perceives them.
  4. Test individual colors — pick any hex value and instantly see how it renders under each vision type, useful for spot-checking a palette before you commit to it.
  5. Download the result to drop into a design review, a client presentation, or an accessibility audit.

Color Blindness Simulator

See how images and colors appear to people with color blindness. Simulate protanopia, deuteranopia, tritanopia, and more directly in your browser — upload a photo or test any color.

Try Tool Now

Designing without relying on color alone

The single most common accessibility mistake in interface design is using color as the only signal for something important. A red border means “error.” A green dot means “online.” A red vs. green line on a chart means “down” vs. “up.” For someone with deuteranomaly, those pairs can look nearly identical.

A few practical fixes:

  • Pair color with a shape or icon. A checkmark and an “x” communicate success/error even if the colors read the same.
  • Use text labels, not just color-coded dots. “Active” / “Inactive” beats a green dot / gray dot.
  • Add patterns or textures to charts, not just different hues, for data series that need to stay distinguishable.
  • Test your palette against deuteranomaly first — since it’s by far the most common deficiency, fixing for it catches the largest share of real users.
  • Check lightness, not just hue. Two colors can have very different hues but nearly identical perceived brightness, which makes them collapse together under color blindness even more.

Safer color pairings for status and charts

  • Red / Green → Blue / Orange
  • Red / Green status dots → Icon + label (✓ Success / ✕ Error)
  • Red / Green line chart → Solid / dashed line styles, plus a legend
  • Green “good” / Red “bad” heatmap → Blue-to-orange diverging scale

Related tools