Figma Adds Built-In Accessibility Tokens and Real-Time Contrast Engine to Design Systems

Design · 5 min read

Figma’s accessibility tokens aim to solve the friction designers face when applying consistent, accessible styles across components. Tokens include semantic color roles (e.g., text/primary, bg/surface-elevated), motion-reduction flags, spacing tokens tuned for touch targets, and a11y-focused type scale presets that map to WCAG 2.2 levels. Teams can apply tokens at the file, library, or component level and lock them for governance.

The on-canvas contrast engine provides live pass/fail indicators and suggested accessible swaps. It evaluates contrast for text sizes, icons, and UI components, and shows how changes affect different token variants across light and dark modes. The engine also simulates common vision conditions such as Deuteranopia and low vision magnification, letting designers preview failures without leaving the editor.

Importantly for design systems, Figma’s tokens export supports a “policy” file that enforces which tokens are allowed for certain component roles. Developers can pull tokens via a new REST endpoint that supports semantic names rather than raw color values, reducing translation errors. Figma says the update will be generally available to paid teams next month and includes migration tooling for popular community system templates.