A design system that doesn't address accessibility is a system that scales exclusion. Every component built on inaccessible foundations multiplies the problem. The right time to solve it is at the token layer — before a single component is written.
Tokens as Contracts
Design tokens are not just a way to share values between design and engineering. They are contracts. A token named --color-text-primary makes a promise: this color is legible as primary text. If the token system enforces contrast requirements, every component that uses it inherits the guarantee.
This means defining your token set not by visual appearance, but by semantic role:
const tokens = {
// These pass 4.5:1 against surface-primary
'text-primary': '#111111',
'text-secondary': '#444444',
// This passes 3:1 — large text or UI components only
'text-tertiary': '#666666',
// Never use for text — decorative only
'text-disabled': '#999999',
} as const;
Spacing and Touch Targets
WCAG 2.5.5 requires interactive elements to be at least 44×44 CSS pixels. Most design systems define spacing tokens but don't enforce minimum touch target sizes.
Add a touch-target token:
--size-touch-target: 44px;
And apply it as a minimum to all interactive components. On desktop where mouse precision is higher, visual size can be smaller — use padding to meet the minimum without changing appearance.
Motion Tokens
Define animation durations and easing as tokens, and pair them with a motion preference check:
:root {
--duration-fast: 150ms;
--duration-normal: 300ms;
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--duration-fast: 0ms;
--duration-normal: 0ms;
}
}
Every component that uses these tokens automatically respects the user's motion preference. No per-component media queries.