// Check color contrast ratios against WCAG AA and AAA accessibility standards. Use when the user wants to verify if their color combinations are accessible, check contrast between text and background colors, or audit a palette for accessibility.
Multi-model agent orchestration using specialized agents for planning, coding, research, math/science, visual analysis, and adversarial review. Use when tasks are complex enough to benefit from different models' strengths, when you want adversarial review to catch blind spots, or when coordinating multi-step workflows across agent roles. Triggers on complex projects, multi-step tasks, architecture decisions, or when explicitly requested.
Web design reference for building production-grade interfaces. Covers layout, typography, color, spacing, shadows, animation, accessibility, responsive design, components, performance, and UX psychology. Use when building UI, reviewing design quality, choosing design tokens, or making any visual design decision.
Compare two images pixel-by-pixel and get a visual diff. Use when the user wants to compare their implementation against a design, spot differences between two screenshots, or verify visual regression.
Extract text from images using OCR. Use when the user shares a screenshot and you need to read the text content, copy UI labels, or extract copy from a design mockup.
Extract color palettes from images (screenshots, Figma exports, design mockups) to help implement matching UI. Use when the user shares a screenshot, design image, or asks to "match these colors", "extract colors from this image", "implement this design", or "get the color palette".
| name | contrast-check |
| description | Check color contrast ratios against WCAG AA and AAA accessibility standards. Use when the user wants to verify if their color combinations are accessible, check contrast between text and background colors, or audit a palette for accessibility. |
| metadata | {"author":"pascalorg","version":"1.0.0"} |
Check color pairs against WCAG 2.1 contrast requirements. Pass in hex colors and get contrast ratios with AA/AAA pass/fail results for both normal and large text.
WCAG thresholds:
bash <skill-path>/scripts/contrast-check.sh <color1> <color2> [color3] [color4] ...
Arguments:
# prefix.Examples:
# Check a single pair
bash <skill-path>/scripts/contrast-check.sh "#1a1a2e" "#ffffff"
# Check all pairs in a palette
bash <skill-path>/scripts/contrast-check.sh "#1a1a2e" "#e94560" "#ffffff" "#3d83f7" "#bdbdbd"
{
"pairs": [
{
"foreground": "#1a1a2e",
"background": "#ffffff",
"ratio": 16.57,
"aa": { "normal": true, "large": true },
"aaa": { "normal": true, "large": true }
},
{
"foreground": "#e94560",
"background": "#ffffff",
"ratio": 3.94,
"aa": { "normal": false, "large": true },
"aaa": { "normal": false, "large": false }
}
],
"summary": {
"totalPairs": 2,
"passAA": 1,
"passAAA": 1,
"failAA": 1
}
}
| Field | Type | Description |
|---|---|---|
| foreground | String | Foreground (text) color |
| background | String | Background color |
| ratio | Number | Contrast ratio (e.g. 16.57 means 16.57:1) |
| aa.normal | Boolean | Passes WCAG AA for normal text (>= 4.5:1) |
| aa.large | Boolean | Passes WCAG AA for large text (>= 3:1) |
| aaa.normal | Boolean | Passes WCAG AAA for normal text (>= 7:1) |
| aaa.large | Boolean | Passes WCAG AAA for large text (>= 4.5:1) |
After checking, present a table:
Contrast Check Results:
#1a1a2e on #ffffff — 16.57:1 — AA: Pass — AAA: Pass
#e94560 on #ffffff — 3.94:1 — AA: Fail (normal) / Pass (large) — AAA: Fail
Summary: 1/2 pairs pass AA for normal text, 1/2 pass AAA.
Flag any failing pairs and suggest fixes (darken/lighten the color to reach the threshold).
Invalid color — Colors must be valid hex values (3 or 6 digits, with or without #).
Pairing with image-analysis — Extract colors from a design with the image-analysis skill first, then pipe the hex values into this skill to audit accessibility.