非文本对比度

要求内容

1.4.3 对比度规则仅涵盖文本；1.4.11 将较低要求（3:1，而非 4.5:1）扩展至另外两类对象。第一类是 UI 组件的视觉标识——让用户辨认出按钮是按钮、焦点环所在位置、表单字段边界所在位置——必须与相邻表面达到 3:1 对比度。第二类是有意义图形中用户需要识别的部分——图表柱、传达状态的图标、指示点——也必须达到 3:1。

如何满足

• 为每个表单字段提供可见边框，与页面背景的对比度至少达到 3:1。
• 将焦点指示器（:focus-visible 轮廓）与组件及页面背景的对比度均设为至少 3:1。
• 对于幽灵按钮（ghost button）或轮廓按钮，边框本身必须与页面背景达到 3:1 对比度。
• 对于切换开关，开/关状态的滑轨和滑块在交界处必须有 3:1 对比度。
• 对于传达含义的图标（“信息” i、“警告”三角、“勾选”标记），图标笔画必须与背景达到 3:1 对比度。
• 对于图表系列，用于区分柱状图/折线的颜色彼此对比度须达到 3:1，或搭配图案/纹理加以区分。

常见失败情形

• 表单字段无可见边框，或 #e5e5e5 on #fff 边框对比度仅为 1.3:1——对低视力用户几乎不可见。
• 浏览器默认焦点轮廓被 outline: none 覆盖后从未补充替代样式。
• 幽灵按钮在透明背景上使用白色文字，搭配 1px 灰色边框——按钮实际上是不可见的。
• 切换开关在”关闭”状态下，滑块颜色与滑轨极为接近，几乎不可分辨。
• 卡片角落的状态图标（绿色勾、红色叉）颜色与卡片背景对比不足。
• 饼图切片颜色彼此对比度仅为 2:1——视力正常的用户勉强能分辨边界，低视力用户只看到一整片色块。

为何重要

1.4.11 在 WCAG 2.1 中新增，常令团队措手不及——大多数对比度检查仅覆盖文本。表单字段边框、焦点环和幽灵按钮是典型的失败模式。axe、Stark 等工具现已支持非文本对比度检测，但设计师在设计阶段仍常常忽略，因为默认思维是”对比度 = 文本对比度”。修复通常意味着加粗边框、加深设计系统中的灰色。