颜色对比度检查器（WCAG）

选择文字颜色和背景颜色，即可同时得到 WCAG 2.2 对比度以及 AA 和 AAA 的结果。当某个级别未通过时，页面会提出只改变亮度的最接近通过颜色。适合在检查网页、应用界面或演示文稿中的文字是否易读时使用。

使用方法

1. 在“检查两种颜色”中，用取色器或输入 HEX、rgb() 或 hsl() 来设置“文字颜色”和“背景颜色”。
2. 在“预览句子”中输入您自己的文字，查看它作为普通文字、大号文字、粗体文字以及边框和图标时的效果。
3. 在“最接近的通过颜色”下，点击“更改文字颜色”或“更改背景颜色”旁边的“应用”。点击 HEX 值即可复制。
4. 在“检查调色板”中输入 2 到 12 种颜色，即可得到所有组合的表格以及“达到该级别的组合”列表。

计算方式与说明

• 对比度 = (L1 + 0.05) ÷ (L2 + 0.05)，其中 L1 和 L2 是两种颜色的相对亮度。范围从 1:1 到 21:1，向下取整到两位小数。
• 级别遵循 WCAG 2.2 标准 1.4.3（AA：普通文字 4.5:1，大号文字 3:1）、1.4.6（AAA：7:1 和 4.5:1）和 1.4.11（界面元素 3:1）。大号文字指 24px 以上，或粗体 18.66px 以上。
• 建议颜色在 OKLCH 中保持色相和色度不变，只调整亮度直到达到该级别。当任何亮度都无法达到时，页面会说明这一点。
• 最近使用的颜色、句子和调色板列表只保存在此浏览器中。

常见问题

对比度 4.5:1 是什么意思

较亮颜色的相对亮度加 0.05 后，是较暗颜色的相对亮度加 0.05 的 4.5 倍。这是普通大小文字达到 AA 的最低要求。

灰色文字 #777777 在白色背景上能通过吗

它的对比度是 4.47:1，略低于 4.5:1，所以只有大号文字级别通过。再深一级的 #767676 对比度为 4.54:1，可以通过 AA。

AA 和 AAA 有什么区别

AA 要求普通文字达到 4.5:1，AAA 要求 7:1。大多数网站以 AA 为目标，AAA 适合长篇阅读文字。

按钮边框和图标也需要对比度吗

需要。根据 WCAG 1.4.11，传达含义的界面元素和图形与周围环境的对比度至少要达到 3:1，“界面元素和图形”这一行就是检查这一点。