wcag-contrast-checker
OfficialEnsure WCAG color contrast, boost accessibility.
Authorlsst-sqre
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Ensuring sufficient color contrast is crucial for web accessibility (WCAG compliance) but can be a manual and error-prone process. This skill automates the calculation and validation of contrast ratios, helping designers and developers meet accessibility standards effortlessly.
Core Features & Use Cases
- WCAG Compliance Check: Calculates contrast ratios between any two CSS colors and reports compliance against WCAG AA and AAA levels for normal and large text.
- Flexible Color Input: Accepts various CSS color formats including hex, RGB, HSL, and named colors.
- Automated Accessibility Audit: Quickly verify if your UI color combinations are accessible, preventing issues for users with visual impairments.
- Use Case: Before finalizing a new UI theme, use this skill to check if the text color on a button background meets WCAG AA standards, ensuring readability for all users.
Quick Start
Check the WCAG contrast ratio between a dark blue foreground and a light gray background.
uv run --script check_contrast.py --foreground "darkblue" --background "lightgray"
Dependency Matrix
Required Modules
colour>=0.1.5uv
Components
scripts
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: wcag-contrast-checker Download link: https://github.com/lsst-sqre/squareone/archive/main.zip#wcag-contrast-checker Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.