Wcag Audit Perceivable Color Contrast
Analyzes webpage color contrast ratios against WCAG guidelines to identify accessibility issues for users with visual impairments.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add wcag-audit-perceivable-color-contrast npx -- -y @trustedskills/wcag-audit-perceivable-color-contrast
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"wcag-audit-perceivable-color-contrast": {
"command": "npx",
"args": [
"-y",
"@trustedskills/wcag-audit-perceivable-color-contrast"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill assesses the color contrast ratios between text and background colors on a webpage, ensuring compliance with Web Content Accessibility Guidelines (WCAG). It specifically focuses on the "Perceivable" success criteria related to color contrast. The tool helps identify areas where insufficient contrast may hinder readability for users with visual impairments.
When to use it
- Website Audits: Evaluate existing websites or web applications for WCAG compliance during development or maintenance.
- Design Reviews: Check the color choices in design mockups before implementation to proactively address accessibility issues.
- Content Creation: Verify sufficient contrast when creating new content, such as infographics or presentations intended for online distribution.
- User Feedback: Investigate potential readability problems reported by users with visual impairments.
Key capabilities
- Calculates color contrast ratios based on WCAG standards.
- Evaluates text and background color combinations.
- Focuses on the "Perceivable" success criteria.
Example prompts
- “Check the color contrast between the white text and dark blue background on this webpage: [URL]”
- “What is the WCAG color contrast ratio for the heading text and its background?”
- “Is this color combination accessible according to WCAG guidelines? Text color: #FFFFFF, Background Color: #000080"
Tips & gotchas
- The skill requires a URL or specific color codes (hexadecimal values) as input. Ensure the provided information is accurate for reliable results.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.