design-system

Validate design tokens for WCAG color contrast compliance by running a validation engine that computes contrast ratios across your token set and UI components. The engine evaluates color pairs against explicit reference rules to enforce AA and AAA accessibility standards before deployment.

Check focus ring compliance against WCAG 2.4.13 guidelines by validating focus appearance using the skill's reference rules. The validation engine audits focus ring tokens to ensure adherence to accessibility standards and prevent focus state violations before UI deployment.

Design token validation works with Tailwind, MUI, Chakra, and shadcn token paths by providing framework-specific token path references. This standardizes token usage across different frameworks and ensures consistent accessibility validation regardless of the UI library.

The best way to audit motion and spacing tokens for touch-target compliance is to run validation checks that evaluate spacing targets and motion token behavior. This ensures consistent motion patterns and verifies that spacing meets accessibility touch-target requirements.

Validate design tokens before integrating them into a live UI to reduce rework and accessibility defects. Early validation catches color contrast failures, focus ring violations, and inconsistent token paths before they propagate to deployed components, saving development time.

Limitations when validating design system tokens for accessibility include dependency on accurate token definitions and framework-specific path configurations. The validation focuses on WCAG AA and AAA standards, meaning custom accessibility requirements beyond these guidelines may need additional manual evaluation.