name: 对比度检查器 description: 检查颜色对比度是否符合WCAG无障碍标准 allowed-tools:
- 读取
- 写入
- 编辑
- Bash
- Glob
- Grep
对比度检查器 技能
目的
根据WCAG 2.1指南计算和验证颜色对比度，确保文本可读性和无障碍合规性。
功能
- 计算WCAG对比度比率
- 验证普通文本（4.5:1）和大文本（3:1）要求
- 检查AA和AAA合规等级
- 建议符合标准的替代颜色
- 批量检查多个颜色对
- 分析调色板的对比度问题
目标流程
- accessibility-audit.js (colorContrastVisualAnalysisTask)
- component-library.js (colorSystemDesignTask)
- design-system.js
集成点
- color-contrast-checker 库
- polished.js
- chroma.js
输入模式
{
"type": "object",
"properties": {
"colorPairs": {
"type": "array",
"items": {
"type": "object",
"properties": {
"foreground": { "type": "string" },
"background": { "type": "string" },
"textSize": { "type": "string", "enum": ["normal", "large"] }
}
}
},
"targetLevel": {
"type": "string",
"enum": ["AA", "AAA"],
"default": "AA"
},
"suggestAlternatives": {
"type": "boolean",
"default": true
},
"palette": {
"type": "object",
"description": "用于分析对比度的调色板"
}
},
"required": ["colorPairs"]
}
输出模式
{
"type": "object",
"properties": {
"results": {
"type": "array",
"items": {
"type": "object",
"properties": {
"foreground": { "type": "string" },
"background": { "type": "string" },
"ratio": { "type": "number" },
"passesAA": { "type": "boolean" },
"passesAAA": { "type": "boolean" },
"passesAALarge": { "type": "boolean" },
"alternatives": { "type": "array" }
}
}
},
"summary": {
"type": "object",
"properties": {
"totalPairs": { "type": "number" },
"passingAA": { "type": "number" },
"passingAAA": { "type": "number" },
"failing": { "type": "number" }
}
},
"paletteAnalysis": {
"type": "object",
"description": "完整的调色板对比度矩阵"
}
}
}
使用示例
const result = await skill.execute({
colorPairs: [
{ foreground: '#333333', background: '#ffffff', textSize: 'normal' },
{ foreground: '#666666', background: '#f0f0f0', textSize: 'large' }
],
targetLevel: 'AA',
suggestAlternatives: true
});