accessibility-review

What problem does it solve?

Lack of accessibility compliance (WCAG 2.1 AA/AAA) can exclude users, lead to legal issues, and degrade user experience. This Skill conducts a thorough audit of your design system's accessibility, identifying critical issues and providing actionable fixes to build a more inclusive UI.

Core Features & Use Cases

• Contrast Ratio Validation: Checks text and UI component contrast against WCAG AA/AAA and APCA standards, flagging insufficient contrast.
• State Differentiation: Verifies that interactive states (e.g., base, hover, focus) have distinct visual feedback, preventing confusion.
• Dark Mode Rules: Ensures hover states are darker in dark mode and text adapts correctly to maintain readability.
• Focus Management: Reviews focus indicator visibility, focus trap implementation in overlays, and keyboard navigation.
• Token Architecture Analysis: Evaluates color token structure for accessibility best practices, identifying potential systemic issues.
• Use Case: Audit all interactive components in your design system to ensure they meet WCAG AA contrast requirements, have visible focus indicators, and correctly differentiate states for keyboard and mouse users.

Quick Start

Use the accessibility-review skill for a complete WCAG compliance audit of the entire design system.