H1.05.3error identification not by color alone设计研究

错误标识不能仅靠颜色

别名: 错误不只靠红色 · color alone error · non-color error cue

概念解释

把框描成红色、把标签变红,若没有同时出现的文字、图标或线型变化,这只是一次色相变化。错误标识不能仅靠颜色指:人即使在灰度、色觉异常或把对比拉到极端时,仍能指出「这一项当前是错的」,并且能读到错在什么。颜色可以当加速线索,不能当唯一线索。这条谈的是错误状态怎么被看见,不是焦点该落到哪、字段要不要滚进视口。把错误句子用程序化属性挂到字段上,是给辅助技术的关联,不能代替给视力用户的非颜色记号。

机制

色觉异常、强光下的手机、灰度打印、夜间低饱和主题,都会把「红框」收成「略深的框」。红色在部分文化里也不等于停止。人用来找错误的若只有色相差,搜索在这些条件下退化成逐项阅读。第二层是状态与强调争用:产品已经用红色做主按钮或促销价,错误再只用红,色相失去「这是失败」的专属权,人要把这项红和那项红做语义分类,负荷回到阅读正文。可靠的标识是形状或文字通道与颜色并行:字段旁的短句、输入框从实线变警示线型或加图标、标签后的「错误」字样。短句还承担原因,图标只承担「这里有错」。两者缺文案就只剩报警,缺非颜色形状就只剩对能分辨红绿的人有效。

怎么研究

把同一张失败表做成「只变红」「红 + 图标」「红 + 文案」「灰度下的文案与线型」。纳入色觉异常模拟和真的色觉异常参与者。

自变量:错误通道(色相 / 图标 / 文案 / 线型)、背景主题(亮 / 暗 / 高对比)、是否模拟红绿色觉异常。 因变量:指出全部错误项的用时与漏报、在灰度截图上能否标出错误项、把促销红当成错误的次数。

实验室显示器校准良好会低估户外和廉价屏上的色相崩溃。要用模拟滤镜和灰度打印,不要只问「你觉得红够不够显眼」。

边界

色盲用户里仍有一部分能分辨明度差;若错误红和正常灰的明度足够,他们可能「看得见边框变了」,但仍然读不出「这是错误」除非有文案。反过来说,只加图标不加文案,图标语义要先被学会,生僻的感叹号在空心方框里会被当成装饰。品牌强制所有描边都用品牌红时,错误必须改走线型、图标和文字,不能再加一层更红。闪烁或纯动效标识会伤害光敏用户,不能拿来当颜色的替代。

怎么落地

  • 每个错误态至少同时具备:一句放在字段旁的错误文案,以及一种不依赖色相的形状变化(加粗描边、虚实线切换、或固定位置的错误图标)。
  • 不要用「只有红框、标签没改、没有句子」作为失败态;主按钮已经是红色时,错误更要靠文案和图标,而不是更红。
  • 在灰度或色觉异常模拟下检查:错误项仍能从正常项里被指出来,且原因可读。
  • 验证:截一张失败表做成灰度,请未参与设计的人圈出有问题的字段;圈不出或漏圈,说明只靠了颜色。再用红绿色觉异常滤镜走一遍。把错误文案去掉只留红框,确认这一种被当作失败的设计不得进入发布。

延伸

  • 同组H1.05.1 提交失败需把焦点移到首个错误字段 · H1.05.2 错误字段需在视口内可见
  • 相邻J2.03 信息不依赖颜色 · A1.06 色觉缺陷 · H1.15 表单的可访问性标注
  • 站内检索color alone · error icon · color vision deficiency

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/H1.05.3