Skip to content
XUtilHub

Color Blindness Simulator – See Images as Color-Blind People Do

Upload an image to see how people with deuteranopia, protanopia, tritanopia and achromatopsia see it. Side by side, scientifically based, no upload.

  • Free, no sign-up
  • Runs in your browser, nothing uploaded

About the Color Blindness Simulator

Check charts, maps, designs and photos for color-blind accessibility. Your image is shown as people with the main types of color vision deficiency see it, using the Machado (2009) model, right in your browser.

Key features

  • Deuteranopia, protanopia, tritanopia
  • Achromatopsia (no color)
  • All views side by side
  • Scientific Machado 2009 model
  • Download each simulation
  • Images never uploaded

See your design through other eyes

Charts, maps, status badges and games often rely on red versus green, which millions of people can't tell apart. Upload a screenshot or image to see how it looks with each main type of color vision deficiency.

Types of color blindness

TypeMissingConfusesHow common
DeuteranopiaGreen conesRed–green, brown–green~1% of men (plus ~5% milder)
ProtanopiaRed conesRed–green; red looks dark~1% of men (plus ~1% milder)
TritanopiaBlue conesBlue–green, yellow–pinkRare (~0.01%)
AchromatopsiaAll colorSees only lightnessVery rare (~0.003%)

Quick accessibility checks

  • Can you still tell every line in a chart apart?
  • Are error and success messages clear without their color?
  • Do links stand out from body text without relying on color alone?

Contrast checker, color palette generator and image color picker.

How to use the Color Blindness Simulator

  1. Drop an image onto the box, or click Try a sample image.
  2. See it as people with deuteranopia, protanopia, tritanopia and achromatopsia see it, side by side.
  3. Pick one view to see it larger.
  4. Download any simulation as a PNG. Your image never leaves your device.

Frequently asked questions

How common is color blindness?

About 8% of men and 0.5% of women of Northern European descent have red-green color vision deficiency, the most common kind. Blue-yellow (tritan) deficiency and total color blindness are rare.

How accurate is the simulation?

It uses the Machado, Oliveira and Fernandes (2009) model, widely used in research and accessibility tools, at full severity. Many people have milder forms (anomalous trichromacy), so they see somewhat more color than shown.

Is my image uploaded?

No. The image is processed with the canvas in your browser and never sent to a server.

How do I make designs color-blind friendly?

Don't use color alone to show meaning: add labels, icons, patterns or underlines. Avoid red and green pairs for good and bad, and make sure colors also differ in lightness.

Are these design tools free?

Yes. Every tool is free with no sign-up, and you can use the colors and code in personal and commercial projects.

Do you upload my images?

No. The color blindness simulator and every other tool run entirely in your browser, so your images and colors stay on your device.

Which code formats can I copy?

HEX, RGB and HSL values, plain CSS, CSS variables, SCSS variables, and Tailwind classes or theme config for both Tailwind v3 and v4.

What is a good contrast ratio?

WCAG AA asks for at least 4.5:1 for normal text and 3:1 for large text, icons and borders. AAA asks for 7:1 for normal text.

Last updated:

Related Design tools