“使用色盲友好色板”只是起点。真正可访问的图表还要确保颜色不是唯一编码、关键图形具有足够对比、Hover 之外也能读取数据,并为复杂信息提供标签或表格等替代方式。
很多数据产品做无障碍时会下载一套所谓“色盲安全 Palette”,然后认为问题解决了。但图表可读性不仅由色相决定:同样的两种蓝色可能在低视力用户眼中几乎无法区分,红绿即使换成蓝橙,如果唯一信息仍然依赖颜色,依旧会让一部分用户丢失数据关系。
01 一、先区分三个问题:识别、区分和理解
识别是“我能不能看见这条线”;区分是“我能不能知道它和另一条线不是同一组”;理解是“我能不能知道它代表华北还是华南、增长还是下降”。配色只是其中一层。无障碍方案必须覆盖三层。
02 二、WCAG 对图表最重要的两条要求
WCAG 2.2 的 1.4.1 Use of Color 要求颜色不能成为传达信息、状态或区分元素的唯一视觉方式。也就是说,只通过红色表示下降、绿色表示上升是不够的。可以增加正负号、箭头、文字或不同形状。
1.4.11 Non-text Contrast 要求理解内容所必需的图形对象与相邻颜色之间达到至少 3:1 的对比度。W3C 的解释明确把图表中的重要线条、分段等视为可能需要满足的 graphical objects。不是所有装饰线都要 3:1,但如果看不见它就无法理解数据,就必须认真处理。
03 三、分类数据不要只靠“多几个颜色”
当图表有 8–12 个系列时,再优秀的分类色板也会难以辨认。优先减少同时显示的系列,并使用直接标签、线型、点形、图案或分组位置作为第二编码。W3C 的 G111 技术也给出“颜色 + Pattern”的做法,用冗余视觉通道避免颜色成为唯一线索。

04 四、顺序数据和分类数据不能用同一种思路
类别型数据强调“彼此不同”,适合不同色相;顺序型数据强调“从低到高”,更适合同一色相的亮度或饱和度梯度;发散数据围绕中点表达正负或偏离,需要两侧视觉平衡。先确定数据关系,再选择 Palette,而不是从品牌色板里随机挑颜色。
05 五、红绿问题不仅是色盲问题
财务产品常用红/绿表示涨跌,但不同市场甚至存在文化方向差异。即使保留红绿,也应增加 +/−、上/下箭头、文字标签或位置变化。用户应该在把屏幕转成灰度后仍然能理解主要结论。
06 六、相邻色块要测试“边界对比”
饼图、堆叠柱状图和热力图里,相邻区域直接接触。W3C G209 建议当边界本身是理解信息所需时,检查相邻颜色至少 3:1 的对比。实际设计中也可以增加间隔、边框或直接标签,减少对颜色边界的依赖。

07 七、不要把所有数据藏在 Hover Tooltip
Hover 对键盘、触摸和部分辅助技术用户并不可靠。关键值应该可以通过 Focus、直接标签、数据表或详情面板获得。Tooltip 可以提升密度,但不应成为唯一获取数据的方法。
08 八、图例越远,认知成本越高
如果用户需要不断在右侧图例和左侧折线之间来回对照颜色,数据量一多就很难。能直接标在线条末端就直接标,能把数字写在柱子附近就减少图例依赖。无障碍往往和更低的认知成本是同一个方向。
09 九、为复杂图表提供等价的信息方式
W3C 对 Non-text Contrast 的解释明确指出:如果图形信息同时以文本或表格等方式提供,图形本身对理解的依赖可以降低。复杂 BI 图表可以提供“查看数据表”“下载 CSV”或长描述,让用户不必强迫自己从视觉图形中提取全部信息。
10 十、建立系统级 Data Viz Token
Carbon Charts 会根据数据组数量选择经过设计的 Palette,并强调可访问性和页面协调性。企业自己的设计系统也可以建立 categorical、sequential、diverging、status 等数据色 Token,并明确最大系列数、背景主题和允许组合。不要让每个 Dashboard 自己决定 12 个随机颜色。

11 十一、深色主题不能只把图表背景变黑
Dark Mode 下同一组数据颜色会产生不同的感知亮度。浅色主题里足够分离的两条线,在深色背景上可能都显得过亮或互相接近。数据色 Token 应针对主题分别验证,而不是直接复用同一组 Hex。网格线、参考线、Focus ring 和 Tooltip 背景也要重新检查对比。
12 十二、交互高亮不要让未选数据“消失”
很多图表 Hover 某个系列时会把其他系列降到 10% 透明度,这可能让低视力用户完全看不见上下文。更稳妥的方法是增强当前系列,同时保留其他系列最低可辨识度;键盘 Focus 也应产生相同效果。动画切换时还要尊重 Reduced Motion 等用户偏好。
13 十三、一套实用的验收清单
- 把图表转成灰度,主要关系是否仍能理解?
- 隐藏图例颜色,只看标签和形状,能否区分关键系列?
- 重要线、点、边界是否在实际背景上具有足够对比?
- 键盘 Focus 是否能获取和 Hover 相同的数据?
- 移动端没有 Hover 时是否仍然可用?
- 是否提供数据表、明细或可复制的数据出口?
真正可访问的数据可视化不是牺牲美感,而是减少单点依赖。颜色仍然可以成为非常有效的视觉通道,但它应该和文字、位置、形状、模式共同工作。
常见问题
色盲友好色板是不是就能满足 WCAG?
不能。WCAG 还要求颜色不能成为唯一信息通道,关键图形可能需要满足非文本对比度,并要考虑键盘、文本替代等。
图表中的所有颜色都必须互相达到 3:1 吗?
不是。要求针对理解内容所必需的图形对象与相邻颜色。具体需根据图表结构判断,不能简单要求所有系列两两 3:1。
红绿配色一定不能用吗?
可以使用,但不要只靠红绿表达意义。增加文字、符号、位置或形状等冗余编码。
数据标签越多越好吗?
不是。标签要优先覆盖关键数据和难以区分的系列,避免信息过载。可以通过交互展开更多细节。
复杂图表是否必须提供数据表?
不是所有图表都强制,但对于依赖视觉细节理解的复杂数据,提供表格或等价文本是非常有效的可访问方式。