Color Blindness Design

Ensuring information is conveyed through means beyond color alone for color-deficient users.

stellae.design

Accessibility

Color blindness design ensures that people with color vision deficiency (CVD) can perceive all essential information. The most common types are protanopia/protanomaly (red deficiency, ~6% of males), deuteranopia/deuteranomaly (green deficiency, ~5%), and tritanopia (blue-yellow, rare). WCAG 2.1 SC 1.4.1 (Use of Color, Level A) mandates that color is not the sole means of conveying information, indicating action, prompting response, or distinguishing a visual element. This applies to form validation, charts, status indicators, links, and any meaningful color coding. Ensuring adequate contrast (SC 1.4.3) also helps, as many CVD users perceive reduced contrast between commonly confused colors.

Why It Matters

Approximately 8% of men and 0.5% of women have some form of color vision deficiency, meaning any interface that relies on color alone to convey information fails millions of users. Color blindness affects ability to distinguish reds from greens, blues from yellows, or perceive color saturation differences — all common UI patterns. Designing for color blindness is not just an accessibility requirement; it produces clearer, more robust visual communication for all users including those viewing screens in bright sunlight or on poorly calibrated monitors.

Real-World Examples

Trello's Color-Blind Friendly Mode

Trello offers a color-blind friendly mode that adds texture patterns to label colors so users can distinguish categories without relying on hue alone. This feature layers visual encoding — pattern on top of color — ensuring that labels remain meaningful regardless of color perception. The implementation is a toggle in accessibility settings, giving users control without altering the default experience.

GitHub Diff View with Icons

GitHub's code diff view pairs red and green background colors with minus and plus symbols to indicate removed and added lines. Even if a user cannot distinguish the background colors, the text symbols clearly communicate the change type. This redundant encoding makes the core functionality accessible without requiring any special mode or setting.

Counter-example

Dashboard Using Only Red and Green for KPIs

A business analytics dashboard displays all key performance indicators using only red for negative trends and green for positive trends with no accompanying arrows, labels, or numerical indicators. Users with red-green color blindness see both states as virtually identical muddy tones. Critical business decisions get made on misread data because the interface provided no redundant encoding.

Role-Specific Guidance

Common Mistakes

• The most widespread mistake is assuming color blindness only affects red-green perception — tritanopia (blue-yellow) and achromatopsia (total color blindness) also need consideration in palette design. Teams frequently test accessibility only against one type of color vision deficiency and miss others entirely. Another common error is adding a color-blind mode as a separate experience rather than designing the default interface to be accessible, which creates maintenance burden and signals that accessibility is an afterthought.