Color Blindness Simulator

Seeing a design through different eyes

Color-vision deficiency affects roughly 8 percent of men and 0.5 percent of women, most commonly in the red-green range. A simulator transforms your colors through a model of how a given deficiency perceives them, so you can spot places where two colors that look distinct to you collapse into the same shade for a large slice of your users.

The main types

Protanopia and deuteranopia are the red-green forms and are by far the most common; reds, greens, and browns tend to muddy together. Tritanopia is the rarer blue-yellow form. There are also anomalous versions (protanomaly, deuteranomaly) where the sensitivity is reduced rather than absent. A good simulator covers at least the three dichromatic types.

Example

A red "error" and green "success" badge:
  Normal vision:      clearly different
  Deuteranopia:       both read as dull yellow-brown

Fix: add an icon or label, not just color
  error   -> red + ✕ + "Error"
  success -> green + ✓ + "Success"

The repair is almost never a different color; it is a second channel of information, a shape, an icon, or text, so the meaning does not depend on hue perception.

Pitfalls

Status systems built purely on red and green are the classic failure, and they appear everywhere from form validation to charts. Charts with many similar hues become unreadable; use distinct lightness steps or direct labels instead. Passing the contrast checker does not cover this, because contrast and color discrimination are different problems.

FAQ

Is simulating enough to be accessible? It catches hue collisions, but you still need sufficient contrast and non-color cues. Treat it as one check among several.

Which type should I test first? Deuteranopia, since red-green deficiency is the most prevalent, then confirm with the others.

Can I rely on safe palettes? Colorblind-safe palettes help, but always verify your specific pairings; context and size change whether two colors stay distinguishable.