WCAG 3.1 draft proposes component-level contrast and motion rules for design systems

Tech · 6 min read

WCAG 3.1 shifts some guidance from page-level heuristics to component-level criteria, recognizing that many apps now assemble UI from shared components. The draft suggests standardized minimum contrast ratios for interactive controls, separators, and iconography in their default, focus, and disabled states, and defines exceptions for semantic color tokens.

A second key change focuses on motion: instead of a binary "reduce motion" setting, the draft outlines layered motion controls (entry/exit, continuous, and feedback) with thresholds and guidance for synchronous haptics and audio cues. It also recommends exposing motion tokens through design systems so products can honor user preferences consistently.

Accessibility engineers welcome the draft for aligning WCAG with design system workflows, but implementation questions remain — notably how to test component-level criteria in complex compositions and how to manage legacy content. Tool vendors and major platform teams have set up working groups to produce reference test suites and compliance adapters.