设计稿色盲友好配色怎么选

本文目录导读：

1. 核心原则
2. 推荐的安全配色方案
3. 必须避免的颜色组合
4. 实用工具推荐
5. 实战设计步骤
6. 总结 - 快速备查清单

为设计稿选择色盲友好的配色,核心原则是不要仅依赖颜色（尤其是红绿）来传达信息，并确保足够的亮度对比度。

以下是具体的选色指南、工具和步骤：

核心原则

1. 避开红绿搭配：这是最常见的色盲类型（红绿色盲）。
2. 信息多重编码：颜色只是辅助，使用形状、图标、文字、纹理或位置来区分不同数据或元素。
3. 保证亮度对比：色盲者可能无法区分色相，但对明暗敏感，使用灰度模式检查设计，确保所有元素都清晰可辨。

推荐的安全配色方案

基于蓝-橙-黄 的分割补色方案

对于红绿色盲（红绿色弱）蓝色和黄色非常清晰，橙色也容易识别，这是非常经典且安全的方案。

• 主色：蓝色（#0077BB）
• 强调色/辅助色：橙色（#EE7733）、黄色（#EECB33）
• 背景色：浅灰/白色，深灰/黑色
• 对比色：深蓝 + 黄色文字

基于蓝-绿-粉 的分割补色方案

这是另一种将红绿转换为蓝绿粉的方案,避免了红绿冲突。

• 主色：深蓝（#004488）
• 强调色1：蓝绿色（#44BB99）
• 强调色2：粉红色（#BB5566）
• 中性色：灰色（#DDDDDD）

单色或邻近色方案

最简单,只要保证明度差异足够大。

• 主色：深蓝（#003366）
• 变化色1：中蓝（#527A94）
• 变化色2：浅蓝（#8BB5D0）
• 背景色：非常浅的蓝（#E6F2F5）

双色调（深色背景 + 明亮强调色）

• 背景：深灰/黑色（#1A1A1A）
• 强调色1：亮橙色（#FF8800）
• 强调色2：亮蓝色（#0099FF）
• 强调色3：亮黄色（#FFCC00）

必须避免的颜色组合

• 红色 + 绿色：最常见的雷区，绝对不要只用这两个颜色区分状态（如“通过/失败”、“打开/关闭”），如果需要，请加上文字或图标（如✔/✘）。
• 深红 + 深绿：对比度极低，非常难以辨认。
• 浅红 + 浅绿：在明亮背景下也难以区分。
• 蓝色 + 紫色：蓝紫色盲可能难以区分，如果需要，确保它们的明度差异很大（深蓝 + 浅紫）。
• 粉色 + 灰色：对于某些色盲类型，粉色会显得像灰色。

实用工具推荐

1. Adobe Color（色轮）

   • 网址：https：//color.adobe.com
   • 功能：在左下角无障碍工具中选择“色盲安全”，它会自动生成色盲安全的配色方案。

2. Colorblindly（浏览器插件）

   • 功能：安装后，可以一键模拟所有类型的色盲（红色盲、绿色盲、蓝色盲、全色盲等），实时查看你的设计在色盲眼中的样子。

3. Sim Daltonism（Mac/iOS 应用）

   功能：在你使用设计软件（如 Figma、Sketch）时，它会显示一个浮动窗口，实时模拟色盲视觉效果。

4. Coolors 配色工具

   • 网址：https：//coolors.co
   • 功能：生成配色后，点击“无障碍”（Accessibility）选项，可以查看颜色对比度评级和色盲模拟。

5. Viz Palette（在线工具，适合数据可视化）

   • 网址：https：//projects.susielu.com/viz-palette
   • 功能：上传你的配色方案，可以模拟色盲失真，并自动推荐替代颜色。

实战设计步骤

1. 规划信息层级：先确定哪些信息最重要（比如标题、数据、按钮），哪些是次要的。
2. 选择主色调：从上述推荐方案中选一个作为基础（比如蓝色）。
3. 用对比度工具检查：确保前景和背景的对比度至少达到 5：1（AA 级标准），最好达到 7：1（AAA 级标准），可以使用 WebAIM 的对比度检查器。
4. 添加非颜色编码：对于图表（折线、饼图）、按钮状态、错误/成功提示，必须加上形状（线型、点、图标）、文字标签或纹理（阴影、条纹）。
   • 例子：用蓝色实线 + 橙色虚线代替红线和绿线。
   • 例子：错误提示用红色文字 + 感叹号图标（！），成功提示用绿色文字 + 勾选图标（✔）。
5. 模拟测试：使用 Colorblindly 或 Sim Daltonism 切换到“红色盲模式”和“绿色盲模式”查看你的设计。
   • 问自己：图表能区分不同系列吗？按钮状态能看出来吗？文字和背景能分清吗？
6. 调整：如果模拟后看起来一模一样，就调整其中一个颜色的明度（更亮或更暗）或饱和度（更鲜艳或更灰），直到有足够的区分度。

- 快速备查清单

• [ ] 是否使用了红绿组合？是 → 替换 为蓝-橙 或 紫-黄。
• [ ] 是否仅用颜色区分状态/类别？是 → 添加 文字标签、图标或形状。
• [ ] 配色方案的明度对比是否足够？用灰度模式检查：看所有元素是否还能区分。
• [ ] 是否进行了色盲模拟测试？用 Colorblindly 或 Sim Daltonism 至少测试红绿色盲。
• [ ] 文字/UI元素对比度是否达标？用 WebAIM 检查，确保≥4.5：1。

遵循这些原则,你的设计稿对于色盲用户和普通用户都会更加清晰、易用。

标签： 色盲友好配色 无障碍设计