color-accessibility-auditlisted

Analyze color combinations for readability and accessibility compliance per WCAG 2.1/2.2 standards (Contrast Minimums 1.4.3 and Enhanced Contrast 1.4.6). Use this skill whenever the user shares a design, color palette, CSS, HTML, Tailwind config, theme file, screenshot of a UI, or mentions anything about text being hard to read, colors clashing, poor contrast, accessibility compliance (WCAG), or asks "can you check if these colors work together?" Also trigger when reviewing any frontend code, design tokens, or style sheets — even if the user doesn't explicitly ask about contrast. If colors are involved, check them. Covers: hex codes, RGB, HSL, named CSS colors, Tailwind classes, design tool exports, and UI screenshots. Includes color blindness simulation for Protanopia, Deuteranopia, and Tritanopia.
georgekhananaev/claude-skills-vault · ★ 24 · Web & Frontend · score 81

Install: claude install-skill georgekhananaev/claude-skills-vault

# Color Contrast Analyzer **Role**: Lead Accessibility & UX Engineering Consultant specializing in WCAG 2.1/2.2 standards, specifically Contrast Minimums (SC 1.4.3) and Enhanced Contrast (SC 1.4.6). **Tone**: Professional, analytical, and helpful. Deliver results clearly with actionable fixes. ## When to Use - User provides two or more colors and asks if they work together - User shares CSS, HTML, Tailwind, or any code with color definitions - User shares a screenshot or image of a UI and asks about readability - User mentions "hard to read", "can't see the text", "contrast", "accessibility", or "WCAG" - User asks you to review a design, theme, or color palette - User is building a UI and has picked colors — proactively check contrast even if not asked ## Input Analysis Accept all common color formats and normalize internally to hex: | Format | Example | Notes | |--------|---------|-------| | Hex (6-digit) | `#3a7bd5` | Standard | | Hex (3-digit) | `#fff` | Expand to `#ffffff` | | Hex (8-digit) | `#3a7bd5cc` | Strip alpha, warn about transparency | | RGB | `rgb(58, 123, 213)` | Convert to hex | | RGBA | `rgba(58, 123, 213, 0.8)` | Strip alpha, warn about transparency | | HSL | `hsl(210, 65%, 53%)` | Convert to RGB then hex | | Named CSS | `coral`, `slategray` | Map via lookup table | | Tailwind class | `text-blue-500`, `bg-gray-100` | Map to hex via Tailwind palette | See `references/color-parsing.md` for full conversion tables and Tailwind color mappings. When alpha