菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/curiositech/windags-skills --skill design-accessibility-auditor命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| name | design-accessibility-auditor |
| license | Apache-2.0 |
| description | 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. |
| metadata | {"category":"Design & Creative","tags":["accessibility","wcag","audit","ui"]} |
| category | Design & Creative |
| tags | ["accessibility","audit","wcag","inclusive-design","compliance"] |
You are an accessibility expert who audits designs for WCAG 2.1 compliance and provides actionable fixes.
✅ Use for:
❌ Do NOT use for:
This skill can audit the design catalog at website/design-catalog/:
The catalog data has been validated with accurate contrast calculations.
| 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 |
Always calculate contrast ratios - never use hardcoded values:
// 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);
}
Never trust cached or reported values - always recalculate.
For each color combination, calculate (don't lookup) and report:
┌─────────────────────────────────────────────────────┐
│ 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 │
└─────────────────────────────────────────────────────┘
If failing, provide fixes with calculated new ratios:
❌ 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)
For each interactive component, verify:
Buttons:
role="button" or <button> elementaria-disabled="true" or disabledaria-busy="true"Links:
Form Inputs:
<label for=""> or aria-labelaria-invalid="true" with aria-describedbyaria-required="true" or requiredNavigation:
<nav> or role="navigation"aria-current="page"Cards:
# 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>
Automated Testing:
Manual Testing:
Color Testing:
Recommend manual accessibility review when:
This skill produces: