颜色的使用

要求内容

当 UI 元素的含义依赖于其颜色时——红色错误消息、绿色”可用”指示点、正文中的蓝色链接、图表中的彩色折线——该含义还必须通过颜色以外的方式传达。本成功准则并不禁止使用颜色，而是禁止仅靠颜色来传达信息。大约每 12 名男性中有 1 人、每 200 名女性中有 1 人存在某种形式的色觉障碍；此外，单色打印输出、暗淡屏幕和强光环境也常常使颜色区分失效。

如何满足

• 对段落文本中的链接添加下划线。仅使用不同颜色是不够的——这是 1.4.1 的典型失败场景。
• 为每种状态颜色配以标签或图标：红色配”错误”文字，绿色配复选标记，黄色配警告三角形。
• 对必填表单字段同时使用颜色（红色星号）和文字指示（“必填”）进行标记。
• 对图表使用不同的线条样式（实线、虚线、点线）或数据点符号，而非仅靠颜色区分。
• 将”可用 / 忙碌 / 离开”状态指示器映射为颜色加图标形状（实心圆、空心圆、短横线）。
• 对于表单验证，无效状态除红色边框外，还必须提供错误消息文本。

常见失败情形

• 正文中的链接仅用略有不同的蓝色显示，无下划线。红绿色盲用户无法区分。
• 必填字段星号以红色显示，但无 aria-required，也无”必填”标签。
• 图表中五个系列仅靠颜色区分——将图表打印为灰度后，折线变得无法辨别。
• 错误状态仅用红色边框标识，无错误消息文本。
• “在线 / 离线”指示器仅改变颜色，形状或标签均不变。
• 饼图中亮度相近的扇区仅在图例中用颜色标注。

重要性

这是最常被引用的 1.4.x 违规项之一，也是在设计阶段最容易修复的问题——添加下划线、添加图标、添加标签即可。事后修复则更为困难，因为品牌调色板往往建立在仅靠颜色传递信号的基础上。QualiBooth / axe / Lighthouse 规则并不总能自动检测到此类问题，因此通常需要人工审查才能发现。