免费无障碍工具
颜色对比度检测工具
直接在这里按 WCAG 2.2 比较文字颜色和背景颜色，或输入页面网址，找出所有低于最低对比度的文字，并查看测得的颜色以及最接近的可通过颜色。
对比度计算器
输入文字颜色和背景颜色。所有计算都在您的浏览器中完成。
16 像素的普通文字看起来是这样的。
24 像素的大号文字
按钮轮廓对比度4.54:1
| 普通文字，AAWCAG 1.4.3，需要 4.5:1 | 通过 |
|---|---|
| 大号文字，AAWCAG 1.4.3，需要 3:1 | 通过 |
| 普通文字，AAAWCAG 1.4.6，需要 7:1 | 未通过 |
| 大号文字，AAAWCAG 1.4.6，需要 4.5:1 | 通过 |
| 图标、边框和表单字段WCAG 1.4.11，需要 3:1 | 通过 |
在此背景上能通过的最接近的文字颜色
大号文字指至少 24 像素，或 18.66 像素的粗体文字。对比度会向下取整，因此 4.499:1 显示为 4.49:1 并判定为未通过，这正符合 WCAG 的本意。
或扫描一个页面，查找对比度低的文字
免费。约 20 秒即可检查您输入的地址。
此工具检查什么
任意两种颜色的 WCAG 对比度
计算器使用 WCAG 2.2 定义中的相对亮度公式，分别显示普通文字、大号文字和界面组件在 AA 级和 AAA 级下的结果。计算在您的浏览器中进行。
计算出可通过的颜色
当一组颜色未通过时，它会找出色相相同、能达到 4.5:1 或 7:1 的最接近的文字颜色，让您尽量少改动设计。
页面上所有对比度低的文字
页面扫描会在真实的 Chrome 浏览器中运行 axe-core 的 color-contrast 规则，列出每个未通过的元素及其文字颜色、背景颜色、字号和对比度。
按颜色组合分组
未通过项按文字颜色和背景颜色分组，因为修改一次主题颜色，通常就能修复所有使用该颜色的元素。
大号文字的正确阈值
至少 24 像素或 18.66 像素粗体的文字，只需达到 3:1 而不是 4.5:1。扫描会根据每个元素计算后的字号和字重，套用正确的阈值。
无法测量的内容及原因
位于图片、渐变或重叠元素上的文字会连同原因单独列出，让您清楚知道哪些需要目测检查。
它无法检查什么
- 无法测量照片、渐变或视频上的文字。软件无法知道每个字母背后是图片的哪一部分，因此这些文字会列出来供您检查。
- 无法检查悬停、焦点或其他状态。扫描看到的是页面加载时的样子；这些状态的颜色请用计算器检查。
- 无法按 WCAG 1.4.11 扫描页面上的图标、边框和表单字段。不过，计算器会为您输入的任意一组颜色显示 3:1 的结果。
- 无法读取图片中的文字，例如把文字直接做进图片里的横幅。
- 无法测试您输入的页面以外的页面。完整的免费扫描最多可测试五个关键页面。
为什么重要
对比度低是网络上最常见的无障碍问题。WebAIM 在 2026 年对排名前一百万的网站首页进行的分析发现，83.9% 的首页存在对比度低的文字，平均每页 34 处。
浅淡的文字对低视力或色觉缺陷人士来说难以阅读，对在强烈阳光下使用手机的任何人也是如此。WCAG 2.2 的 AA 级成功准则 1.4.3 规定，普通文字的对比度最低为 4.5:1，大号文字为 3:1。
它也是修复成本最低的问题之一：在大多数网站上，几乎所有未通过项都源于少数几种主题颜色，修改这些颜色就能一次修复所有页面。
如何解读结果
- 对比度
- 从 1:1（两种相同的颜色）到 21:1（白底黑字）。对比度会向下取整，因此显示为 4.49:1 的颜色组合未达到 4.5:1 的最低要求。
- 普通文字，AA（4.5:1）
- WCAG 1.4.3 对正文、链接、标签和按钮文字规定的最低要求。
- 大号文字，AA（3:1）
- 适用于至少 24 像素或 18.66 像素粗体的文字。WCAG 将大号文字定义为 18 磅，或 14 磅粗体。
- AAA（7:1 和 4.5:1）
- WCAG 1.4.6 中的增强级别。符合 AA 级并不需要达到它，但它能帮助更多读者。
- 图标、边框和表单字段（3:1）
- WCAG 1.4.11 要求，用户使用控件和图形时需要看清的部分，与相邻颜色的对比度至少达到 3:1。
- 未通过的文字
- 扫描测得低于阈值的每个元素，附有其选择器、颜色、字号和对比度。展开其中一项即可查看其标记代码，以及可用时的截图。
- 需目测检查
- axe-core 无法测量的文字及原因，例如文字背后有图片或渐变。
如何修复最常见的问题
白底灰字
#767676 大约是在白色背景上能达到 4.5:1 的最浅灰色（4.54:1）。像 #999999（2.84:1）这样更浅的灰色，是页脚、图片说明、占位符和价格未通过的常见原因。
品牌色按钮上的白色文字
如果品牌色上的白色文字未通过，请把按钮背景加深几个色阶，或改用深色文字。同时检查悬停和焦点状态的颜色，因为它们往往更浅。
表单中的占位符文字
占位符文字也是文字，同样需要 4.5:1。更好的做法是在字段上方放置可见的标签，让占位符不再是唯一的说明。
图片和轮播图上的文字
把文字放在纯色或半透明的底色上，或给图片加一层深色遮罩，然后检查文字背后图片最浅的部分。
促销角标和小字
禁用控件中的文字不受 1.4.3 约束，但促销角标、价格和法律声明小字并不豁免。它们往往是网店页面上最浅淡的文字。
关于此工具的问题
WCAG 要求多大的对比度？
AA 级要求普通文字 4.5:1、大号文字 3:1（成功准则 1.4.3），界面组件和有意义的图形 3:1（1.4.11）。AAA 级要求 7:1 和 4.5:1（1.4.6）。
什么算大号文字？
WCAG 将大尺寸文字定义为至少 18 磅，或 14 磅粗体。换算成 CSS 像素约为 24px，或 18.66px 粗体。
标志也必须达到最低对比度吗？
不必。WCAG 1.4.3 豁免了标志以及作为标志或品牌名称一部分的文字，也豁免了纯装饰性文字和非活动控件中的文字。
为什么扫描会把图片上的文字列为待复核？
axe-core 测量的是纯色。当文字背后有图片、渐变或其他元素时，它无法判断哪些颜色相接，因此会把该元素报告出来交由人工检查，而不是凭猜测下结论。
我需要达到 AAA 级对比度吗？
符合 AA 级并不要求达到 AAA，W3C 也不建议要求整个网站都达到 AAA。不过，在设计允许的情况下，让正文达到 7:1 仍是好的做法。
APCA 是 WCAG 的一部分吗？
不是。APCA 是另一种对比度计算方法，曾被讨论用于 WCAG 3，而 WCAG 3 仍是草案。目前的符合性仍以本工具计算的 WCAG 2 对比度来衡量。
需要修复方案，而不只是问题清单？
无障碍修复报告（$174，一次性）以完整的免费扫描为起点，增加更多页面、每项发现需要做的修改、PDF 以及验证修复的复测。