颜色

选色得看它要干什么活。装饰、界面状态、类别区分、数值编码，这些场景对颜色的要求完全不同。

调色板类型

类型	适用场景	检查要点
顺序型 (Sequential)	数值从低到高递增	明度需沿单一方向清晰变化
发散型 (Diverging)	数值围绕有意义的中点向两侧偏离	两侧需可区分，中点在视觉上应保持“安静”
定性型 (Qualitative)	无数值顺序的类别	在目标尺寸下，相邻类别仍需保持明显差异

别只靠颜色传递含义。状态色必须搭配文字、图标、线条样式、形状或直接标签。如果图表在灰度模式或常见色觉缺陷下变得模糊不清，说明它缺少必要的辅助线索。

对比度与上下文

文本和关键控件必须与背景保持足够的对比度。别只测单个色块，要检查正常、悬停、聚焦、禁用、浅色主题和深色主题等各种状态。较大的图表标记可以容忍较小的对比度，但小字号文本不行。

在数据可视化中，别把红绿当成普遍可读的对立色对。蓝橙发散调色板通常更容易区分，但仍需测试；没有任何色相对能替代足够的对比度和冗余标签。

实用工作流

1. 判断数据属于顺序型、发散型还是类别型。
2. 选用专为该角色设计的调色板，而非随意拼凑无关颜色。
3. 在真实尺寸下，于浅色和深色背景中测试渲染效果。
4. 模拟常见色觉缺陷，并检查灰度视图。
5. 依据适用的 WCAG 标准验证文本和控件的对比度。
6. 确认在不使用颜色的情况下，信息是否依然可理解。

推荐工具

• ColorBrewer 提供经过测试的顺序、发散和定性调色板，适用于地图和图表。
• WebAIM Contrast Checker 用于检查前景与背景的对比度。
• Adobe Color accessibility tools 可检测对比度和色盲安全关系。
• 浏览器开发者工具可以模拟视觉缺陷，直接测试实际页面而非孤立的调色板。

成功的调色板能让读者快速还原预期的结构，而不是让每种颜色单独看都很抢眼。

我的阅读 · 打开过的笔记会记在当前浏览器里。