Design Systems: Introducing Contrast Tokens to Bridge WCAG 2.2 and WCAG 3

Design · 5 min read

Design systems have long exposed color as tokens, but many still treat contrast as an emergent property engineered per component. The contrast token idea flips that: store accessible contrast pairs and contrast ratios as design tokens alongside semantic colors so components can opt into a guaranteed contrast level rather than selecting raw colors.

Practically this means tokens like 'foreground-on-surface-high-contrast' and 'foreground-on-surface-minimum' that map to different color pairs and associated WCAG ratio metadata. When a component requests the 'high-contrast' token it receives both the readable color and a machine-readable ratio value, enabling runtime checks and theme transforms without manual recomputation. Early adopters using Figma tokens and Storybook theming say it reduces color regression bugs during brand refreshes.

Implementation patterns matter: teams should store both the accessible color and the intended semantic role, keep transformation utilities for alpha blending, and run automated contrast tests as part of the build. This approach also eases the transition to WCAG 3, since tokens can carry algorithmic metadata used by newer conformance models while preserving backward compatibility.