颜色对比度检查器

颜色对比度检查器 是什么？

颜色对比度检查器是一款面向设计师、开发者和无障碍测试人员的免费在线 WCAG 与 APCA 对比度检查工具。它接受 HEX（#rgb、#rrggbb 以及带 alpha 的 8 位 #rrggbbaa）、rgb()/rgba() 和 hsl()/hsla() 格式的颜色，测量前先把半透明前景合成到背景上，并同时给出 WCAG 2.1 比值（1:1 到 21:1）与 APCA Lc 明度对比分数。它标示 WCAG 2.1 AA 级（普通 4.5:1、大号 3:1）和 AAA 级（普通 7:1、大号 4.5:1），为非文本 UI 组件和图形增加 3:1 标识，并能建议最接近的合格前景色——仅微调其明度直到满足 AA 或 AAA——你只需点一下即可应用。

如何使用 颜色对比度检查器

1. 以 HEX、rgb() 或 hsl() 输入前景（文字）色（接受带 alpha 的 8 位 HEX 或 rgba），或点击取色器直观地选取。
2. 以相同方式输入背景色；在测量对比度前，半透明前景会被合成到背景上（背景则先合成到白色上）。
3. 随时使用互换按钮交换前景色与背景色。
4. 查看 WCAG 2.1 对比度比值，以及紧邻显示的 APCA Lc 分数。
5. 查看普通与大号文字的 AA、AAA 标识，以及用于 UI 组件和图形的 3:1 标识。
6. 若某组合未通过，查看最接近的 AA 或 AAA 合格颜色并点击“应用”以更新前景色。

示例

前景 #595959，背景 #ffffff

比值 7.00:1，APCA Lc 较高——普通和大号文字均通过 AA 与 AAA

前景 #00000080（50% 黑）叠加在 #ffffff 上

先合成为实心灰色，再计算 WCAG 比值与 APCA Lc

前景 #999999 配 #ffffff——2.85:1，未通过 AA

打开最接近的 AA 颜色并点击“应用”，在保持同一色相的同时达到 4.5:1

常见问题

WCAG 要求多大的对比度？

WCAG 2.1 AA 级要求普通文字至少 4.5:1、大号文字 3:1；AAA 级为 7:1 和 4.5:1。非文本 UI 组件和图形对象（SC 1.4.11）需要 3:1。本检查器会为这些阈值各显示一个通过/未通过标识。

APCA Lc 分数是什么？

APCA（无障碍感知对比算法）是为 WCAG 3 提议的对比度方法。它给出约 0 到 108 的明度对比（Lc）值，值越大对比越强，并会考虑极性（深底浅字或浅底深字）。它显示在 WCAG 2.1 比值旁边，采用自己的指引级别，而非单一的通过/未通过。

最接近合格颜色建议是如何工作的？

它保持前景的色相与饱和度，仅将其明度调亮或调暗，直到相对背景的对比度满足 AA（4.5:1）或 AAA（7:1），然后你可一键应用。若背景为中间调而无法达到目标，它会改为显示最接近的可行颜色。

可以输入哪些颜色格式？

HEX（#rgb、#rrggbb，以及带 alpha 的 #rgba 和 8 位 #rrggbbaa）、rgb()/rgba() 和 hsl()/hsla()，每个字段都配有原生取色器。计算比值前，半透明前景会合成到背景上（背景本身先合成到白色上）。不支持颜色名称。

我的颜色会被发送到服务器吗？

不会。解析、合成、亮度、比值与 APCA 的全部计算都通过 JavaScript 在你的浏览器中运行——不会上传任何颜色，也不会向服务器发送任何内容，因此既能保护隐私，页面加载后甚至还能离线使用。