Loading...
Loading...
Audit designs, color palettes, and UI components for WCAG 2.1 accessibility compliance, providing specific fixes for contrast, touch targets, focus indicators, and screen reader support. NOT for color harmony aesthetics or design system creation.
npx skill4agent add curiositech/some_claude_skills design-accessibility-auditorwebsite/design-catalog/| Element Type | Level AA | Level AAA |
|---|---|---|
| Normal text (<18px or <14px bold) | 4.5:1 | 7:1 |
| Large text (≥18px or ≥14px bold) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | N/A |
| Focus indicators | 3:1 | N/A |
// WCAG 2.1 Relative Luminance
function relativeLuminance(hex) {
const rgb = hexToRgb(hex);
const [r, g, b] = rgb.map(c => {
const srgb = c / 255;
return srgb <= 0.03928
? srgb / 12.92
: Math.pow((srgb + 0.055) / 1.055, 2.4);
});
return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
// Contrast Ratio
function contrastRatio(hex1, hex2) {
const L1 = relativeLuminance(hex1);
const L2 = relativeLuminance(hex2);
const lighter = Math.max(L1, L2);
const darker = Math.min(L1, L2);
return (lighter + 0.05) / (darker + 0.05);
}┌─────────────────────────────────────────────────────┐
│ CONTRAST AUDIT │
├─────────────────────────────────────────────────────┤
│ Foreground: #1a1a1a (Deep Black) │
│ Background: #ffffff (White) │
│ Contrast Ratio: [CALCULATED VALUE]:1 │
│ │
│ ✅/❌ Normal Text AA (4.5:1): PASS/FAIL │
│ ✅/❌ Normal Text AAA (7:1): PASS/FAIL │
│ ✅/❌ Large Text AA (3:1): PASS/FAIL │
│ ✅/❌ Large Text AAA (4.5:1): PASS/FAIL │
│ ✅/❌ UI Components (3:1): PASS/FAIL │
└─────────────────────────────────────────────────────┘❌ FAILS AA - Contrast ratio: [X.X]:1
FIX OPTIONS:
1. Darken foreground: #old → #new (ratio: [CALCULATED]:1)
2. Lighten background: #old → #new (ratio: [CALCULATED]:1)
3. Use alternative: #hex on #hex (ratio: [CALCULATED]:1)role="button"<button>aria-disabled="true"disabledaria-busy="true"<label for="">aria-labelaria-invalid="true"aria-describedbyaria-required="true"required<nav>role="navigation"aria-current="page"# Accessibility Audit Report
## Summary
- **Overall Score**: X/100
- **Critical Issues**: X
- **Warnings**: X
- **Passes**: X
## Critical Issues (Must Fix)
### 1. [Issue Title]
- **Location**: [selector or component]
- **Current**: [current value] ([calculated ratio]:1)
- **Required**: [requirement]
- **Fix**: [specific fix with calculated new ratio]
## Warnings (Should Fix)
### 1. [Warning Title]
- **Location**: [selector]
- **Current**: [current state]
- **Recommended**: [recommendation]
- **Fix**: [how to fix]
## Passed Checks
- ✅ [Check name] ([calculated ratio]:1)
- ✅ [Check name]
.../* Before: fails AA */
color: #9ca3af;
/* After: passes AA (calculate to verify) */
color: #6b7280;/* Universal focus style */
:focus-visible {
outline: 2px solid #000000;
outline-offset: 2px;
}
/* Or for brand color (verify 3:1 contrast) */
:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 2px;
}/* Before: too small */
.icon-btn {
width: 32px;
height: 32px;
}
/* After: meets 44px minimum */
.icon-btn {
width: 44px;
height: 44px;
/* Or use padding */
padding: 12px;
}<!-- Before: no accessible name -->
<button><svg>...</svg></button>
<!-- After: accessible -->
<button aria-label="Close dialog">
<svg aria-hidden="true">...</svg>
</button>