颜色对比度检查器
输入文本颜色和背景颜色,即可获得 WCAG 2.2 对比度比值、普通文本、大号文本和界面图形在 AA 与 AAA 级别下的通过或未通过结果,并给出最接近且合格的颜色。适用于幻灯片、海报、图表和网页。它在浏览器中运行——不上传任何内容。免费,无需注册。
对比度结果
4.47:1
对比度比值
普通文本——敏捷的棕色狐狸跳过懒狗(16 px)。
大号文本,24 px(18 pt)
大号粗体文本,18.7 px(14 pt)
按钮或图标
以两位小数向下舍入显示:WCAG 不会将接近的数值向上舍入,因此 4.499 不满足 4.5。
| 要求 | 所需比值 | 结果 |
|---|---|---|
| 普通文本,AA (1.4.3) | 4.5:1 | 未通过 |
| 普通文本,AAA (1.4.6) | 7:1 | 未通过 |
| 大号文本,AA (1.4.3) | 3:1 | 通过 |
| 大号文本,AAA (1.4.6) | 4.5:1 | 未通过 |
| 界面组件与图形,AA (1.4.11) | 3:1 | 通过 |
大号文本指至少 18 pt(24 px)的常规字体,或至少 14 pt(约 18.7 px)的粗体。在幻灯片和海报上,正文通常属于大号文本;脚注和说明文字通常则不是。
建议的合格颜色
更改文本颜色
更改背景颜色
每个建议都保留色相和饱和度,仅改变明度,并以能够达标的最小步长调整。
如何使用颜色对比度检查器
- 1. 输入两种颜色。 以 HEX(
#777777)、rgb()、hsl()或颜色名称输入,也可以使用取色器。交换按钮可以互换两者,便于检查浅色背景深色文字与深色背景浅色文字的版本。 - 2. 阅读比值与表格。 比值范围从 1:1(相同颜色)到 21:1(黑色对白色)。表格将其与每项 WCAG 要求进行比较,并以文字说明“通过”或“未通过”,而不只依靠颜色。
- 3. 确定字号。 大号文本的要求较低。预览区显示普通文本、大号文本、大号粗体文本以及带边框的控件,方便您判断自己的情况。
- 4. 修复未通过的组合。 选择您要达到的级别,然后使用建议的文本颜色或背景颜色。本工具保留色相,只以最小步长改变明度,直到达标。
WCAG 2.2 的要求
网页内容无障碍指南(WCAG)2.2 在三项成功标准中规定了最低对比度比值。比值为 (L₁ + 0.05) ÷ (L₂ + 0.05),其中 L₁ 为较亮颜色的相对亮度,L₂ 为较暗颜色的相对亮度。
| 标准 | 级别 | 普通文本 | 大号文本 |
|---|---|---|---|
| 1.4.3 对比度(最低要求) | AA | 4.5:1 | 3:1 |
| 1.4.6 对比度(增强) | AAA | 7:1 | 4.5:1 |
| 1.4.11 非文本对比度 | AA | 界面组件及有意义的图形为 3:1 | — |
大号文本指至少 18 pt(24 px)的常规字体,或至少 14 pt(屏幕 96 dpi 下约 18.7 px)的粗体。徽标、纯装饰性文字和未激活的控件不受 1.4.3 约束。1.4.11 中的 3:1 规则适用于帮助用户找到控件所需的部分(按钮边框、复选框轮廓)、焦点等状态,以及读者理解内容所需的图形,例如图表中的线条。
比值的计算方法
每个 sRGB 通道缩放到 0–1 并线性化:若 c ≤ 0.04045,则为 c ÷ 12.92,否则为 ((c + 0.055) ÷ 1.055)2.4。相对亮度则为 0.2126 R + 0.7152 G + 0.0722 B。绿色的权重最大,因为人眼对它最敏感。
0.03928 这个笔误
WCAG 2.0 和 2.1 将阈值印作 0.03928,这是 sRGB 标准早期草案的遗留;该标准使用 0.04045。WCAG 2.2 术语表已将其更正为 0.04045,并指出这一差异不会改变任何实际结果。本检查器使用 0.04045。
一组差一点不达标的配色
#777777 放在白色上:4.48:1——普通文本的 AA 未通过(需要 4.5:1),大号文本则通过。
#767676 放在白色上:4.54:1——白色上通过 AA 的最浅灰色。
#0000ff 放在白色上:8.59:1——通过 AAA。#ff0000 放在白色上:4.0:1——普通文本的 AA 未通过。
WCAG 不进行舍入:4.4999 不满足 4.5。因此本检查器显示的比值会向下舍入到两位小数,接近的数值绝不会显示为通过。
检查幻灯片、海报和图表
- 幻灯片和海报不是网页, 但 WCAG 的比值同样是它们公认的衡量标准。幻灯片上的正文通常属于大号文本(24 px 即 18 pt);图注、脚注和坐标轴标签则不是,应按普通文本检查。
- 投影时请高于最低要求。 在明亮房间中投影会降低所有人的对比度。若幻灯片将在明亮的房间中展示,文本请选择 AAA(7:1)。
- 叠在照片或渐变上的文字没有单一的背景。请检查文字后方最亮和最暗的区域,或将文字置于纯色面板上。
- 图表与插图适用 1.4.11:线条、柱形和标记相对于背景需要 3:1。仅靠颜色不应承载含义——参见色盲模拟器。
- 半透明颜色在测量前会先被展平:背景叠在白色上,然后文本叠在背景上。如果文字后方还有其他内容,需要直接输入该颜色。
关于 APCA 的说明
无障碍感知对比度算法(APCA)是 WCAG 3 工作草案中的一种候选方法,它考虑字号、字重和极性。它只是草案,而非要求,目前也没有任何法律或标准要求采用。WCAG 2.x 的比值——即本工具所计算的比值——仍然是符合性声明的依据。
常见问题
- 什么是好的对比度比值?
- 普通文本 4.5:1 或更高符合 WCAG AA,7:1 符合 AAA。大号文本 AA 需要 3:1,AAA 需要 4.5:1。黑色对白色是最大值,即 21:1。低于 3:1 的组合即使视力良好,许多人也难以阅读。
- WCAG 中什么算大号文本?
- 常规字重下至少 18 pt(24 px),或粗体下至少 14 pt(约 18.7 px)。字号以屏幕显示为准,因此在讲义上看起来较小的幻灯片字体,投影时仍可能属于大号文本。
- 对比度要求是否适用于图标和图表线条?
- 适用。依据成功标准 1.4.11 非文本对比度:理解内容所需的用户界面组件和图形,与相邻颜色之间必须至少为 3:1。装饰性图形和未激活的组件可以豁免。
- 为什么我的颜色显示为 4.49,而比值接近 4.5?
- 因为 WCAG 比较的是精确比值,不给舍入留余地。4.4999:1 的组合不满足 4.5:1 的要求,因此本工具显示的是向下舍入到两位小数的值,而不是 4.50。
- 建议的颜色是如何得出的?
- 本工具保留您颜色的色相和饱和度,并以小步长上下调整其 HSL 明度,返回最接近且达到目标比值的 8 位 HEX 颜色代码。如果任何明度都无法达到目标——例如对中灰色要求 7:1——它会说明,并建议更改另一种颜色。
- APCA 比 WCAG 比值更好吗?
- APCA 更接近人眼的感知,尤其是在深色模式和细文字方面,但它属于草案(WCAG 3),而非已被接受的要求。引用 WCAG 2.x 的无障碍法规和采购标准,采用的是本工具计算的比值。