Design System

This is a reference sheet for validating design tokens against WCAG contrast requirements before they ship. It walks through the actual luminance math, gives you copy-paste JavaScript for checking ratios, and lists the exact config paths where tokens live in Tailwind, shadcn, MUI, and Chakra. The framework sections call out common failures like MUI's warning.main at 2.94:1 and Chakra's gray.400 at 2.85:1. It also covers focus ring requirements from WCAG 2.4.13, which need 3:1 contrast and at least 2px width. Use this when you're auditing a design system at the token level, not when you're fixing individual UI bugs. The HSL-to-hex converter is there because shadcn stores everything as HSL triplets without the wrapper function.

Install to Claude Code

npx -y skills add community-access/accessibility-agents --skill design-system --agent claude-code