Color Blindness Simulator

1. Drop an image onto the upload area or choose a file. Screenshots of dashboards, charts, maps and forms are the most useful test material.
2. Compare the protanopia, deuteranopia, tritanopia and achromatopsia versions side by side.
3. Look for information that disappears: two chart lines that merge, a status color that turns into the same brown as its neighbor, text that loses its background.
4. Fix the design, take a new screenshot and run it again.

The image is processed locally with the Canvas API and is never uploaded.

• Protanopia: the red-sensitive (L) cones are missing. Reds look darker and red and green become hard to tell apart. About 1% of males.
• Deuteranopia: the green-sensitive (M) cones are missing. Red-green confusion similar to protanopia, without the darkening of reds. Also about 1% of males.
• Tritanopia: the blue-sensitive (S) cones are missing, which weakens blue-yellow distinctions. Rare, roughly 1 in 10,000 people or fewer.
• Achromatopsia: no color vision, so everything is seen in grayscale. About 1 in 30,000 people.

The simulation matrices are applied in linear RGB, after removing the sRGB gamma curve, because cone responses relate to light intensity rather than to gamma-encoded pixel values.

About 1 in 12 men (8%) and 1 in 200 women (0.5%) of Northern European ancestry have some form of red-green color vision deficiency. That is around 80 in every 1,000 men who use your product. The most common form is deuteranomaly, a weakened rather than missing green response. The simulator shows the complete forms, so treat its output as the worst case of the most common conditions.

• Charts whose series differ only by hue, especially red against green.
• Status colors: red error and green success badges, or form fields outlined in red on error.
• Heat maps and choropleths that run from red to green.
• Links distinguished from body text by color alone.
• Text on colored backgrounds, where the achromatopsia view shows whether enough lightness contrast is left.

WCAG SC 1.4.1 Use of Color says color must not be the only visual way to convey information, indicate an action or distinguish an element. Give every color signal a second cue: an icon and text on status messages, direct labels or patterns on chart series, solid, dashed and dotted line styles, and underlines on links in body text.

Then make the colors differ in lightness as well as hue, and confirm text pairs in the contrast checker, which can simulate the same four conditions for a single foreground and background. Scales from the Tailwind palette generator are built on OKLCH lightness steps, which makes those lightness differences predictable.