Skip to content
Accessibility

Simulate color vision deficiencies

Preview how your colors may appear to people with the most common types of color blindness.

Your colors

These simulations use standard mathematical approximations of color vision deficiencies. Real perception varies between individuals — treat this as a helpful guide, not a precise medical model. Don’t rely on color alone to convey meaning.

Roughly 1 in 12 men and 1 in 200 women experience some form of color vision deficiency (CVD). Designs that rely on color alone — a red error and a green success, for example — can become ambiguous or invisible to them.

This simulator applies approximations of common CVD types so you can preview how a palette might be perceived and adjust before it ships. Use it as a guide alongside, not a replacement for, testing with real users.

How to use the Color Blindness Simulator

  1. Enter your colors. Add the colors or palette you want to evaluate.
  2. Compare the simulations. View side-by-side previews for protanopia, deuteranopia, tritanopia, and grayscale vision.
  3. Adjust for clarity. If two colors collapse into one, add labels, patterns, or pick more distinct hues.

Practical examples

Status colors Check that success and error states stay distinguishable, not just red vs green.
Charts & graphs Confirm data series remain separable without relying on hue alone.
Maps & legends Ensure categories on a map can still be told apart.

Why the Color Blindness Simulator matters

  • Never relying on color alone is a core WCAG principle — pairing color with text or icons helps everyone.
  • Simulating CVD early surfaces problems while they’re still cheap to fix.
  • Inclusive color choices widen your audience and improve usability for all users.

Frequently asked questions

How accurate is the simulation?

It uses well-known mathematical approximations of color vision deficiencies. Real perception varies between individuals, so treat results as a helpful guide rather than a precise medical model.

What types of color blindness are covered?

The simulator covers protanopia and deuteranopia (red-green), tritanopia (blue-yellow), and achromatopsia (total color blindness / grayscale).

How do I design for color blindness?

Don’t rely on color alone. Add text labels, icons, or patterns, and ensure sufficient contrast so meaning survives even when hues are hard to tell apart.