aiwg
Version:
Deployment tool and support utility for AI context. Copies agents, skills, commands, rules, and behaviors into the paths each AI platform reads (Claude Code, Codex, Copilot, Cursor, Warp, OpenClaw, and 6 more) so one source of truth works across 10 platfo
189 lines (139 loc) • 6.23 kB
Markdown
name: color-accessibility
description: WCAG accessibility analysis for color palettes including contrast ratios, compliance checking, and remediation suggestions. Use when user needs to verify colors meet accessibility standards.
version: 1.0.0
# Color Accessibility Skill
## Purpose
Analyze color palettes for WCAG 2.1 accessibility compliance. Calculate contrast ratios for all color pairs, identify failing combinations, and suggest fixes to meet AA or AAA standards.
## When This Skill Applies
- User asks "are these colors accessible?"
- User wants to "check contrast ratios"
- User needs "WCAG compliance" for a palette
- User asks about "color accessibility"
- User wants to ensure colors work for colorblind users
- User mentions "AA" or "AAA" standards
## Trigger Phrases
| Natural Language | Action |
|------------------|--------|
| "Check if these colors are accessible" | Full WCAG analysis |
| "What's the contrast ratio?" | Calculate specific pair ratio |
| "Make this palette AA compliant" | Analyze + suggest fixes |
| "Is this readable?" | Text contrast check |
| "Color blind friendly?" | Color vision deficiency check |
| "Fix the accessibility of this palette" | Remediation suggestions |
## Parameters
- `--palette <colors>` — Comma-separated color values to analyze
- `--foreground <color>` — Specific foreground color (for pair check)
- `--background <color>` — Specific background color (for pair check)
- `--standard <level>` — Target standard: A, AA (default), AAA
- `--fix` — Include remediation suggestions for failing pairs
- `--matrix` — Show full contrast matrix for all pairs
## Analysis Process
### 1. Parse Colors
Accept colors in any format and normalize to HEX + RGB + HSL:
- HEX: `#1a1a2e`, `#fff`
- RGB: `rgb(26, 26, 46)`
- HSL: `hsl(240, 28%, 14%)`
- Named: `navy`, `coral`, `forestgreen`
### 2. Calculate Relative Luminance
For each color, calculate relative luminance per WCAG 2.1:
```
For each channel (R, G, B):
sRGB = channel / 255
linear = sRGB <= 0.04045
? sRGB / 12.92
: ((sRGB + 0.055) / 1.055) ^ 2.4
L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear
```
### 3. Calculate Contrast Ratios
For every foreground/background pair:
```
ratio = (max(L1, L2) + 0.05) / (min(L1, L2) + 0.05)
```
### 4. Evaluate Against Standards
| Standard | Normal Text (< 18pt) | Large Text (>= 18pt or 14pt bold) | UI Components |
|----------|---------------------|-----------------------------------|---------------|
| A | No minimum | No minimum | No minimum |
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | 4.5:1 |
### 5. Generate Contrast Matrix
For N colors, generate an N x N matrix:
```
Contrast Matrix (AA Standard)
#1a1a2e #16213e #0f3460 #e94560 #ffffff
#1a1a2e — 1.2:1 1.8:1 5.4:1 14.2:1
FAIL FAIL PASS PASS
#16213e 1.2:1 — 1.5:1 4.5:1 11.8:1
FAIL FAIL PASS PASS
#0f3460 1.8:1 1.5:1 — 3.0:1 7.9:1
FAIL FAIL FAIL PASS
#e94560 5.4:1 4.5:1 3.0:1 — 2.6:1
PASS PASS FAIL FAIL
#ffffff 14.2:1 11.8:1 7.9:1 2.6:1 —
PASS PASS PASS FAIL
```
### 6. Color Vision Deficiency Check
Simulate how the palette appears under common color vision deficiencies:
| Type | Prevalence | Affected Colors |
|------|-----------|----------------|
| Protanopia (no red) | ~1% males | Red-green confusion |
| Deuteranopia (no green) | ~1% males | Red-green confusion |
| Tritanopia (no blue) | ~0.003% | Blue-yellow confusion |
| Achromatopsia (no color) | ~0.003% | All hues lost |
Check that colors remain distinguishable under each simulation. Flag pairs that become indistinguishable.
### 7. Remediation Suggestions
When `--fix` is specified, for each failing pair suggest adjustments:
- Darken the darker color or lighten the lighter color
- Adjust saturation to increase perceived contrast
- Suggest the minimum lightness shift needed to pass
- Provide the adjusted color value
```
Failing pair: #0f3460 on #e94560 (3.0:1, needs 4.5:1)
Suggestions:
Option A: Darken background → #0a2340 (ratio: 4.6:1) PASS
Option B: Lighten foreground → #ff6b7f (ratio: 4.5:1) PASS
Option C: Use white text instead → #ffffff on #e94560 (2.6:1) FAIL
Use white on darkened → #ffffff on #c93050 (4.8:1) PASS
```
## Output Format
### Summary View (default)
```
Accessibility Report — AA Standard
Palette: #1a1a2e, #16213e, #0f3460, #e94560, #ffffff
Overall: 6/10 pairs pass AA (60%)
PASSING (6):
#1a1a2e on #e94560 — 5.4:1 (AA normal text)
#1a1a2e on #ffffff — 14.2:1 (AAA normal + large)
#16213e on #e94560 — 4.5:1 (AA normal text, borderline)
#16213e on #ffffff — 11.8:1 (AAA normal + large)
#0f3460 on #ffffff — 7.9:1 (AAA normal + large)
#e94560 on #1a1a2e — 5.4:1 (AA normal text)
FAILING (4):
#1a1a2e on #16213e — 1.2:1 (needs 4.5:1)
#1a1a2e on #0f3460 — 1.8:1 (needs 4.5:1)
#16213e on #0f3460 — 1.5:1 (needs 4.5:1)
#e94560 on #ffffff — 2.6:1 (needs 4.5:1)
Recommendations:
- Avoid using dark colors on each other for text
- #e94560 needs a darker variant for use on white backgrounds
- Consider adding a dark text color (#1a1a2e) for light backgrounds
```
### Pair Check View
```
Contrast Check
Foreground: #e94560 (Coral Red)
Background: #1a1a2e (Dark Navy)
Contrast Ratio: 5.4:1
AA Normal Text (4.5:1): PASS
AA Large Text (3.0:1): PASS
AAA Normal Text (7.0:1): FAIL (need 7.0:1)
AAA Large Text (4.5:1): PASS
```
## Best Practices
1. **Test text on backgrounds, not just swatches** — A palette can look cohesive but fail for readability
2. **Check both directions** — Light text on dark AND dark text on light
3. **Include white and near-black** — Most palettes need a light and dark neutral for text
4. **Don't rely on color alone** — Use icons, patterns, or labels alongside color for meaning
5. **Test at actual sizes** — Large text thresholds are different from normal text
6. **Consider dark mode** — Recalculate for dark mode backgrounds