悬停或聚焦态改变的视觉信息需保持同等对比度
别名: 悬停对比 · focus state contrast · hover affordance contrast
概念解释
默认态过了对比,不等于指针移上去、键盘停上去之后还过。悬停、聚焦、按下这些态若靠一块更浅或更深的颜色来报告「你正在这里」,这块颜色本身也是视觉信息,要达到与默认态同等的对比门槛。状态对比(state contrast)问的不是控件静坐时能不能被看见,而是态与态之间那次改变还能不能被看见。
「稍微深一点」是最常见的偷懒:正常视力在好屏幕上能感到那 4% 的亮度差,低视力或强光下等于没变。
机制
态的改变是一条瞬时信号。视觉系统靠的是局部差异,不是绝对色值:一块按钮从 #2563EB 变成 #1D4ED8,差值可能只有设计者自己知道。若这是唯一的「现在悬停在此」线索,失败的是可感知的反馈,不是美观。
键盘聚焦更苛刻。指针用户还有光标位置当第二通道;键盘用户的「我在哪」几乎完全靠聚焦图形。聚焦环若对比不足,等于把光标藏起来。环还可能画在已经很亮或已经很暗的品牌色按钮上,环与按钮、环与外背景要分开量,有一边溶掉就算这条态信息没送达。
按下、选中、展开的指示若只用透明度叠加,合成之后的邻色已经不是色板上的那两个值,态差会被进一步吃掉。
怎么研究
做一张态矩阵截图:默认 / 悬停 / 聚焦 / 按下 / 选中,浅色与深色外观各一套。对每一格取样「这条态用来示意的那块像素」与其紧邻色,而不是只取样默认填充。
自变量:态与默认的亮度差、聚焦环宽度与环色、是否另有形状变化(外描边、下划线、位移)。 因变量:在模糊或对比压缩下,观察者能否指出哪一个控件处于悬停或聚焦。
键盘-only 走查时,请第二人看屏幕报出「焦点现在在哪个控件」——报错的每一处都是态对比失败,而不是焦点顺序失败。
边界
禁用态通常被允许更低对比,因为它的任务是示弱,不是示意「你在这里」。纯装饰的悬停微动(卡片轻微上浮且无信息增量)不在判据内;若上浮是唯一的可点暗示,它就重新变成态信息。触控设备没有悬停,这条对触控用户不成立,但键盘聚焦仍然成立。高对比模式会改写自定义悬停色,态差可能被系统色强制拉大或抹平,要在那种模式下另测。
怎么落地
- 悬停、聚焦、按下、选中每一种会改变含义的视觉,都按非文本对比门槛验收,不要只验收默认态。
- 不要把态差做成「同一色相再减一点透明度」。加描边、加下划线、改变形状或位置,让差异不依赖那 4% 的亮度。
- 聚焦环与控件填充、聚焦环与环外背景两对都要过;只过其中一对仍会在某一侧溶掉。
- 验证:用键盘把焦点逐个走过主路径,同时开低对比或模糊滤镜。每一个「不知道焦点在哪」「看不出有没有悬停」的控件记失败。