对比度检查器
计算两个颜色的 WCAG 对比度,并给出正文 / 大字在 AA、AAA 档位的通过徽章,附实时预览。全部在浏览器本地完成,数据不出设备。
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG 阈值——正文:AA ≥ 4.5、AAA ≥ 7;大字(≥ 24px,或 ≥ 18.7px 粗体):AA ≥ 3、AAA ≥ 4.5。
该工具完全在你的浏览器中运行,数据不会离开你的设备,不会上传到任何服务器。
使用方法
- 1为前景色输入 hex 或 rgb() 值,或使用取色器。
- 2同样设置背景色。
- 3查看对比度与 AA / AAA 徽章,或点一个预设组合。
- 4看一眼预览块,用肉眼确认这对配色。
对比度检查器
输入前景色和背景色——#333、#1F2937 这样的 hex,或 rgb()/rgba()——即可得到保留两位小数的 WCAG 对比度,并立刻看到四个关键档位的通过 / 不通过徽章:AA 与 AAA,分别对应正文和大字。预览区会用真实颜色渲染一段正文和大字示例。
计算用的是 WCAG 2.x 官方相对亮度公式,与 W3C 官方检查器一致——这里的 4.5 放到哪都是 4.5。预设里有一个 4.54:1 的压线灰白组合,让你直观感受 AA 及格线有多紧。
常见问题
对比度多少才算合格?
WCAG 2.x 规定:正文 AA 需要 4.5:1,AAA 需要 7:1;大字(≥ 24px,或 ≥ 18.7px 粗体)AA 需要 3:1,AAA 需要 4.5:1。UI 组件和图形元素需要 3:1。
对比度是怎么算出来的?
先把 sRGB 通道线性化,再合成相对亮度 L = 0.2126·R + 0.7152·G + 0.0722·B;对比度 = (较亮 L + 0.05) / (较暗 L + 0.05)。这正是 WCAG 2.x 规范原文公式,与 W3C 官方检查器结果一致。
半透明颜色怎么处理?
alpha 小于 1 的 rgba() 会先压平到白底再计算。WCAG 本身没有透明度概念——想要权威数值,请先把颜色合成到真实背景上,或直接输入合成后的不透明颜色。
相关工具
嵌入这个工具
一行代码把工具放到你的网站——它在访客的浏览器里运行。
<iframe src="https://zoyku.com/zh/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>