skills.rest
Community-Access
Community-AccessOFFICIAL
Explore all skills by this author →
GitHub

design-system

Validate design system tokens for WCAG AA/AAA contrast, focus, and touch target compliance.

387|42|Updated Feb 21, 2026
Search Tags:#accessibility#design system#design tokens#wcag#ui components#contrast ratio#focus indicator
One-click install
npx skills add https://github.com/Community-Access/accessibility-agents --skill design-system-community-access
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/Community-Access/accessibility-agents/tree/main/.gemini/extensions/a11y-agents/skills/design-system
Command: npx skills add https://github.com/Community-Access/accessibility-agents --skill design-system-community-access

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the critical accessibility issue of ensuring design tokens (colors, spacing, focus indicators) meet WCAG AA/AAA contrast and size requirements before they are implemented in UI, preventing costly redesigns and inaccessible products.

Core Features & Use Cases

  • Contrast Ratio Computation: Calculates contrast between color tokens using precise formulas.
  • Framework Token Paths: Provides reference for common design token structures in Tailwind, MUI, Chakra, and Style Dictionary.
  • Focus Appearance Validation: Audits focus ring size, contrast, and visibility against WCAG 2.4.13.
  • Spacing Token Audits: Checks touch target sizes for WCAG 2.5.5/2.5.8 compliance.
  • Use Case: Before merging a new color palette into your design system, use this Skill to verify that all text-on-background and UI component color pairs meet at least 4.5:1 and 3:1 contrast ratios respectively.

Quick Start

Validate the contrast ratio between the color tokens '#6B7280' and '#FFFFFF' using the design-system skill.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I check if my design tokens meet WCAG contrast requirements?▼

To validate WCAG contrast for design tokens, compute the contrast ratios between color token pairs like text and backgrounds. This ensures text meets 4.5:1 and UI components meet 3:1 contrast ratios for AA compliance before implementation.

Can I validate focus indicator appearance against WCAG 2.4.13?▼

Yes, you can validate focus indicator appearance against WCAG 2.4.13 by auditing focus ring size, contrast, and visibility. This ensures keyboard navigation visibility meets accessibility standards before deploying UI components.

Does this design token validation work with Tailwind and MUI?▼

Yes, design token validation works with Tailwind, MUI, Chakra, and Style Dictionary. It provides reference paths for common token structures across these frameworks to enforce accessibility standards consistently.

What is the minimum touch target spacing required for WCAG compliance?▼

WCAG compliance for touch target spacing is defined by standards 2.5.5 and 2.5.8. You can audit spacing tokens to verify that touch target sizes meet these specific accessibility dimensions and requirements.

Why do my color tokens fail WCAG AA contrast checks?▼

Color tokens fail WCAG AA contrast checks when the computed contrast ratio between foreground and background falls below 4.5:1 for text or 3:1 for UI components. Validating tokens before merging palettes prevents these failures.

Related Skills

Explore More Design & Creative Skills→
Community-AccessCommunity-Access
387

Design System Auditor

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

Official
Advanced
josephblaisjosephblais

design-system

Validate design system tokens against WCAG AA/AAA accessibility standards.

Community
Advanced
ryan0122ryan0122

design-system

Validate design system tokens against WCAG AA/AAA contrast and focus requirements.

Community
Advanced
AerisG222AerisG222

android-accessibility

Audit Android Jetpack Compose UI for WCAG accessibility compliance.

Community
Basic