I shipped a form validation system that used green for valid fields and red for invalid ones. No icons, no text changes, just border color. A user emailed me: "Your form doesn't seem to show errors. I fill in wrong data and nothing changes." He had protanopia -- red-green color blindness. My green and red borders looked nearly identical to him.
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. On a product with 100,000 users, that is roughly 4,000 people who cannot use color-dependent interfaces the way you designed them. This is not a niche accessibility concern. It is a mainstream usability requirement.
How color vision works
The human retina has three types of cone cells, each sensitive to a different range of wavelengths:
- L-cones (long wavelength): peak sensitivity around 564 nm, roughly red
- M-cones (medium wavelength): peak sensitivity around 534 nm, roughly green
- S-cones (short wavelength): peak sensitivity around 420 nm, roughly blue
Your brain interprets the combined signals from all three cone types as a specific color. Color vision deficiency occurs when one or more cone types are absent or have shifted sensitivity.
Protanopia (1% of males): L-cones are absent. Reds appear much darker and shift toward brown or green. The entire red-green spectrum collapses.
Deuteranopia (1% of males): M-cones are absent. Similar to protanopia in practice -- reds and greens are confused -- but with different specific confusions because the missing cone type is different.
Protanomaly (1% of males) and Deuteranomaly (5% of males): the L-cones or M-cones are present but shifted in sensitivity. These are milder forms -- colors are not absent but are harder to distinguish. Deuteranomaly alone affects 1 in 20 men.
Tritanopia (very rare): S-cones are absent. Blues and yellows are confused. This is rare enough that most accessibility guidance focuses on red-green deficiency.
Achromatopsia (extremely rare): no functioning cones at all. Complete color blindness -- the world is in grayscale.
What this means for your designs
The practical impact is that you cannot rely on color alone to convey information. WCAG 2.1 Success Criterion 1.4.1 (Use of Color) states this explicitly: "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."
Here is what breaks most often:
Error states. Red borders and text on form fields. If the only indication of an error is a red color, users with protanopia or deuteranopia may not see it. Add an icon (a warning triangle, an exclamation mark), change the border style (dashed, thicker), or add error text.
/* Bad: color only */
.field-error {
border-color: #e74c3c;
}
/* Better: color + icon + text + border change */
.field-error {
border-color: #e74c3c;
border-width: 2px;
border-style: dashed;
}
.field-error::after {
content: "This field has an error";
color: #e74c3c;
font-size: 0.875rem;
}
Status indicators. Green for success, yellow for warning, red for error. This traffic-light pattern is intuitive for trichromats but meaningless for someone who sees all three as the same muddy brown. Add text labels or distinct shapes (checkmark, triangle, circle with X).
Charts and data visualizations. A line chart with red, green, and orange lines is illegible with protanopia. Use patterns (solid, dashed, dotted), labels directly on lines, or a color palette designed for color blindness.
Links that differ from surrounding text only by color. WCAG recommends a 3:1 contrast ratio between link color and surrounding text, plus a non-color indicator (underline, bold, border-bottom) on hover or always.
Choosing safe color palettes
The safest approach is to select colors that remain distinguishable under all common types of color vision deficiency. Some principles:
Vary lightness, not just hue. Even with color vision deficiency, the ability to distinguish light from dark is unaffected. If your "good" color is a bright, saturated green and your "bad" color is a dark red, the lightness difference alone provides a signal.
Blue and orange work well. This combination maintains high contrast under protanopia and deuteranopia because it varies on the blue-yellow axis, which is unaffected by red-green deficiency.
Avoid red-green pairings without additional cues. If you must use red and green (like a diff viewer), add background patterns, icons, or +/- symbols.
Use a simulation tool. The only reliable way to know if your design works is to see it through the lens of different color vision types. Browser dev tools (Chrome, Firefox) include built-in color blindness simulation. Figma has plugins for it.
/*
* A color system that works for most color vision types:
* - Information: #2563EB (blue) -- visible to all types
* - Success: #059669 (dark green) -- distinguishable by lightness
* - Warning: #D97706 (amber) -- on the orange-yellow axis
* - Error: #DC2626 (red) -- always paired with icon or text
*/
Testing your interfaces
Use browser simulation. Chrome DevTools > Rendering > Emulate vision deficiencies. Firefox has a similar feature in its Accessibility tab. These apply a real-time color transformation to the rendered page, letting you interact with your UI as a color-blind user would.
Test with real users. Simulation approximates the experience but does not capture the full context. If possible, include people with color vision deficiency in your user testing.
Automated testing catches some issues. Tools like axe-core flag cases where color is used as the sole differentiator, though they cannot catch every case because the semantic meaning of color is context-dependent.
Review your design in grayscale. Converting your interface to grayscale is a quick and brutal test. If every piece of information is still distinguishable in grayscale, it will work for all types of color vision deficiency. This does not mean your design needs to look good in grayscale -- just that the information hierarchy survives.
When I am checking designs, I use the color blindness simulator at zovo.one/free-tools/color-blindness-simulator to preview how images and interfaces appear under different types of color vision deficiency.
Designing for color blindness is not about removing color from your interface. Color is a powerful design tool. It is about making sure color is redundant -- that every piece of information color conveys is also conveyed by shape, text, position, or some other non-chromatic signal. When you build that redundancy in, your interface works better for everyone, including people with normal vision who are using their phone in bright sunlight.
I'm Michael Lip. I build free developer tools at zovo.one. 350+ tools, all private, all free.
Top comments (0)