对比度检查

按 WCAG AA 与 AAA 标准检查文字与背景的对比度

文字颜色

背景颜色

文字不透明度：100%

对比度

4.54:1

所有文字均通过 AA

APCA 明度对比

Lc 71.6

可用于内容文字，不适合长篇正文

来自 WCAG 3 草案，区分明暗方向：Lc 为负表示深色背景上的浅色文字。

预览

大标题

敏捷的棕色狐狸跳过了懒狗

对比度不足对正文影响最大：小字号的长段落很快让眼睛疲劳，在阳光下用手机阅读时尤其明显。

敏捷的棕色狐狸跳过了懒狗

小字、图注和脚注

按钮按钮

示例文字

AA · 4.5:1

调整文字已达标

调整背景已达标

AAA · 7:1

调整文字

#595959 · 7.00:1

调整背景仅调整明度无法达到

只调整明度（OKLCH），色相和整体感觉保持不变。

如何使用对比度检查

检查文字色和背景色是否满足 WCAG 2 对比度要求（普通文字、大号文字和界面组件的 AA 与 AAA），同时显示 WCAG 3 草案中的 APCA 明度对比。不达标时会推荐最接近的合格颜色。

在「文字颜色」和「背景颜色」里输入 HEX、rgb()、hsl()、oklch() 或颜色名，或点色块打开取色器。

查看「对比度」数值，以及每一项 AA、AAA 检查是「通过」还是「未通过」。

在「预览」里看实际效果，可以填入自己的「示例文字」，用「交换颜色」测试反过来的搭配。

在「最接近的达标颜色」里，对 AA（4.5:1）或 AAA（7:1）的「调整文字」或「调整背景」建议点「应用」。

改过颜色后，页面网址会带上两种颜色，复制网址即可分享结果。

常见问题

WCAG AA 要求普通文字 4.5:1，大号文字（24px 以上，或 18.66px 以上粗体）和图标、输入框边框等界面组件 3:1；AAA 要求 7:1 和 4.5:1。

对比度在临界值附近不会向上取整，避免差一点点不达标的配色看起来像是通过了。

能。拖动「文字不透明度」滑块，工具会先把半透明文字和背景混合，再计算对比度。

APCA 来自 WCAG 3 草案，给出的明度对比（Lc）与哪个颜色是文字有关，负值表示深色背景上的浅色文字。它仍是草案，合规检查通常仍以 WCAG 2 对比度为准。

只在 OKLCH 中调整明度，色相和整体感觉保持不变。如果调亮调暗都达不到目标，会提示「仅调整明度无法达到」，可以试试调整另一个颜色。