| name | contrast-checker |
| description | Check color contrast ratios for WCAG compliance |
| allowed-tools | ["Read","Write","Edit","Bash","Glob","Grep"] |
| graph | {"domains":["domain:web-development"],"specializations":["specialization:ux-ui-design"],"skillAreas":["skill-area:accessibility-first-design","skill-area:color-theory"],"roles":["role:product-designer","role:qa-engineer"],"workflows":["workflow:user-feedback-loop","workflow:product-discovery"]} |
Contrast Checker Skill
Purpose
Calculate and validate color contrast ratios according to WCAG 2.1 guidelines, ensuring text readability and accessibility compliance.
Capabilities
- Calculate WCAG contrast ratios
- Validate normal text (4.5:1) and large text (3:1) requirements
- Check AA and AAA compliance levels
- Suggest passing color alternatives
- Batch check multiple color pairs
- Analyze color palettes for contrast issues
Target Processes
- accessibility-audit.js (colorContrastVisualAnalysisTask)
- component-library.js (colorSystemDesignTask)
- design-system.js
Integration Points
- color-contrast-checker library
- polished.js
- chroma.js
Input Schema
{
"type": "object",
"properties": {
"colorPairs": {
"type": "array",
"items": {
"type": "object",
"properties": {
"foreground": { "type": "string" },
"background": { "type": "string" },
"textSize": { "type": "string", "enum": ["normal", "large"] }
}
}
},
"targetLevel": {
"type": "string",
"enum": ["AA", "AAA"],
"default": "AA"
},
"suggestAlternatives": {
"type": "boolean",
"default": true
},
"palette": {
"type": "object",
"description": "Color palette to analyze for contrast"
}
},
"required": ["colorPairs"]
}
Output Schema
{
"type": "object",
"properties": {
"results": {
"type": "array",
"items": {
"type": "object",
"properties": {
"foreground": { "type": "string" },
"background": { "type": "string" },
"ratio": { "type": "number" },
"passesAA": { "type": "boolean" },
"passesAAA"
Usage Example
const result = await skill.execute({
colorPairs: [
{ foreground: '#333333', background: '#ffffff', textSize: 'normal' },
{ foreground: '#666666', background: '#f0f0f0', textSize: 'large' }
],
targetLevel: 'AA',
suggestAlternatives: true
});