--- 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 ` — Comma-separated color values to analyze - `--foreground ` — Specific foreground color (for pair check) - `--background ` — Specific background color (for pair check) - `--standard ` — 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