What problem does it solve? UI colors often fail WCAG contrast requirements, making text and components unreadable for users with low vision. This Skill scans your code files, calculates exact contrast ratios, identifies violations, and suggests accessible color replacements that preserve your design theme. ## Core Features & Use Cases - WCAG Compliance Analysis: Calculates contrast ratios and checks them against WCAG 1.4.3 (text) and 1.4.11 (UI components) requirements for normal text, large text, and component boundaries. - Accessible Color Suggestions: Generates compliant alternative hex values that preserve the original hue while adjusting lightness to meet target ratios. - Scoped File Analysis: Analyzes only the files or directories you specify, while searching the wider codebase for color definitions, CSS variables, and design tokens. - Use Case: Point it at a button component file and receive a report showing each failing color pair, its current ratio, the required ratio, and a specific replacement hex value with its new compliant ratio. ## Quick Start Check the color contrast in src/components/PrimaryButton.tsx for WCAG AA compliance and suggest fixes for any violations.
