Color Blindness Simulator Guide: Design for All Vision Types

What Is Color Blindness?

Color blindness — more accurately called color vision deficiency (CVD) — is the reduced ability to distinguish between certain colors. It is not actual blindness. Most people with CVD can see colors, but they perceive a narrower range of hues than someone with typical trichromatic vision.

The human eye has three types of cone cells: red (long wavelength), green (medium wavelength), and blue (short wavelength). Color vision deficiency occurs when one or more cone types are missing or function abnormally. According to the National Eye Institute, approximately 8% of men and 0.5% of women of Northern European descent have some form of CVD.

Types of Color Vision Deficiency

There are three main categories based on which cone cells are affected. The prevalence data below comes from a 2022 meta-analysis published in Ophthalmic and Physiological Optics covering 67 studies across 40 countries.

Red-Green Deficiency (95% of Cases)

Blue-Yellow Deficiency (Rare)

Monochromacy (Extremely Rare)

Complete achromatopsia (rod monochromacy) affects roughly 1 in 30,000 people. These individuals see only in shades of gray. It is usually accompanied by light sensitivity and reduced visual acuity.

Why Designers Must Test for Color Blindness

If 8% of your male users cannot distinguish your red error state from your green success state, you have a usability problem that affects millions of people. A 2021 WebAIM survey of over 1 million home pages found that 83.9% of pages had detectable WCAG 2.1 failures, with color-related issues among the top five.

This is not just about compliance. According to the World Health Organization, approximately 300 million people globallyhave color vision deficiency. For a product with 1 million users, that's roughly 40,000–80,000 people who may struggle with color-dependent UI elements.

WCAG Requirements for Color

The Web Content Accessibility Guidelines (WCAG) 2.1 include several criteria related to color:

Criterion 1.4.1 is Level A — the absolute minimum standard. If your form uses only a red border to indicate an error (no icon, no text label), you fail this criterion.

Accessible Color Palette Strategies

Safe Color Combinations

The following color pairs are distinguishable by people with the most common forms of CVD (deuteranopia and protanopia), according to research by Masataka Okabe and Kei Ito's widely cited “Color Universal Design” guidelines:

• Blue and orange — the most universally distinguishable pair
• Blue and red — works for all but tritanopia (extremely rare)
• Dark blue and yellow — high contrast for all CVD types
• Black and yellow — maximum visibility
• Purple and yellow — good separation across all types

Problematic Color Combinations

• Red and green — the classic problem pair for 95% of CVD users
• Green and brown — appear nearly identical in deuteranopia
• Red and brown — very similar in protanopia
• Blue and purple — difficult for tritanopia
• Light green and yellow — problematic for most red-green CVD

Design Patterns That Work for Everyone

Never Use Color Alone

Pair every color-coded element with a secondary indicator. For error states, add an icon and text label alongside the red border. For charts, use different line patterns (solid, dashed, dotted) or shape markers (circle, square, triangle) in addition to colors.

Add Text Labels to Status Indicators

Instead of a green badge for “active” and a red badge for “inactive,” add the words. A color blind user cannot tell the difference between those badges, but they can read the label.

Use Sufficient Contrast

Even with safe colors, insufficient contrast creates problems. The minimum 4.5:1 ratio for text ensures readability for people with low vision and many forms of CVD. Tools like our color blindness simulator let you test contrast under simulated CVD conditions.

Test with Real Simulations

Color blindness simulators use the Brettel, Vienot, or Machado algorithms to mathematically transform colors as they would appear to someone with each type of CVD. A 2009 study by Machado, Oliveira, and Fernandes at IEEE Transactions on Visualization validated that their simulation model matched the color perception of real CVD subjects with over 95% accuracy.

Frequently Asked Questions

How many people are color blind?

Approximately 300 million people worldwide have some form of color vision deficiency. About 8% of men and 0.5% of women of Northern European descent are affected. The most common type is red-green color blindness (deuteranomaly), which affects roughly 6% of males.

What is the difference between protanopia and deuteranopia?

Both are types of red-green color blindness. Protanopia is caused by missing red cone cells, making reds appear dark and muddy. Deuteranopia is caused by missing green cone cells, making greens and reds appear similar. Deuteranopia is about 3 times more common than protanopia.

What colors should I avoid in accessible design?

Avoid relying solely on red/green distinctions (the most problematic pair for 95% of color blind users). Also avoid red/brown, green/brown, blue/purple, and light green/yellow combinations. Always pair color with another visual indicator such as icons, patterns, labels, or shape differences.

Does WCAG require testing for color blindness?

WCAG 2.1 Success Criterion 1.4.1 (Use of Color) requires that color is not used as the only visual means of conveying information. This is a Level A requirement, the minimum standard. While WCAG does not mandate color blindness simulation specifically, testing with a simulator is the most practical way to verify compliance.

Can color blindness be corrected?

There is no cure for inherited color blindness. EnChroma and similar glasses use spectral notch filters to enhance color separation for some people with anomalous trichromacy (partial deficiency), but they do not work for complete dichromacy. Gene therapy trials have shown promise in animal models but are not yet available for humans.