Color Accessibility Beyond WCAG Contrast Ratios

WCAG contrast ratios have become the default accessibility metric for color in digital design — and they represent real progress. Products that pass WCAG AA contrast requirements are meaningfully more legible than those that don't. But the contrast ratio has become a checkbox, a compliance measure that, once satisfied, allows designers to consider the accessibility job done. The actual accessibility job is considerably larger. Color blindness affects roughly 8% of men and 0.5% of women with XY/XX genetics — a substantial user population. The most common form, red-green color blindness (deuteranopia/protanopia), collapses the distinction between red and green hues while leaving blue-yellow discrimination largely intact. This means any UI that uses red vs green as the only distinguishing factor — red error vs green success, a red drop vs green rise in a chart, red unavailable vs green available in a calendar — is inaccessible to this population. The fix is adding a secondary signal: shape, icon, label, or pattern, in addition to color. The color difference becomes reinforcement of information conveyed another way, not the sole carrier. Motion and color interact in accessibility contexts. WCAG 2.3 (Seizures and Physical Reactions) addresses flashing content, but the broader accessibility concern is that color changes accompanying motion can be disorienting for users with vestibular disorders, photosensitive epilepsy, or attention-related conditions. A color-and-motion combination that works for most users — a pulsing red notification indicator, an animated gradient background — can cause physical discomfort for a meaningful user minority. `prefers-reduced-motion` media query lets designers offer a static alternative; reducing or removing color animation in reduced-motion mode is best practice. Focus state accessibility is a color problem that frequently gets overlooked. Browser default focus rings (blue outline in Chrome, black dotted outline in Firefox) are often hidden by `outline: none` CSS added to suppress what designers view as an aesthetic blemish. This makes keyboard navigation impossible for users who rely on it. Custom focus states should have at least 3:1 contrast against adjacent colors per WCAG 2.2, should be at minimum 2px thick, and should be visible across all the background contexts the focused element might appear on. A single focus color that works on white may disappear on a dark sidebar. Test focus visibility across all surface contexts in the design system.