Color Blindness and Web Design: What to Know

Color vision deficiency, often called color blindness, affects a meaningful share of people. Commonly cited estimates are roughly one in twelve men and one in two hundred women, though numbers vary by population. Most people with it can see color, but have difficulty distinguishing certain shades, especially reds, greens, and sometimes blues. Designing with them in mind is simple and improves clarity for everybody.

The main rule

Never use color as the only way to convey information. WCAG calls this "Use of Color." If you only use red and green to show success and failure, many people won't see the difference.

Common problem spots

Links in text. If links are distinguished only by color from the surrounding text, some visitors won't notice them. Underline links, or give them another clear visual cue.

Form errors. Red borders alone aren't enough. Add an icon and text that explains the error. See accessible forms.

Status indicators. "Open" in green and "Closed" in red should also say the words, or use different icons.

Charts and graphs. Distinguish series with patterns, labels, or shapes as well as color, and label data directly where possible.

Buttons and states. Selected, active, and disabled states should differ in more than hue. Use weight, outlines, icons, or text.

Maps and legends. Use clear labels, and don't rely on subtle color differences.

Required fields. Mark them with text such as "required" or an asterisk explained in the form, not just a colored label.

Choose colors carefully

Pairs that often cause trouble include red and green, green and brown, blue and purple, and pale pastels next to one another. If you must use them, ensure there's a strong difference in lightness (how light or dark they are), because people with color vision deficiency generally perceive differences in brightness well.

Contrast still applies

Good contrast helps people with color deficiencies and low vision alike. Text needs 4.5:1 against its background, large text 3:1, and meaningful interface elements 3:1. See color contrast for accessible websites.

How to test

• Simulate it. Browser developer tools can emulate several types of color vision deficiency. Design tools and plugins offer similar previews
• View in grayscale. If your content still makes sense without color, you're in good shape
• Ask people. Feedback from people with color vision deficiency is more reliable than simulations. See user testing on a budget

Simulators are helpful but approximate, because real experiences vary.

Pick a flexible palette

Start with a brand palette that includes strong light and dark values. See website color schemes. Check that your accent colors stand apart not just in hue but in lightness.

Dark mode

Check both themes. See dark mode web design.

Related guidance

See icons in web design for pairing color with shapes and labels, and website accessibility basics.

The bottom line

Pair color with text, icons, or patterns, keep strong contrast, and test with simulators. If your design works without color, it works for everyone.