Design System Auditor

Audit design system tokens for WCAG AA and AAA accessibility compliance.

387|42|Updated Feb 21, 2026

Search Tags:#accessibility #WCAG #design system #design tokens #color contrast #touch targets #focus styles

Ready to run

npx skills add https://github.com/Community-Access/accessibility-agents --skill design-system-auditor-community-access

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Design System Auditor
Source: https://github.com/Community-Access/accessibility-agents/tree/main/.gemini/extensions/a11y-agents/skills/design-system-auditor
Command: npx skills add https://github.com/Community-Access/accessibility-agents --skill design-system-auditor-community-access

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill proactively identifies and rectifies accessibility issues like poor color contrast, insufficient focus indicators, and inadequate touch target sizes directly within design tokens, preventing them from reaching deployed UI.

Core Features & Use Cases

Color Contrast Auditing: Validates WCAG AA/AAA contrast ratios for text, UI components, and focus rings against background colors. Supports various token formats (Style Dictionary, CSS variables, Tailwind, MUI, Chakra UI).
Focus Appearance Validation: Checks for minimum focus ring size (>= 2px), sufficient contrast change (>= 3:1), and ensures focus styles are not removed.
Spacing & Touch Target Analysis: Ensures interactive elements meet minimum size requirements (24x24px) and have adequate spacing.
Motion Token Compliance: Verifies adherence to prefers-reduced-motion principles.
Use Case: Before merging a new color palette into your design system, run this Skill to ensure all text and background combinations meet WCAG AA contrast standards, preventing costly redesigns later.

Quick Start

Audit the color tokens in the attached 'tokens.json' file for WCAG AA compliance.

Frequently Asked Questions about Design System Auditor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I audit design tokens for WCAG color contrast compliance?▼

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.

What is the minimum focus ring size required for accessibility validation?▼

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.

Does this accessibility audit work with Tailwind CSS and Material UI themes?▼

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.

How do I check touch target sizes and spacing in a design system?▼

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.

Can I validate design system motion tokens for reduced motion compliance?▼

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.

What is the best way to prevent poor color contrast from reaching deployed UI?▼

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.