A1.04.1Luminance contrast设计研究

可辨性由亮度对比而非色相差决定

别名: 明度对比 · 亮度对比 · 等亮度 · isoluminance

概念解释

两个视觉元素能不能被快速、可靠地分辨开,主要取决于它们的亮度对比(luminance contrast,即明度差),而不是色相差有多大。即使两种颜色色相相差很远,只要亮度接近——这种状态叫等亮度(isoluminance)——它们之间的边界在细节辨认上仍然会显得模糊、难以定位。

这一点容易被误解成"颜色不一样就该能看清"。实际上"色相不同"回答的是"这两块是不是不同的东西","亮度对比"回答的是"能不能看清它们的边缘、读出它们上面的细节",两个问题的答案可以完全不同:一块红色和一块绿色即使亮度相同,人也能立刻说出"颜色不一样",但如果把它们做成细文字或者细线条,会明显更难读清。

机制

视觉系统处理"哪里有东西"和"这是什么颜色"走的不是同一套通道。负责精细空间细节、边缘定位的通道以亮度信号为主,对色相差异的空间分辨力天生就低得多——色度对比敏感度函数(chromatic CSF)的截止空间频率远低于亮度对比敏感度函数,也就是说色相差异只能在比较粗的空间尺度上被可靠感知,越往细节走,色相通道的分辨力衰减得越快。

等亮度边界之所以显得"发糊、边缘漂移",就是因为这条边界唯一能依靠的色度通道空间分辨力不够,而本该负责勾出清晰轮廓的亮度通道在这里没有信号可用。所以细文字、细线条、小图标这类需要精确边缘定位的内容,一旦只靠色相差而亮度接近,可读性会明显下降,即使色相本身对比很强烈。

怎么研究

判定两种颜色是否等亮度,经典方法是异色闪烁光度法(heterochromatic flicker photometry, HFP):让两种颜色的色块在同一位置快速交替闪烁,被试调节其中一色的亮度,直到主观感受到的闪烁感最弱——此时两色在知觉上等亮度。另一种做法是最小运动技术(minimum motion technique),原理类似,用运动感而非闪烁感做指标。

常见自变量:色相角差异、亮度差(或人为控制为等亮度)、测试图案的空间频率。常见因变量:对比检出阈限、边缘定位精度、细节辨认准确率。

在界面研究里,这套方法常被用作最坏情况测试:把配色方案的亮度人为拉平,看信息是否还能仅靠色相被读出——如果不能,说明该配色在实际渲染(受设备色域、环境光影响,亮度关系可能漂移)里存在风险。

方法论上要注意:等亮度点存在明显的个体差异(受年龄、晶状体黄变、个人光谱敏感度影响),实验室测得的某一对"等亮度"颜色,换一个人可能就不等亮度了,不能当作对所有用户都成立的固定数值。

边界

  • 大面积色块不受此限制。 明度对比法则主要约束的是细节辨认与边缘定位;大面积色块之间要不要区分开,本身不太依赖锐利边缘,靠色相差已经足够。
  • 不是"能不能区分类别",是"能不能看清细节"。 两块高饱和但等亮度的颜色,人依然会说"这两个不一样",只是定位、读数、辨认其上文字或图案的速度会明显变慢。
  • 老龄化会放大这个问题。 晶状体随年龄发黄,进一步压低蓝黄方向的色度信号,年长用户对等亮度边界的辨认会比年轻用户更差。
  • 等亮度点会随设备漂移。 实验室用精确校准的显示器测出的等亮度值,搬到色域、白点不同的实际设备上不必然成立。

怎么落地

  • 检查任意两个需要被区分的相邻元素(文字与背景、图标与背景、边框与背景)之间的亮度差,而不只是看色相差是否够大;粗略判断法是把界面截图转成灰度图,看关键区分是否还能看出来。
  • 细线条、小字号文本、密集排列的小图标,优先靠明度差拉开层级,色相差作为辅助而非主力手段。
  • 大面积背景分区、装饰性色块可以只靠色相区分,不必强制拉开明度。
  • 验证办法:把配色方案转换为灰度图,或用色觉模拟工具关闭色相通道,检查关键信息(文字、图标边缘、状态区分)是否仍然可辨认;转灰度后看不清的地方,就是等亮度风险点。

延伸

  • 同组A1.04.2 对比敏感度随空间频率变化,细笔画需要更高对比 · A1.04.3 对比敏感度随年龄下降,且在低照度下进一步下降
  • 相邻J2.03 信息不依赖颜色 · F3.03 色彩与明度层级 · J2.10 非文本对比度
  • 站内检索luminance contrast · isoluminance · chromatic contrast sensitivity · heterochromatic flicker photometry

同组卡片

快捷操作

分享

分享当前页面

ios_share

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