如何检查按钮与 UI 组件的非文本对比度

WCAG 的对比度规则并不止于文本。成功标准 1.4.11——非文本对比度——要求识别和操作 UI 组件所需的视觉信息至少达到 3:1:输入框边框、焦点指示器、复选框、开关,以及承载含义的图标。这是审计最常漏掉的一条,因为一个页面可以文本对比度无可挑剔,表单字段却融进背景里。检查它用的还是同一个免费工具:Contrast Checker 的弹窗,在 Chrome 里直接从线上页面取色。

什么必须过 3:1——对着什么测

非文本对比度对相邻颜色测量。靠边框识别的输入框,边框要对页面背景达到 3:1。焦点环要对它周围的东西达到 3:1。作为理解控件唯一线索的图标——一只孤零零的放大镜、一个垃圾桶——要对自己的背景达到 3:1。按钮更微妙:只要按钮以其他方式可辨识,WCAG 并不强制按钮的填充色对页面达到 3:1,但它的文字属于文本,仍需对填充色达到 4.5:1,焦点指示器也仍需 3:1。

什么可以豁免

禁用控件、纯装饰性图形,以及外观保持浏览器默认的组件(未加样式的原生复选框)不必达标。而且没有更严的档位可追:与文本不同,非文本对比度没有 AAA 条款——3:1 就是全部规则,位于 AA 级。

在弹窗里取那两个相邻颜色

在页面上打开 Contrast Checker 弹窗,用吸管取真正定义组件的那对颜色:边框对页面背景、图标对自身填充、焦点环对它落在的东西。弹窗在本地算出比值并给出判定——3:1 及以上过 1.4.11。取渲染后的像素在这里比文本还重要,因为边框常用半透明颜色绘制,最终比样式表里写的更浅。

测状态,别只测静止外观

大多数非文本失败藏在状态里。用 Tab 遍历页面,取焦点指示器的色——白页上一圈淡淡的描边就是经典的漏网之鱼。再查勾选、选中和悬停状态,以及那种只变成一抹浅红的校验边框。每个状态的指示器都要对其相邻颜色同样达到 3:1。

诚实的边界同样适用

落在渐变、照片或柔和阴影上的组件没有单一的相邻颜色,Contrast Checker 会报为无法测量,而不是发明一个比值。取它身后的最亮点和最暗点,让组件对两者都达标。一切在 activeTab 下本地运行——扩展只在你调用时读取页面,没有任何颜色离开你的浏览器。