Skip to content

Color blindness simulator: see your colors the way color-blind people do

Upload an image or a screenshot, or test your palette, and instantly compare how it looks with protanopia, deuteranopia, tritanopia and achromatopsia. Colors that get confused are flagged for you.

Or drag and drop it here

The file must be JPEG, PNG, WebP or SVG and up to 40 MB

No image at hand? Try an example:

Vision type

Conflicts found: Deuteranopia, Tritanopia, Achromatopsia

What color blindness is and why it matters in design

Color blindness (or color vision deficiency) affects the ability to tell certain colors apart, usually reds and greens, though other variants affect different hues. It is not a single condition: there are several types, each with a different pattern of color confusion, and it affects roughly 1 in 12 men and 1 in 200 women.

This has a direct consequence in any project where color communicates something: a combination that looks clearly differentiated to you can look nearly identical to a real part of whoever sees it. A red “error” button on a green background, for example, can be invisible to someone with deuteranopia.

Types of color blindness, explained

Protanopia

≈ 1% of men

Absence or reduced sensitivity to red. Reds look darker and can be confused with greens or browns.

Deuteranopia

≈ 1% of men

Absence or reduced sensitivity to green. It is the most common type; reds and greens become hard to tell apart.

Tritanopia

Very rare

Absence or reduced sensitivity to blue, much less common than the previous two. It affects the distinction between blues and yellows.

Achromatopsia

≈ 1 in 30,000

Total absence of color vision, much rarer. The person perceives the world in grayscale.

How to use the simulator in three steps

  1. Upload an image or a palette

    Drag an image, paste a screenshot with Ctrl + V or use one of the examples. Without an image, you can test your palette colors directly.

  2. Choose the vision type

    “All” compares the four types at once. Pick a specific one to see it larger, next to the original.

  3. Fix the conflicts

    Colors that get confused are flagged with a warning. Select one and adjust it in the editor until the warning goes away.

How to design with color blindness in mind

Each example shows a wrong and a right version as seen by a person with deuteranopia, the most common type (the third one, in grayscale).

  • Do not convey information with color alone

    A green, amber and red status list becomes almost uniform. Add icons, text or different shapes.

  • Avoid red and green as the only pair

    To compare two series, blue and orange stay distinct with every common type of color blindness.

  • Differentiate by lightness too

    If two colors have the same lightness, they look identical in grayscale. Pair a dark one with a light one.

  • Add labels or textures to charts

    A direct label or a hatch pattern keeps the chart readable even when the colors look alike.

Frequently asked questions

It is a condition that makes it harder to tell certain colors apart. The main types are protanopia, deuteranopia, tritanopia and achromatopsia, each with a different pattern of color confusion.

Both affect red–green discrimination, but for different reasons: protanopia reduces sensitivity to red, while deuteranopia reduces sensitivity to green. Visually, the results are similar but not identical.

It affects roughly 1 in 12 men and 1 in 200 women, making it one of the most common visual accessibility conditions to keep in mind.

With protanopia and deuteranopia, the most common ones are red and green, green and brown, blue and purple, and orange with light green. With tritanopia, mainly blue with green and yellow with light pink.

Use color pairs that also differ in lightness, such as blue and orange instead of red and green, and do not rely on color alone: add labels, icons or textures. Then upload a screenshot to the simulator to check it.

It is an approximation: it applies commonly used simulation matrices to each pixel. It is useful to spot problematic combinations, but everyone perceives color a little differently, especially with the milder forms (anomalies).

No. Analysis and simulation run in your own browser, your image is never sent to or stored on any external server.

The contrast checker verifies the readability ratio between two specific colors. This simulator lets you see a full image or design as someone with color blindness would perceive it, catching comprehension issues that go beyond a single color pair.

You can upload JPG, PNG or WebP files, drag them onto the tool or paste a screenshot directly with Ctrl + V (Cmd + V on Mac).

More tools