Color Contrast Checker
ListedThis tool analyzes webpage colors to ensure sufficient contrast for accessibility and readability, improving user experience.
Install on your platform
Showing Claude Code. One command installs this skill into any of the agents below.
- 1
Run this in your project
terminal$ npx skills add jeremylongshore/tons-of-skills-marketplace --skill color-contrast-checker -a claude-code Uses the open-source
skillsCLI and needs Node.js. Add-gto install it for your user instead of this project.
What we know about this skill
Publisher
jeremylongshore
Taken from the source listing. We haven't verified who controls this account.
Install target
Live repository
Not pinned. Installing fetches whatever the repository holds at the time you run the command.
Automated safety checks
We could not read this skill's source, so none of the checks below were run.
About this skill
What it does
This skill checks the color contrast ratio between two given colors. It determines if the contrast meets accessibility guidelines, specifically Web Content Accessibility Guidelines (WCAG). The tool provides a numerical contrast ratio and indicates whether the combination passes WCAG AA or AAA standards for different text sizes.
When to use it
- Website Design: Ensure sufficient color contrast for readability on websites and applications.
- UI/UX Testing: Validate that user interface elements have adequate contrast for users with visual impairments.
- Document Creation: Check the contrast of text and background colors in documents, presentations, or reports.
- Marketing Materials: Verify accessibility compliance when designing marketing collateral like brochures or advertisements.
Key capabilities
- Calculates color contrast ratio.
- Determines WCAG AA compliance.
- Determines WCAG AAA compliance.
- Supports various text sizes for contrast evaluation.
Example prompts
- "What is the contrast ratio between #FFFFFF and #000000?"
- "Is the color combination of light gray (#D3D3D3) and dark blue (#00008B) WCAG AA compliant for 12pt text?"
- "Check if a background of #F0F0F0 is accessible with white text (#FFFFFF)."
Tips & gotchas
The skill requires valid hexadecimal color codes (e.g., #RRGGBB) as input. Incorrectly formatted color codes will result in errors or inaccurate results.