skills.rest
curiositech
curiositechOFFICIAL
Explore all skills by this author →
WebsiteGitHub

color-contrast-auditor

Audit color contrast against WCAG 2.1 and suggest accessible hex alternatives.

181|30|Updated Nov 16, 2025
Search Tags:#design#accessibility#a11y#wcag#contrast#color
One-click install
npx skills add https://github.com/curiositech/some_claude_skills --skill color-contrast-auditor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-contrast-auditor
Source: https://github.com/curiositech/some_claude_skills/tree/main/.claude/skills/color-contrast-auditor
Command: npx skills add https://github.com/curiositech/some_claude_skills --skill color-contrast-auditor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill identifies and fixes color contrast violations in designs and code, ensuring text is readable and meets WCAG accessibility standards.

Core Features & Use Cases

  • WCAG Compliance: Audits color combinations against WCAG 2.1 guidelines (AA and AAA).
  • Automated Fixes: Suggests accessible alternative color values.
  • Color Blindness Simulation: Helps identify issues for users with various forms of color vision deficiency.
  • Use Case: Upload a screenshot of a website or provide CSS code, and the Skill will report any contrast issues and offer specific hex codes to resolve them.

Quick Start

Use the color-contrast-auditor skill to check the contrast of the text color #FF0000 on a background color #FFFFFF.

Frequently Asked Questions about color-contrast-auditor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if my color contrast meets WCAG 2.1 accessibility standards?▼

To check WCAG compliance, foreground and background color pairs are analyzed using mathematical contrast ratio formulas to verify they meet AA or AAA accessibility guidelines for readable digital interfaces.

Can I audit color contrast using CSS hex codes or a website screenshot?▼

You can audit color contrast by providing CSS code or uploading a screenshot of a website, which the system analyzes to report WCAG violations and suggest specific accessible alternative hex codes.

What is color blindness simulation in accessibility auditing?▼

Color blindness simulation is an accessibility auditing technique that evaluates foreground and background color combinations to identify visibility issues for users with various forms of color vision deficiency.

How do I fix color combinations that fail WCAG contrast requirements?▼

To fix failed WCAG contrast requirements, the auditor provides actionable alternative color values and specific hex codes that adjust your original palette to achieve accessible contrast ratios.

Does this accessibility auditor support both AA and AAA WCAG levels?▼

The accessibility auditor supports both AA and AAA WCAG 2.1 compliance levels, evaluating foreground and background color pairs against the respective contrast ratio thresholds for each standard.

Related Skills

Explore More Design & Creative Skills→
ngochuy13ngochuy13

color-palette

Generate accessible brand and UI color palettes with WCAG contrast ratios.

Community
Advanced
dylantarredylantarre
38

color-contrast

Validate color combinations against WCAG 2.1 contrast requirements and generate accessible pairings.

Community
Basic
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate
Anuj23105Anuj23105
1

accessibility-auditing

Tests web page and UI component accessibility compliance with WCAG 2.1 AA/AAA standards.

Community
Advanced