Figma adds Dynamic Color Tokens to Design Systems for Color Vision Deficiency

Design · 3 min read

Figma's Dynamic Color Tokens let teams express colors relative to each other—contrast, hue distance, and luminance relationships—so the design system can automatically generate accessible variants for protanopia, deuteranopia, and tritanopia. Designers can lock critical contrast relationships (like text-to-background) while allowing non-critical accents to shift, keeping brand integrity intact.

The feature integrates with Figma's plugins ecosystem and can export token transformation rules as CSS custom properties and JSON schemas that downstream engineering teams can consume. Figma also added a preview mode that simulates several types of color vision deficiency in tandem with suggested adjustments, and a report showing which components would fail AA/AAA thresholds under each simulation.

Design system leads welcomed the change as a practical step toward reducing the manual work of maintaining multiple palettes. Some accessibility advocates urged Figma to pair visual simulation with guidance on testing with actual users who have color vision differences, reiterating that simulations are helpful but not definitive.