Agent skill · design visual · erichowens
color-contrast-auditor
Detects and fixes color contrast violations using WCAG 2.1 guidelines and perceptual analysis. Expert in contrast ratio calculation, color blindness simulation, and providing accessible alternatives.
Why this skill is useful
Provides specific calculations and guidelines for color contrast that the AI wouldn't reliably generate on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Color Contrast Auditor Detects color contrast violations that make text unreadable and provides WCAG-compliant fixes. Uses both mathematical contrast ratio analysis and perceptual evaluation via vision capabilities. When to Use Activate on: Screenshots of websites/apps with suspected contrast issues CSS/Tailwind files for color audit "I can't read this" or "this is hard to see" Pre-launch accessibility checks Design system color validation NOT for: Choosing brand colors (use web-design-expert) Color harmony/aesthetics (use color-theory-palette-harmony-expert) Non-visual accessibility (screen readers, keyboard nav) --- WCAG 2.1 Contrast Requirements Minimum Ratios (AA - Required) Text Type Minimum Ratio Example ----------- --------------- --------- Normal text (<24px, <18.66px bold) 4.5:1 Body copy, labels, buttons Large text (≥24px or ≥18.66px bold) 3:1 Headlines, hero text UI components (borders, icons) 3:1 Form inputs, icons, focus rings Graphical objects 3:1 Charts, infographics Enhanced Ratios (AAA - Recommended) Text Type Minimum Ratio ----------- --------------- Normal text 7:1 Large text 4.5:1 Non-Text Elements Element Requirement --------- ------------- Focus indicators 3:1 against adjacent colors Form field borders 3:1 against background Icons conveying meaning 3:1 against background Disabled elements No requirement (but consider UX) --- Contrast Ratio Formula Calculating Relative Luminance --- Common Failing Patterns 1. Light Text on Light Background 2. Gray Text Syndrome 3. Saturated Colors That Look Bright 4. Trendy Low-Contrast Aesthetic 5. Placeholder Text Too Light 6. Gradient Backgrounds --- Audit Methodology Step 1: Visual Scan (Screenshot Analysis) When given a screenshot, identify: 1. Text elements by size: Headlines (large text → 3:1 required) Body copy (normal text → 4.5:1 required) UI labels (buttons, links → 4.5:1) Captions/fine print (4.5:1 required) 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/color-contrast-auditor