Color Blindness Simulator for Images

Upload an image and instantly see how it looks with different types of color vision deficiency. Everything runs locally in your browser — nothing is uploaded.

vision types

In-browser

nothing uploaded

Free

no sign-up

Research

based color models

No image yet

Upload an image or paste a URL from the panel to compare it side by side with a color-blind simulation.

How the image simulator works

When you load an image, your browser reads it one pixel at a time on an HTML canvas. Each pixel's red, green, and blue values are converted from the gamma-encoded sRGB your screen uses into linear light, passed through a matrix that models how a particular type of color blindness changes the signal coming from the eye's three cone types, and then converted back to sRGB so it shows up correctly. The result is a close approximation of what that photo, screenshot, or graphic looks like to someone with color vision deficiency (CVD).

Looking at the original and the simulation side by side is the quickest way to catch a problem. If a green “success” badge and a red “error” badge collapse into the same muddy tone in the deuteranopia view, you know right away that the design leans on color alone and needs a label, icon, or shape to back it up.

Everything runs locally in JavaScript on your device. Your images are never uploaded to a server, stored, or shared, so you can safely test unreleased screens, client work, or private photos.

The nine vision types you can preview

Color blindness is not one condition. It ranges from mild shifts in a single cone type to the complete absence of color vision. This tool covers the full range so you can test the cases that matter most for your audience.

Red-green types (the most common by far)

Deuteranomaly — the single most common form, affecting roughly 5% of men. The green-sensitive (M) cones are shifted, which weakens red-green separation without removing it.
Deuteranopia — the M cones don't function, so reds and greens run together.
Protanomaly — reduced sensitivity to red light; reds look darker and can fade toward gray.
Protanopia — no working long-wavelength (L) cones; red and green are hard to tell apart and reds appear dim.

Blue-yellow types (rare, and affect men and women about equally)

Tritanomaly — reduced blue sensitivity, so blues and yellows are harder to separate.
Tritanopia — no working short-wavelength (S) cones; blue and yellow are confused.

Little or no color vision (very rare)

Achromatopsia — essentially no color vision; the world appears in shades of gray. It affects roughly 1 in 30,000 people.
Blue cone monochromacy — only the S cones work, leaving very limited color and often reduced sharpness.
Rod monochromacy — a grayscale preview, the same practical result as achromatopsia.

What people use it for

About 300 million people worldwide have some form of color blindness — around 1 in 12 men and 1 in 200 women. That is a large enough slice of any audience that a color-only design choice can quietly lock people out. Common reasons teams reach for this tool:

Checking charts, graphs, heat maps, and dashboards, where categorical colors are the classic failure point.
Reviewing status colors and form states — the green/red pairing is the most common accessibility mistake on the web.
Vetting marketing images, infographics, and social graphics before they ship.
Testing maps and wayfinding, where colored routes or regions carry meaning.
Teaching and training — showing a class or a stakeholder, in one glance, why “just use red” doesn't work.

How accurate are the simulations?

Color-blindness simulation is an approximation, not a literal window into someone else's vision. The models are most reliable for dichromacy — protanopia, deuteranopia, and tritanopia — where an entire cone type is missing. The milder “anomalous” types vary a great deal from person to person, so treat those as a reasonable middle ground rather than an exact match.

Two other things affect what you see. First, your monitor: an uncalibrated, very bright, or very dim screen will shift the colors. Second, this is a design tool, not a medical one — it can't tell you or anyone else whether they are color blind. For that, use a color blindness test and, if there's any doubt, see an eye-care professional.

Fixing what the simulation reveals

If an image fails, the fix is rarely “pick a different color.” It's to stop relying on color as the only signal. For a deeper walkthrough, see our guide on how to design for color blind users. A few practical rules that hold up across every CVD type:

Pair color with a text label, icon, or pattern so meaning survives in grayscale.
Keep text contrast at 4.5:1 or higher (WCAG 1.4.3) and 3:1 for icons, borders, and chart elements (WCAG 1.4.11).
Avoid red/green and blue/purple as the difference between two states.
Label data directly on the chart instead of sending readers to a color legend.

Example: Color Blindness Simulation

Protanopia Simulation Example — Protanopia Simulation

Frequently asked questions

Is my image private?

Yes. Everything is processed on your device in the browser. Images are never uploaded, stored, or shared, so it's safe for unreleased work and client files.

Which type should I test first?

Start with deuteranopia and protanopia. Red-green deficiencies account for the large majority of people with color blindness, so if a design holds up there you've covered most of your audience. Then check tritanopia and the grayscale (achromatopsia) view.

Why do the colors look slightly different from another simulator?

Different tools use different cone-response matrices and color models. Small differences between simulators are normal and don't mean one is 'wrong' — they're all approximations of the same underlying vision.