A1.05.8Designing color discriminability along opponent axes设计

界面配色的可辨识性应按对立通道而非孤立色相设计

别名: 对立通道配色 · opponent-axis color design · 红绿色觉缺陷友好配色

概念解释

判断"这几个颜色够不够容易区分",不能只看色相环上的角度差,而要看它们在红绿、蓝黄、黑白这三条对立通道上各自的读数差异。两个颜色在色相环上看起来相隔很远,如果恰好落在同一条对立通道的相近位置上(比如都偏红绿轴的中性区间,主要靠蓝黄轴拉开差异),对某一类色觉缺陷用户而言,其中一条通道失效后,两者可能会变得几乎无法区分——这是仅看色相角度差看不出来的风险。

这条把前面几条关于对立编码、后像、不可能色的机制知识,收束成一条可以直接指导配色决策的判断标准:颜色搭配够不够安全、够不够醒目,要按它在对立通道上的分离程度算,不能只按肉眼看到的色相直觉算。

机制

对立通道之所以能作为配色可辨识性的判断依据,是因为它对应着两个现实约束:其一,人群中最常见的色觉缺陷(红绿色觉缺陷)本质上是红绿这条对立通道的功能大幅减弱或缺失,患者主要还能依靠蓝黄通道和黑白通道来区分颜色;其二,即使是正常三色视觉,红绿轴和蓝黄轴各自的空间分辨力和检出灵敏度也不对等(红绿轴通常表现更好,蓝黄轴天生较弱、周边视野下降更快)。

这意味着两个颜色之间的"可辨识距离",实际上要拆开来看它们在每一条通道上分别贡献了多少分离度:如果两个颜色的差异几乎全部集中在红绿轴上,那么这个差异对红绿色觉缺陷用户而言基本不存在,只能靠残余的亮度差异勉强区分;如果差异同时分布在蓝黄轴和黑白轴上,多数色觉状况下这个差异都能被保留下来。按孤立色相判断配色方案,容易高估这类"单靠红绿轴分离"的配色组合的实际可辨识度。

边界

  • 这条主要针对需要保证不同色觉群体都能区分的场景(状态提示、数据可视化、地图分区),如果颜色只承担装饰作用、不承载需要被所有用户读出的信息,不必严格按这个标准约束。
  • 蓝黄轴本身在周边视野和低照度下会进一步弱化,如果关键颜色差异只落在蓝黄轴上、又出现在周边视野或暗光场景,同样会遇到可辨识度不足的问题,不是"只要不靠红绿轴就绝对安全"。
  • 不能替代亮度对比这条更基础的规则。 无论按哪条对立通道设计颜色差异,亮度对比不足仍然会削弱可辨识性,这条是在亮度对比已经合格的基础上,进一步处理色相层面的辨识问题。

怎么落地

  • 设计一组需要互相区分的状态色或分类色时,不要只看它们在色相环上是否"看起来离得远",检查它们是否同时在黑白(亮度)通道上也有明显差异——亮度差异是所有色觉状况下都保留的差异来源,最可靠。
  • 如果产品的可辨识性要求较高(数据可视化配色、错误/警告/成功状态色),用色觉缺陷模拟工具(模拟红绿色觉缺陷视角)检查候选配色,重点看那些在正常视角下"看起来很不一样"的颜色对,是否在模拟视角下被压缩到了几乎无法区分的程度。
  • 避免把关键的二元或多元状态区分完全押在红绿轴上(经典的"红色代表错误、绿色代表正确"就是典型的风险模式),至少叠加形状、图标、亮度差异中的一种作为冗余通道。
  • 验证办法:把最终配色方案在色觉缺陷模拟工具下截图对比,逐一核对每一对需要被区分的颜色在模拟视角下是否仍然可辨,任何一对模糊不清都需要重新调整亮度或改用不同对立轴上的颜色。

延伸

  • 同组A1.05.5 视锥响应之后,信号被重新编码为红绿、蓝黄、黑白三条对立通道 · A1.05.6 对立编码解释了为何不存在"偏红的绿色"这类色彩组合 · A1.05.7 色彩后像现象由对立通道的适应性反转导致
  • 相邻A1.06 色觉缺陷 · A1.04.1 可辨性由亮度对比而非色相差决定
  • 站内检索opponent color design · color blindness simulation · color-safe palette · data visualization color

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/A1.05.8