关于 colour-independence
这项设计技能要求信息不能只靠颜色传达，指导团队配合标签、图标、纹理等线索，并用灰度检查界面和图表的可读性。
主要功能
- 01为颜色搭配第二种线索
- 02为状态添加标签与图标
- 03在数据可视化中使用纹理
- 04检查图表的灰度可读性
- 05让链接不只靠颜色区分
- 06使用评估清单检查界面
适用场景
- 01审查仅靠颜色表达的状态指示
- 02改进表单错误反馈
- 03检查图表在灰度下是否易读
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/colour-independence确认已加载。
详细介绍
色彩独立性
设计时应确保颜色传达的每一条信息，也能通过其他方式传达——例如形状、文本、图案、位置或图标。 8% 的男性和 0.5% 的女性存在色觉缺陷。这大约相当于每 12 位男性用户中就有 1 位。
核心原则
颜色可以增强含义，但绝不能成为传达含义的唯一方式。
常见问题
状态指示器
- 不佳：绿色圆点 = 在线，红色圆点 = 离线（仅靠颜色区分）
- 良好：绿色圆点 +“在线”标签，红色圆点 +“离线”标签
- 更好：绿色圆点带勾号 +“在线”，灰色圆点带叉号 +“离线”
表单验证
- 不佳：无效字段仅用红色边框标示（仅靠颜色区分）
- 良好：红色边框 + 错误图标 + 错误文本消息
- 真正发挥作用的是错误消息，颜色只是辅助强调
数据可视化
- 不佳：包含 5 条彩色线条的折线图，图例只用色块区分
- 良好：不同的线条样式（实线、虚线、点线）+ 标签 + 在灰度下仍能区分的颜色
- 良好：柱状图使用图案（条纹、点状、纯色），并搭配颜色
- 务必在灰度下测试图表——还能看懂吗？
链接
- 不佳：链接仅通过颜色与正文区分
- 良好：链接既有颜色，也带下划线
- 下划线是无障碍识别标记，颜色则是增强效果
提示和徽标
- 不佳：红色徽标 = 紧急，黄色 = 警告，绿色 = 正常
- 良好：红色徽标 +“紧急”标签，黄色 +“警告”标签， 绿色 +“正常”标签
- 图标可起到辅助作用：⚠ 表示警告，✓ 表示成功，✕ 表示错误
地图和示意图
- 不佳：仅通过区域颜色呈现数据（没有标签的分级统计地图）
- 良好：颜色 + 图案 + 显示在各区域中的数值
- 良好：提供交互功能，在悬停或聚焦时显示数值，并提供数据表作为替代方式
设计模式
双重编码
为每种颜色含义增加第二种编码方式：
- 颜色 + 图标
- 颜色 + 文本标签
- 颜色 + 图案或纹理
- 颜色 + 形状
- 颜色 + 位置
无障碍调色板
- 选择在各种色觉缺陷情况下都能区分的颜色（不只是红绿色觉缺陷）
- 使用色盲模拟器测试调色板
- 蓝色和橙色通常适用于大多数情况
- 避免仅用红色和绿色区分两种状态
- 确保图表中相邻颜色之间有足够的对比度
灰度测试
快速检查：将界面转换为灰度。
- 还能使用吗？
- 能区分所有状态吗？
- 能读懂图表吗？
- 能看出哪些字段有错误吗？
如果任何一个问题的答案是否定的，就说明颜色是唯一传达含义的方式。
评估清单
- 没有信息仅通过颜色传达
- 状态指示器同时使用颜色 + 图标 + 文本
- 表单错误同时使用颜色 + 图标 + 消息
- 图表在灰度下仍清晰易读
- 链接不只通过颜色区分
- 提示级别同时使用颜色 + 标签 + 图标
- 数据可视化在使用颜色的同时，也有图案或标签
- 界面通过灰度测试
评论
支持 Markdown