Accessibility
Designing for color accessibility: why color alone is never enough
About 1 in 12 men and 1 in 200 women see color differently. If your design asks them to "click the red button" or "look at the green line on the chart," you've already lost them. Here's how to fix it, from the people who've spent 15 years studying color vision.
Color is one of the most powerful tools in a designer's kit. It guides the eye, signals status, groups related things, and tells you what's safe and what isn't. It's also one of the easiest ways to accidentally exclude people.
For the roughly 350 million people worldwide with color vision deficiency (CVD), a red "error" and a green "success" can look nearly identical. A pie chart becomes a gray wheel of indistinguishable slices. A map with six color-coded categories becomes a map with one.
"Color is a wonderful secondary channel. It should almost never be the primary one."
The rule: WCAG 1.4.1 "Use of Color"
The Web Content Accessibility Guidelines (WCAG), the international standard for digital accessibility, are unambiguous on this point. Success Criterion 1.4.1 "Use of Color" reads:
"Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."
Said more plainly: whenever you use color to communicate something, pair it with a second signal that doesn't rely on color. That second signal is what makes the design legible to someone who can't tell your red from your green. It also helps everyone else, in bright sunlight, on a grayscale printer, or on a phone with night-shift turned on.
Four techniques we use in our own work
These are the four approaches we reach for most often, in order from "almost always right" to "use with care."
Text labels
The most reliable second channel. If a color means something, say what it means in words. A "Required" field label beats a red asterisk. "Error: password too short" beats a red border.
Icons & letters
When space is tight, like map pins, chart legends, and dashboard badges, put a letter or a shape inside the color. On our CAP Map, every pin has both a category color and a letter (M for Museum, L for Library, and so on).
Patterns & textures
Charts, graphs, and maps with filled regions need a second visual channel. Diagonal stripes, dots, and cross-hatch fills let people distinguish data series even if the colors collapse together. Most charting libraries (D3, Plotly, Highcharts) support this natively.
Underlined links
The oldest web convention, and still the best one. A link that's blue and underlined is obvious to every reader. A link that's only blue disappears for anyone who confuses blue with gray or purple. Unstyled links in body copy are the #1 cause of "I didn't know I could click that."
Color contrast still matters (a lot)
Use of Color handles the differentiation problem. WCAG 1.4.3 handles the contrast problem: text needs at least a 4.5:1 contrast ratio against its background (3:1 for large text). Pale gray-on-white, yellow-on-cream, and the many trendy "subtle" palettes fail this test routinely.
Tools like WebAIM's contrast checker and the Stark plugin for Figma make this a five-second check. Make it part of your review process.
How we designed the CAP Map
Our Color Accessibility Program map lists hundreds of museums, libraries, parks, and schools where you can try EnChroma glasses. Every pin carries a letter (M, Sc, L, P, S, O) inside a larger disc with a dark outline. Every program has an icon badge in the corner for scenic viewer, to borrow glasses. The legend is sized generously, the amber "library" color is darkened to meet AA contrast, and every pin is keyboard-focusable with an ARIA label.
The result: the same map works for everyone, and it looks sharper for sighted users too. Redundant signals aren't clutter; they're clarity.
See the CAP Map →A ten-point checklist
Pin this somewhere. Run it before you ship.
Before you ship, check:
- Every color-coded element has a text label, letter, icon, or pattern as a second channel.
- Form errors are communicated with words (and ideally an icon), not just a red border.
- Links in body text are underlined, not just colored.
- Chart series use different line styles (solid, dashed, dotted) in addition to color.
- Pie and bar charts use patterns or direct labeling for each segment.
- Map pins include a letter, icon, or shape, not just a hue.
- Status indicators (online/offline, pass/fail) include an icon and/or word.
- All text meets 4.5:1 contrast against its background (3:1 for large text).
- You've tested the design in grayscale, or with a CVD simulator like Sim Daltonism or Coblis.
- Someone with color vision deficiency has actually tried to use it.
One last thing: this helps everyone
Accessibility is often framed as a concession, something you add for a small minority. The truth is the opposite. A map that works in direct sunlight, a chart that prints cleanly in black and white, an error message that a tired user can read at a glance: these are better designs, full stop.
Designing for color vision deficiency is what the accessibility community calls a "curb cut": a change made for one group that ends up helping everybody. Underlined links. Captions. Keyboard shortcuts. All started as accommodations. All became standards.
Color is beautiful. Use it. Just don't let it be the only way you say what you mean.
See color differently
EnChroma glasses help people with color vision deficiency see a broader spectrum of color. Try a pair at one of our Color Accessibility Program partner locations. No purchase required.
Find a Location →