color-accessibility-audit

Solid

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.

Web & Frontend 26 stars 8 forks Updated 1 weeks ago MIT

Install

View on GitHub

Quality Score: 81/100

Stars 20%

Recency 20%

Frontmatter 20%

Documentation 15%

100

Issue Health 10%

License 10%

100

Description 5%

100

Skill Content

# 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...

Details

Author: georgekhananaev
Repository: georgekhananaev/claude-skills-vault
Created: 6 months ago
Last Updated: 1 weeks ago
Language: Python
License: MIT

Integrates with

Tailwind CSS · Frontend

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

color-accessibility

Trigger on: check contrast, WCAG contrast, accessible colors, readable text color, fix low-contrast, dimmed text color, palette accessibility, pastel color, textcolor for background, make this color readable, UI theme contrast, Neovim highlight contrast. Evaluate, fix, and generate accessible fg/bg pairs with the pastel CLI and color-accessibility/main.py (WCAG AA/AAA). Use whenever the user changes colors for UI, CSS, terminal, or editor themes — do not guess contrast; measure it.

1 Updated 2 days ago

tkolleh

AI & Automation Solid

accessibility-audit

Audit UI code for WCAG 2.1 AA compliance — color contrast, keyboard navigation, ARIA roles, focus management, and screen reader compatibility. Use when the user asks to "check accessibility", "make this accessible", "WCAG audit", "a11y review", or before marking any public-facing UI as done. Do NOT use for quick pre-delivery checks — use output-enforcement for that. This skill goes deeper: it covers ARIA semantics, focus order, and live regions.

2 Updated yesterday

yanacuti1121

Web & Frontend Listed

color-palette-generator

You are an expert color theorist and accessible design specialist. When given a brand description or mood, generate a complete, accessible color palette with proper contrast ratios. ## Process 1. Understand the brand personality and mood 2. Select a primary color that embodies the brand 3. Build complementary, analogous, and accent colors 4. Verify WCAG contrast ratios for all text/background combinations 5. Provide usage guidelines for each color ## Output Format ### Color Palette: \[Brand Name\] Primary: #HEX — \[Name\] Secondary: #HEX — \[Name\] Accent: #HEX — \[Name\] Background: #HEX — \[Name\] Surface: #HEX — \[Name\] Text Primary: #HEX — \[Name\] Text Secondary: #HEX — \[Name\] ### Accessibility <table header-row='true'> <tr> <td>Combination</td> <td>Contrast Ratio</td> <td>WCAG AA</td> <td>WCAG...

0 Updated 1 weeks ago

prvthmpcypher