E3.01.3checkbox checked-state contrast设计研究

复选框的选中态需高对比

别名: 勾选对比 · checked contrast · 选中可见性

概念解释

复选框的选中态(checked state)必须在一瞥之间能和未选中分开:对勾、填充、描边三者至少要有一项把「已成立」从「尚未成立」里拉出来。低对比的浅灰对勾、只靠色相变化的填充、或几乎看不见的细线勾,都会让人把已选项读成未选。这里争的是状态可辨,不是方框大不大、标签能不能点。

机制

勾选是一个很小的内部图形,叠在边框和页面底色上。人分辨它靠的是图形—背景对比(figure–ground contrast),不是「知道这里有个复选框」。对勾的笔画若接近底色,或选中只表现为饱和度微调,注视一旦离开该行,状态就会从工作记忆里掉出去,回头扫视时只能重新猜。

未选中也需要足够的边框,否则「空」和「没有控件」会混。选中态的对比是在「空框已经可见」的前提上再加一层;两层都弱,扫描一组权限时就会漏勾或重复勾。色盲用户尤其不能把红绿当作唯一差别,亮度差必须自己站得住。

怎么研究

用快速扫视任务:在限时内标出哪些项已勾。材料做成几档对比——高对比对勾、低对比浅勾、仅色相变化、仅加粗边框。

自变量:对勾与底的对比度、是否另用填充、色相是否为唯一线索、项目数量。 因变量:漏报(已勾看成未勾)、虚报(未勾看成已勾)、回扫次数、自信评分与实际准确率的差距。

把界面做成灰度再测一次。若灰度下正确率明显掉,说明选中态在吃色相,亮度通道没有独立工作。

边界

不确定态(横线或半填充)必须既能区别于空,也能区别于勾;若把不确定画得太像对勾,高对比反而会让人把「部分选中」读成「全选」。禁用的已勾选项对比通常被整体压低,这是在表达「改不了」,不要为了对比把禁用项画得像可点的选中。深色背景上的白对勾、浅色背景上的深对勾,对比策略不能对调后仍沿用同一套不透明度。打印页和投影场景失去颜色时,只靠品牌色填充的选中态会消失,对勾的形状必须在单色下仍可读。

怎么落地

  • 让对勾或等效内部图形与框内底色形成稳定的明度差,不要只改色相。
  • 未选中保留清晰边框,避免空状态融进背景;选中再叠加不可被忽略的内部标记。
  • 在灰度和模拟色盲下各扫一遍列表,已勾与未勾仍能分开才算过。
  • 验证:缩到实际使用的字号和间距,让人在两秒内数出已选项。数错的每一项都是对比不够,而不是用户不认真。

延伸

  • 同组E3.01.1 复选框表示各项独立开关 · E3.01.2 标签本身应可点击
  • 相邻E3.12 三态与不确定态 · E1.02 按钮的状态 · F3.03 色彩与明度层级
  • 站内检索checked-state contrast · checkbox visibility · figure-ground

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.01.3