Color Tools
Color Palette GeneratorImage Color ExtractorColor Contrast CheckerColor Blindness SimulatorColor Shade / Tint GeneratorColor MixerView all 9

Color Blindness Simulator

See how any image looks under all 4 major types of color vision deficiency, side by side.

Runs in your browserNo sign-up required

Click to choose an image, or drag one here

All 4 Types at Once, Not One at a Time

Checking a design against color blindness usually means switching between separate tools or filters one type at a time. This one renders your image through all four major types — protanopia, deuteranopia, tritanopia, and achromatopsia — side by side with the original, so you can immediately compare and spot where meaning conveyed only through color starts to break down.

How to Use This Tool

  1. 1Choose an imageA design mockup, a chart, a photo — anything where color distinguishes information.
  2. 2Compare all four simulations at onceProtanopia, deuteranopia, tritanopia, and achromatopsia, shown side by side with the original.
  3. 3Check whether meaning survivesLook specifically for information conveyed only through color — a red/green status indicator, a chart legend — and confirm it's still distinguishable.

The 4 Types, Explained

  1. 1Protanopia and deuteranopia — red-green color blindnessThe two most common forms, together affecting a meaningful share of men. Reds, greens, and browns can become difficult to tell apart, which is why red/green status indicators are a common accessibility failure.
  2. 2Tritanopia — blue-yellow color blindnessMuch rarer than red-green forms. Blues and yellows become harder to distinguish, and colors that rely on blue-versus-green contrast can look similar.
  3. 3Achromatopsia — complete color blindnessVery rare — the world is seen only in shades of gray. Any design that relies entirely on color with no other visual distinction (shape, pattern, label) fails completely under this condition.

Designing for Color Blindness

  • Never use color as the only way to convey information — pair it with an icon, label, or pattern too.
  • Test status indicators (success/warning/error) specifically — red and green are the most commonly confused pair.
  • Check chart legends and data visualizations, where color-only encoding is extremely common and easy to overlook.
  • A design that still makes sense in the achromatopsia (grayscale) simulation is a strong signal it doesn't rely on color alone.

Frequently Asked Questions

How accurate is this simulation?

It uses the simplified RGB-transformation matrices common to most web-based color blindness simulators, which gives a good practical sense of the effect. It's an approximation and won't perfectly match any specific individual's actual vision, which varies in severity even within the same type.

Which type of color blindness is most common?

Red-green color blindness (protanopia and deuteranopia together) is by far the most common, affecting a meaningful percentage of men in particular. Tritanopia (blue-yellow) is much rarer, and complete color blindness (achromatopsia) is rare.

What should I actually look for when checking my own design?

Focus on anywhere color alone conveys meaning — status badges, chart legends, form validation states, links that are only distinguished by color. If two elements become hard to tell apart in any simulation, that's worth fixing with an added shape, icon, or label.

Is my image uploaded anywhere?

No — all four simulations are rendered locally in your browser using the Canvas API. Nothing is uploaded or transmitted anywhere.

Does this replace testing with real users who have color blindness?

No — it's a fast first-pass check, not a substitute for real user feedback. Treat a design that fails here as something to fix, but don't treat passing here as a full accessibility guarantee.

Is this color blindness simulator free to use?

Yes, completely free, with no sign-up and no limit on how many images you check.