Color blindness: secondary signals are non-optional
Red-green color blindness (deuteranopia, protanopia, and related variants) affects approximately 8% of people with XY genetics — a significant population at scale. These users cannot reliably distinguish red from green hues. Any interface that uses color as the only distinguishing signal between two states is inaccessible to this group: red error vs green success, a green 'available' vs red 'unavailable' indicator, a chart legend using red and green lines. The fix is always a secondary signal: an icon (✕ for error, ✓ for success), a text label, a pattern fill on a chart area, or a position difference (error message appears below the field, success message at the top). Color becomes a reinforcing signal for information already conveyed another way.
Motion and color accessibility
Animated color changes interact with accessibility in two distinct ways. First, the WCAG photosensitive epilepsy threshold: content that flashes more than 3 times per second, or that contains high-contrast alternations across a large screen area, can trigger seizures in photosensitive users. Second, and more broadly, pulsing, oscillating, or continuously animating color elements — a red notification badge that pulses, an animated gradient background — can cause discomfort, dizziness, or distraction for users with vestibular disorders, migraines, or attention-related conditions. The CSS `prefers-reduced-motion: reduce` media query lets users opt out of motion. Best practice: under `prefers-reduced-motion: reduce`, also reduce or eliminate color animation (not just position/scale animation), replacing animated indicators with static color differences.
Focus state color: the neglected accessibility problem
Keyboard navigation depends on visible focus states. The widespread CSS pattern `*:focus { outline: none; }` — added to suppress browser default focus rings that designers find aesthetically unwelcome — eliminates keyboard accessibility for the interface. Custom focus styles are the solution, but they carry their own color requirements: WCAG 2.2 Success Criterion 2.4.11 (Focus Appearance) requires that focus indicators have 3:1 contrast against adjacent colors and are at minimum 2 CSS pixels thick. One common failure: a blue focus ring that is clearly visible on a white background disappears against a blue sidebar or a dark header. Test focus visibility across every background context in the design system, not just the most common white surface.
Simulation tools and real-user testing
Browser extensions and design tool plugins can simulate various color vision deficiency modes (deuteranopia, protanopia, tritanopia, achromatopsia) and provide a useful first-pass check. But simulation has limits: it approximates the experience without replicating the adaptive strategies that color-blind users develop over time for navigating interfaces. Real-user testing with color-blind participants catches the actual navigation breakdowns that simulation misses — places where a color-blind user cannot distinguish two states despite the simulation suggesting they're different enough. For high-stakes UI (medical software, financial tools, emergency systems), this level of testing is essential. For most consumer products, simulation combined with the secondary-signal design pattern provides a solid foundation.
