关于 manage-color-contrast
用于评估和改进界面颜色对比度的设计技能，面向设计与无障碍检查。它计算对比度，并依据 WCAG AA 判断是否达标、提出修正建议。
主要功能
- 01计算颜色对比度
- 02按 WCAG AA 检查达标情况
- 03提供颜色调整建议
适用场景
- 01检查正文文字与背景的对比度
- 02评估按钮、输入框和焦点指示器
- 03修正浅色文字或低对比度品牌色
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/manage-color-contrast确认已加载。
详细介绍
技能：管理颜色对比度
用途
确保文本和交互元素与背景之间有足够的对比度，以便于阅读并满足无障碍要求。
类型
评估 + 修正
输入
- 文本颜色和字号
- 背景颜色
- UI 元素规格
输出
- 对比度计算结果
- 是否符合 WCAG 标准
- 修复建议
执行的转换
计算对比度，并确保符合 WCAG AA 标准（普通文本为 4.5:1，大号文本和 UI 组件为 3:1）。
判定标准
通过（对比度良好）
- 普通文本（< 18px）：最低为 4.5:1（WCAG AA）
- 大号文本（≥ 18px 且为粗体，或 ≥ 24px）：最低为 3:1
- UI 组件（按钮、输入框）：边界的最低对比度为 3:1
- 焦点指示器：与相邻颜色的最低对比度为 3:1
未通过（对比度较差）
- 白色背景上的浅灰色文本（< 4.5:1）
- 浅色背景上的白色文本
- 看起来像启用状态的禁用状态（对比度过高）
- 占位符文本与输入文本颜色相同
对比度速查表
| 白色背景上的文本颜色 | 比率 | 符合 AA？ |
|---|---|---|
| #000000（黑色） | 21:1 | ✓ |
| #333333 | 12.6:1 | ✓ |
| #666666 | 5.9:1 | ✓ |
| #757575 | 4.6:1 | ✓（最低） |
| #999999 | 2.8:1 | ✗ |
| #CCCCCC | 1.6:1 | ✗ |
常见失败模式
| 失败情况 | 描述 | 修复方法 |
|---|---|---|
| 浅灰色文本 | 正文使用 #999 或更浅的颜色 | 至少使用 #666，优先使用 #333 |
| 幽灵文本 | 占位符与输入值颜色相同 | 将占位符颜色调浅（#999） |
| 主色对比度低 | 品牌色太浅，无法搭配白色文本 | 加深品牌色，或改用深色文本 |
| 不明显的链接 | 链接与文本几乎没有区别 | 添加下划线或提高对比度 |
| 禁用状态混淆 | 禁用按钮过于醒目 | 将不透明度降低至 30%，或使用灰色 |
| 图标过淡 | 图标颜色太浅，难以看清 | 使用与文本相同的颜色，或提高对比度 |
前提条件
- 已定义调色板
- 已定义字体比例
依赖项
build-color-palette（需要灰度色阶）
Refactoring UI 参考
- “不要在有色背景上使用灰色文本”
- “确保有足够的对比度”
示例评估
输入： 白色背景上的正文颜色为 #888888
评估： 未通过
- 比率：约 3.5:1
- 低于 4.5:1 的要求
建议： 至少改为 #666666（5.9:1） 正文优先使用 #333333 或 #1A1A1A
评论
支持 Markdown