Color Contrast Auditor

Checks your color contrast against WCAG 2.1 requirements and tells you exactly what's failing and how to fix it. Give it screenshots, CSS files, or Tailwind classes and it'll calculate contrast ratios, flag anything under 4.5:1 for normal text or 3:1 for large text, and suggest replacement colors that pass. The source includes the full luminance calculation formula and a solid reference of common failures like gray text syndrome and light text on light backgrounds. Honestly most useful during design system audits or right before launch when you need to catch accessibility issues fast. Pairs well with web-design-expert if you need to implement the fixes across a whole site.

skills.sh installs: 144
GitHub stars: 113
last updated: Jun 3, 2026

View on GitHub

Install

$ npx -y skills add erichowens/some_claude_skills --skill color-contrast-auditor --agent claude-code

Installs into .claude/skills of the current project.

Files

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