Designing for Colorblind Users: Color Accessibility Guide

Color vision deficiency is common: about 1 in 12 men and 1 in 200 women of Northern European descent have some form of it. Most can see color, just not tell certain colors apart. Designs that rely on color alone quietly fail them.

The main types

• Red-green deficiency (deuteranomaly, protanomaly, and their stronger forms) is by far the most common. Reds, greens, browns, and oranges can look alike.
• Blue-yellow deficiency (tritanomaly) is rare.
• Complete color blindness (achromatopsia) is very rare.

The core rule: never use color alone

WCAG requires that color is not the only way information is shown. In practice:

• Form errors: add an icon and a text message, not just a red border.
• Links in text: underline them, or make sure they have enough contrast with surrounding text and an extra cue on hover and focus.
• Status: "Paid", "Overdue", and "Pending" need labels or icons, not only green, red, and yellow dots.
• Charts: label lines directly, use patterns or different line styles, and avoid red versus green as the only difference.

Choose safer palettes

• Blue and orange are distinguishable for most people with color vision deficiency.
• Vary lightness as well as hue, so colors differ even in grayscale.
• Use the color blind palette auditor to check a palette for problem pairs.

Test your design

1. Preview it with the color blindness simulator or the vision deficiency emulation in Chrome DevTools (in the Rendering panel).
2. View it in grayscale. If you can still understand everything, you're in good shape.
3. Check contrast with a WCAG contrast checker.