U4.05.4Colour-only status cues fail accessibility requirements设计
仅靠颜色区分的状态提示不满足无障碍要求
别名: WCAG 用色 · 状态指示无障碍
概念解释
界面里"红色=错误、绿色=通过"这类状态提示,如果颜色是唯一的区分手段,就不只是体验问题,而是不合规:WCAG 明确要求颜色不能作为传达信息的唯一视觉手段(Use of Colour 条款)。仪表盘的状态点、表单的校验红框、表格里标红的问题行,只要摘掉颜色就看不出状态,都属于这一类。
机制
合规逻辑与前面两叶的机制是同一条链:色觉缺陷读者收不到色相差异,于是信息在他们面前不存在——这违反的是无障碍基线而非审美偏好。屏幕阅读器场景更严:颜色根本不进入无障碍树,纯色状态对辅助技术不可见。所以规范同时堵住两条路:视觉退化(色觉缺陷、强光、黑白打印)与设备退化(读屏)。工程上这也解释了为什么纯色指示几乎总是带图标或文字:那是合规要求,不是风格选择。
边界
要求针对"颜色承载信息"的场景,不禁止颜色本身:装饰用色、已由文字或图标承载的状态再加颜色,完全合规。也不要求每种状态配图标——位置约定(错误信息出现在输入框下方)加文字说明即可达标,重点是信息在无色、无图标的条件下仍可判定。测试对象是最终界面而非设计稿:设计稿里的红色标注框若在实现中只剩变色,合规就被打破了。
怎么落地
- 排查界面里所有"只变色"的状态表达,逐一补第二通道:图标、文字标签、边框样式或位置约定,至少其一。
- 表单校验除红框外加错误文案与 aria 属性;仪表盘状态点加形状或文字;表格问题行加标记列而非仅底色。
- 验证:把界面截图转灰度交给测试者,每个状态的含义仍可判定即达标;再开读屏器过一遍,状态变化有可感知的播报。