Design System Auditor

To audit design tokens for WCAG color contrast compliance, provide your token definitions in formats like Style Dictionary, CSS variables, Tailwind, Material UI, or Chakra UI. The system evaluates token values against background colors to validate AA and AAA contrast ratios for text and UI components.

The minimum focus ring size required for accessibility validation is 2px. The system checks focus appearance tokens to ensure a sufficient contrast change of at least 3:1 against the background and verifies that focus styles are not removed from interactive elements.

Yes, this accessibility audit works with Tailwind CSS and Material UI themes, alongside Style Dictionary, CSS custom properties, and Chakra UI. It parses these formats to validate color contrast, focus appearance, spacing, and motion tokens against WCAG standards.

To check touch target sizes and spacing in a design system, the system analyzes your spacing tokens to ensure interactive elements meet the minimum 24x24px size requirement and have adequate surrounding spacing for accessible interaction.

Yes, you can validate design system motion tokens for reduced motion compliance. The system verifies that your animation and transition tokens adhere to prefers-reduced-motion principles to prevent accessibility issues for users with motion sensitivities.

The best way to prevent poor color contrast from reaching deployed UI is to audit design tokens before merging new palettes. This proactively identifies insufficient contrast ratios and focus indicator issues directly within the token definitions.