# 颜色对比度检测工具

<https://www.fixreports.com/zh/color-contrast-checker>

直接在这里按 WCAG 2.2 比较文字颜色和背景颜色，或输入页面网址，找出所有低于最低对比度的文字，并查看测得的颜色以及最接近的可通过颜色。

## 此工具检查什么
- 任意两种颜色的 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 对比度来衡量。

## 来源
- [W3C：理解 WCAG 2.2 成功准则 1.4.3 对比度（最低）](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum)
- [W3C：理解成功准则 1.4.6 对比度（增强）](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced)
- [W3C：理解成功准则 1.4.11 非文本对比度](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast)
- [W3C：WCAG 2.2 中相对亮度的定义](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance)
- [Deque：axe-core color-contrast 规则](https://dequeuniversity.com/rules/axe/4.13/color-contrast)
- [WebAIM：The WebAIM Million（2026）](https://webaim.org/projects/million/)