复选框的选中态需高对比
别名: 勾选对比 · checked contrast · 选中可见性
概念解释
复选框的选中态(checked state)必须在一瞥之间能和未选中分开:对勾、填充、描边三者至少要有一项把「已成立」从「尚未成立」里拉出来。低对比的浅灰对勾、只靠色相变化的填充、或几乎看不见的细线勾,都会让人把已选项读成未选。这里争的是状态可辨,不是方框大不大、标签能不能点。
机制
勾选是一个很小的内部图形,叠在边框和页面底色上。人分辨它靠的是图形—背景对比(figure–ground contrast),不是「知道这里有个复选框」。对勾的笔画若接近底色,或选中只表现为饱和度微调,注视一旦离开该行,状态就会从工作记忆里掉出去,回头扫视时只能重新猜。
未选中也需要足够的边框,否则「空」和「没有控件」会混。选中态的对比是在「空框已经可见」的前提上再加一层;两层都弱,扫描一组权限时就会漏勾或重复勾。色盲用户尤其不能把红绿当作唯一差别,亮度差必须自己站得住。
怎么研究
用快速扫视任务:在限时内标出哪些项已勾。材料做成几档对比——高对比对勾、低对比浅勾、仅色相变化、仅加粗边框。
自变量:对勾与底的对比度、是否另用填充、色相是否为唯一线索、项目数量。 因变量:漏报(已勾看成未勾)、虚报(未勾看成已勾)、回扫次数、自信评分与实际准确率的差距。
把界面做成灰度再测一次。若灰度下正确率明显掉,说明选中态在吃色相,亮度通道没有独立工作。
边界
不确定态(横线或半填充)必须既能区别于空,也能区别于勾;若把不确定画得太像对勾,高对比反而会让人把「部分选中」读成「全选」。禁用的已勾选项对比通常被整体压低,这是在表达「改不了」,不要为了对比把禁用项画得像可点的选中。深色背景上的白对勾、浅色背景上的深对勾,对比策略不能对调后仍沿用同一套不透明度。打印页和投影场景失去颜色时,只靠品牌色填充的选中态会消失,对勾的形状必须在单色下仍可读。
怎么落地
- 让对勾或等效内部图形与框内底色形成稳定的明度差,不要只改色相。
- 未选中保留清晰边框,避免空状态融进背景;选中再叠加不可被忽略的内部标记。
- 在灰度和模拟色盲下各扫一遍列表,已勾与未勾仍能分开才算过。
- 验证:缩到实际使用的字号和间距,让人在两秒内数出已选项。数错的每一项都是对比不够,而不是用户不认真。