EquiTone: a new color-token standard for high-contrast inclusive design systems

Design · 3 min read

EquiTone approaches color tokens as behavioral primitives rather than fixed swatches: each token carries a recommended minimum text size, contrast target, and tone-adjustment algorithm for different displays. The standard includes an accessible contrast matrix, mapping token combinations to expected readability at small sizes and under digital glare conditions common on mobile devices.

The specification offers reference implementations for CSS custom properties, design-tool variables, and runtime JS that can switch tokens based on user accessibility settings or environmental cues like ambient brightness. Early integrations include plugins for Figma and Sketch and adapters for Sass and design-token managers used by enterprise design systems.

Design leads behind EquiTone say the goal is to make accessible color the default rather than an afterthought, reducing the number of manual contrast overrides in components. They also released a testing kit with color-blindness simulators, low-vision overlays, and photographic contrast validations to help designers evaluate tokens in photographic and textured backgrounds.