Color Blindness Simulator

Preview how a color looks under protanopia, deuteranopia, tritanopia, and achromatopsia — check your palette for color-vision accessibility.

Color Blindness Simulator shows how a single color would appear under four common color-vision conditions — protanopia, deuteranopia, tritanopia, and achromatopsia — using the same simplified simulation matrices as common browser vision-deficiency emulation tools. It's a quick screening step for catching colors that read as too similar under these conditions, not a clinical diagnostic tool.

  • Simulates protanopia, deuteranopia, tritanopia, and achromatopsia
  • Instant preview as you change the color
  • Uses the same simplified matrices as common browser vision-deficiency emulators
  • Deeplinkable via a ?color= URL parameter
  • Link into the Color Editor to check contrast alongside the simulation
  • Checking a data-visualization palette — Confirm that chart colors remain distinguishable under the most common forms of color blindness.
  • Reviewing a status-color system — Check whether a red/green success/error scheme still reads correctly under protanopia or deuteranopia.

How It Works

1

Enter a color

Type or pick the color you want to preview.

2

Compare the simulations

See the original color next to how it would appear under each of the four simulated conditions.

3

Adjust if needed

If two colors in your palette look too similar under a simulation, open them in the Color Editor to pick a more distinguishable pair.

Frequently Asked Questions

Is this a clinically accurate simulation?

No. It uses the same class of simplified transform matrices as widely used browser tools (like Chrome DevTools' "Emulate vision deficiencies"), which approximate how these conditions affect color perception but aren't a diagnostic or clinical-grade model.

What's the difference between the four conditions shown?

Protanopia and deuteranopia both affect red-green distinction (the two most common forms of color blindness); tritanopia affects blue-yellow distinction and is much rarer; achromatopsia is total color blindness, shown here as full desaturation.

Should I use this instead of a real accessibility review?

Use it as a quick screening step. For anything shipping to real users, pair it with WCAG contrast checks (this platform's Contrast Checker) and, where possible, feedback from people with color-vision deficiencies.