Color Blindness Design Guide

Q: What is color vision deficiency?

Color vision deficiency (CVD), commonly called color blindness, is a condition in which a person perceives colors differently from the majority. It is caused by differences in the cone cells of the retina and can range from mild (weakness in one cone type) to total (no color vision at all).

Q: How common is color vision deficiency?

Roughly 8% of men and 0.5% of women of European ancestry have red-green color vision deficiency. Deuteranomaly (green-weak) is the most common form. Blue-yellow deficiencies are much rarer. Total color blindness affects about 1 in 30,000 people.

Q: How do I design for color blindness?

Never rely on color alone to convey information. Pair color with icons, text labels, patterns or position. Use lightness differences in addition to hue. Test with a color blindness simulator and, if possible, with real users. Ensure your interface is usable in grayscale.

Q: Should I avoid red and green entirely?

No. Red and green are perfectly fine as colors — the problem is when they carry meaning alone. Use them as long as you add a secondary signal: an icon, a text label, or a distinct lightness difference between the two.

Short answer

Roughly 8% of men and 0.5% of women have some form of color vision deficiency. The design solution is simple: never rely on color alone to convey meaning. Pair color with icons, text, patterns or position — and check that your interface remains usable in grayscale.

The seven CVD types

Color vision deficiency comes in several forms, each affecting a different cone type. Below is the standard classification used in design and accessibility.

Protanopia

Red-blind. Red appears black or dark brown. Prevalence: ~1% of men.

Protanomaly

Red-weak. Reds appear muted and less distinct. Prevalence: ~1% of men.

Deuteranopia

Green-blind. Greens appear brownish and hard to distinguish from reds. Prevalence: ~1% of men.

Deuteranomaly

Green-weak. The most common form. Greens appear slightly muted. Prevalence: ~5% of men.

Tritanopia

Blue-blind. Blues appear greenish, yellows appear pinkish. Prevalence: <0.01%.

Tritanomaly

Blue-weak. Blue-yellow confusion. Prevalence: <0.01%.

Achromatopsia

Complete absence of color vision. Sees only brightness. Prevalence: ~0.003%.

In practice, protan and deuteran variants — the two red-green deficiencies — are by far the most common and affect the largest audience. If you address those two well, you have addressed the vast majority of the risk.

The four principles of accessible color design

Never rely on color alone

Every place color conveys meaning, add a secondary signal: an icon, a text label, a shape, a pattern or a position. This is the single most impactful change you can make.
Use lightness as a backup

Two colors that are indistinguishable by hue usually differ in lightness. If your design still works when hue is removed (grayscale), it works for CVD users.
Test the specific pairings

Not all reds and greens are equally problematic. A dark red on a light green may still be readable. Test the specific pairs your interface actually uses.
Consider real users

Simulators approximate; only real users can tell you if the design works. If your product has a user base, ask. If not, treat the simulator as a hard test for design decisions.

Common problem patterns

Status indicators without labels

A green dot for "online", a red dot for "offline" — this fails for red-green CVD users. Add a text label ("Online" / "Offline") or a distinct icon shape.

Form validation by color alone

A red border for invalid, green border for valid — this fails. Add an icon (✗ / ✓) and a message next to the field. This helps everyone, not just users with CVD.

Charts and graphs

A bar chart with red, green, orange and brown categories — this fails for deuteranomaly. Solutions: use distinct lightness values, add patterns, direct-label each series, or use a color-blind-safe palette.

Links in body text

Removing underlines from links and relying on blue-vs-black color difference — this fails for some users. Keep underlines, or use a strong enough color difference plus another cue (bold weight, small icon).

Red-only error messages

Text shown in red without any icon or label fails. Add an error icon and a clear message ("This field is required"). Red can remain as an additional cue.

A color-blind-safe starting palette

These colors maintain distinct lightness differences and are commonly used in data visualization to remain distinguishable across CVD types:

#0072B2 · Blue

#E69F00 · Orange

#009E73 · Green

#D55E00 · Red-orange

#CC79A7 · Pink

#F0E442 · Yellow

This palette (Okabe-Ito) is widely used for scientific charts and diagrams. It combines hue differences with lightness differences, so the colors remain distinguishable in grayscale and under any CVD type.

Practical guidance by component

Component	Accessible solution
Success message	Green + checkmark icon + text label "Success"
Error message	Red + ✗ icon + text label "Error"
Warning	Amber + triangle icon + text label "Warning"
Online status	Green dot + text "Online" or green checkmark
Chart series	Distinct lightness + direct labels + patterns or dots
Form validation	Border color + inline icon + message
Links in text	Underline + brand color (never color alone)
Required fields	Asterisk + text label "Required" (not red alone)
Selected state	Background + border + icon (not just background color change)

Test your design

Use our color blindness simulator to preview any color or palette under all seven CVD types. It shows both individual colors and full palettes, so you can catch problem pairings before they ship.

Color Blindness Simulator

Test any palette under 7 CVD types.

Contrast Checker

Test any pair against WCAG.

Accessible Palettes

Ready-made accessible color sets.

WCAG Contrast Guide

Understand the ratio requirements.

Frequently asked questions

What is color vision deficiency?