什么是WCAG对比度检查器？

WCAG颜色对比度检查工具，可计算前景色与背景色之间的对比度，并报告该颜色组合是否符合WCAG 2.1 AA级和AAA级无障碍标准中对普通文本和大号文本的要求。

检查器按 WCAG 2.1 的相对亮度公式计算任意两种颜色的对比度 — 可用 hex、rgb()、hsl() 或颜色名输入 — 并按 AA(正文 4.5:1、大字号 3:1)与 AAA(7:1、4.5:1)给出评分;也会检查表单边框、图标等 UI 组件需要的 3:1 底线。如果组合不达标,建议面板会在原色基础上微调前景明暗直到通过,同时给出 AA 与 AAA 两档目标。

使用方法

1. 输入或选择前景色(文字颜色)和背景色 — 可粘贴 hex、rgb()、hsl() 或 CSS 颜色名,也可使用取色器。
2. 查看对比度数值，以及在正常文字、大号文字和UI组件方面是否通过WCAG AA和AAA标准。
3. 若对比度未达标，可使用建议的颜色调整方案找到最接近的无障碍颜色组合。

何时使用

• 上线落地页之前,核对品牌色在白底或深色背景上的表现。
• 挑出默认、悬停、禁用三种状态都合格的按钮配色。
• 检查占位符文字和禁用输入框,它们常常掉到 4.5:1 以下。

结果

UI设计师检查其品牌蓝色#3B82F6与白色#FFFFFF的对比度——4.5:1的比率在大号文字上通过AA标准，但在正常文字上未通过AAA标准。将颜色加深为#2563EB后两者均通过。

常见问题

正文要达到多少对比度才能通过 WCAG AA?

需要 4.5:1。大字号(至少 18pt 常规或 14pt 粗体)放宽到 3:1。AAA 把这两个数提高到 7:1 和 4.5:1。输入框边框这类 UI 组件只需要 3:1。

深灰加白底我看着挺清楚,为什么会被判不合格?

个人觉得能看清,和实测对比度是两回事。4:1 在校准过的屏幕、光线良好的环境下确实清晰,但对于低视力用户、反光环境或老旧显示器,就会吃力。WCAG 卡的是最差情况,不是最佳情况。

图标和表单边框也要满足正文的对比度吗?

不需要。WCAG 2.1 给非文字组件单独设了 3:1 的规则,涵盖边框、图标、焦点指示器、图表元素等。纯装饰图形可以豁免,但凡传递信息的元素都必须达到 3:1。

品牌色不能动,如何修不合格的组合?

当品牌色不可改时,改背景。把背景适当加深或调亮,直到比例达标。本工具的建议面板会按小步幅微调前景,你也可以用同样的思路改背景。

WCAG 对半透明文字或图片上的文字有规则吗?

WCAG 要求评估文字下面最差像素的对比度。图片上的文字一般要加一层半透明遮罩或纯色底板。测试实际渲染出来的颜色,不能只看最初输入的 hex。

相关工具