My Tool Studio
WCAG

Color Blindness Simulator

This color blindness simulator shows how an image or a set of colors looks to people with protanopia, deuteranopia, tritanopia and achromatopsia, plus the milder anomalous forms. Drop, paste or upload a chart, map or screenshot, or start with the built-in sample image, and you get four simulated views next to the original. A before and after slider lets you compare one type side by side, and each view downloads as a PNG, or all of them at once as a ZIP. A severity slider moves from full color blindness down to partial types such as deuteranomaly, the most common kind. A second panel tests a palette you paste in and flags colors that would look almost the same. Everything runs in your browser.

Always freeNo sign upRuns in your browser
100% (full: -opia types)

100% shows full color blindness (protanopia, deuteranopia, tritanopia). Lower values show the milder, more common anomalous forms such as deuteranomaly. Applies to both the image and the palette test.

Simulate an image

Drop an image here, paste a screenshot with Ctrl+V or Cmd+V, or use the buttons above. Nothing is uploaded.

Is your palette colorblind-safe?

Paste colors separated by commas or new lines.

Original
Protanopia distinguishable
Deuteranopia distinguishable
Tritanopia distinguishable
Achromatopsia 1 collision

#e63946 ↔ #2a9d8f look nearly identical. Try changing lightness.

How to use

01

Set the severity

Leave Severity at 100% for protanopia, deuteranopia and tritanopia, or lower it to see the milder protanomaly, deuteranomaly and tritanomaly. The setting applies to the image and the palette test.

02

Add an image to simulate

Drop an image on the box, paste a screenshot with Ctrl+V or Cmd+V, press Upload image, or press Use a sample image. Tick Full resolution for large images. Use the Before and after slider, or download PNGs or a ZIP.

03

Test a palette for clashes

Paste your colors, separated by commas or new lines, into the palette box. Each row shows how they look for one type and lists any pairs that become hard to tell apart.

Why Color Blindness Simulator

Types of color blindness at a glance

The table below lists the types the simulator covers. Prevalence figures are the ones commonly quoted for men of Northern European descent; rates in women are much lower for red-green types. The -anomaly forms are what you see when the Severity slider is below 100%.

When you check a design, the colors most often confused are the ones that differ only in hue and not in lightness. A red error message next to a green success message, or a red and green line in the same chart, are the classic problems.

TypeCone affectedCommonly quoted share of menColors often confused
DeuteranomalyGreen (weakened)About 5%Red, green, brown, orange
DeuteranopiaGreen (missing)About 1%Red, green, brown, orange
ProtanomalyRed (weakened)About 1%Red, green, with reds looking darker
ProtanopiaRed (missing)About 1%Red, green, blue and purple
Tritanopia and tritanomalyBlueRareBlue and green, yellow and pink
AchromatopsiaAllVery rareAlmost all hues look gray

Common questions

What are the main types of color blindness?
Protan types affect the red-sensitive cones, deutan types the green-sensitive cones, and tritan types the blue-sensitive cones. Each comes as an -opia form, where that cone type is missing, and a milder -anomaly form, where it is shifted. Achromatopsia, seeing little or no color, is very rare.
Which type of color blindness is most common?
Deuteranomaly, a weakened response to green, is the most common. It is usually quoted at about 5% of men. Red-green types together affect roughly 8% of men and 0.5% of women of Northern European descent.
What colors can people with red-green color blindness not tell apart?
Reds, greens, browns and oranges tend to blend, and some blues and purples look alike because the red part of purple is lost. People with tritan types confuse blue with green and yellow with pink. Brightness differences still show up, which is why lightness contrast helps.
Is this color blindness simulator accurate?
It uses the Machado, Oliveira and Fernandes (2009) model, applied in linear RGB, which is a widely used research model. Partial severities are approximated by blending toward normal vision. No simulation shows exactly what one person sees, so treat it as a design check, not a diagnosis.
What does the severity slider change in the simulator?
At 100% it shows dichromacy, where one cone type is missing, such as deuteranopia. Lower values show anomalous trichromacy, such as deuteranomaly at 60%, where colors are harder to separate but not merged. The labels on each view update to match.
How do I make charts readable for color blind users?
Do not rely on color alone. Add labels, patterns, line styles or icons, and choose series colors that also differ in lightness. Then paste the chart colors into the palette test here and fix any pair it flags.
What does a collision in the colorblind palette test mean?
It means two of your colors become very close after simulation, with a CIEDE2000 difference under 10. Viewers with that vision type may not be able to tell them apart. Changing the lightness of one color usually fixes it faster than changing its hue.
Does WCAG require a color blindness simulation?
No. WCAG 1.4.1 Use of Color says color must not be the only way to convey information, but it does not ask for a simulation. Running one is a quick way to find places where you rely on color alone.
Are my images uploaded when I use the color blindness simulator?
No. The image is read and processed with the canvas in your own browser. By default it is scaled to at most 900 pixels wide for speed. Tick Full resolution to work at up to 4096 pixels, which takes a little longer on big images.
Can I compare the original and the simulated image side by side?
Yes. Under the four views, choose a type in Before and after and drag the slider. The left part of the picture shows the original and the right part shows the simulation, so you can sweep across a chart or a button and see exactly what changes.

More WCAG tools

View all

Website Accessibility Scanner

Full-site WCAG 2.1 audit with fix code for every issue

WCAG
URL-first

Color Contrast Checker

WCAG AA/AAA contrast ratio with passing colors

WCAG

WCAG Accessibility Checker

Check one page or HTML against 70 WCAG 2.1 rules

WCAG
URL-first

ADA Title II Compliance Checker

WCAG 2.1 AA scan, deadline calculator and Title II readiness checklist

WCAG
URL-first