Figma launches Accessible Tokens to automate color contrast in design systems

Design · 5 min read

Figma unveiled Accessible Tokens, a feature that extends design tokens with contrast metadata and runtime checks that flag token pairs failing WCAG AA and AAA thresholds. Designers can tag tokens with usage intent such as text, UI background, or decorative, and Figma will surface recommended variants that meet the declared target level.

The system supports token inheritance so component libraries can offer accessible defaults while allowing local overrides with immediate feedback. Teams can export tokens to CSS, JSON, or platform-specific formats with automated contrast-preserving transformations applied at build time.

Early partners report faster design reviews and fewer accessibility regressions in engineering handoffs, since the token layer now enforces intent rather than relying on per-component ad hoc fixes. Figma also published a migration guide and a plugin API so third-party design systems can adopt Accessible Tokens without rewriting their entire token structure.