对比度检查器 的工作原理
此工具计算两种颜色之间的 WCAG 对比度，并显示该组合是否达到普通文本、大文本和非文本界面元素的 AA 或 AAA 级别。所有计算都在你的浏览器本地完成；你输入的颜色不会被上传。
WCAG 对比度检查器
输入或选取两种颜色，立即查看 WCAG 对比度，正文和大号文字都会显示 AA/AAA 达标标记。
对比度检查器 的分步使用说明
- 输入或选择前景色（文字颜色）。
- 输入或选择背景色。
- 查看对比度数值，以及普通文本、大文本和非文本界面元素的 AA/AAA 徽章。
- 使用「交换颜色」按颠倒方向检查这组颜色。
常见使用场景
- 在发布按钮组件之前，检查品牌主色与白色或黑色的对比度。
- 验证浅灰色正文文字在浅色卡片背景上是否仍能达到 AA 级别。
- 确认段落中链接颜色是否达到普通文本 4.5:1 的阈值。
- 测试字重较细的大标题是否仍能达到较宽松的大文本 3:1 阈值。
常见问题
此工具会将我的颜色发送到服务器吗?
不会，计算完全在你的浏览器中通过 JavaScript 完成；你输入的任何内容都不会被上传。
达到 AA 或 AAA 需要多少对比度?
WCAG 2.x 要求普通文本 AA 为 4.5:1、AAA 为 7:1，大文本 AA 为 3:1、AAA 为 4.5:1。
什么算作大文本?
常规字重至少 24px(18pt),或粗体约 18.7px(14pt)以上;更小的文本使用普通文本的阈值。
为什么交换前景色和背景色不会改变对比度？
对比度公式是对称的：它只比较较亮和较暗颜色的亮度，并不关心哪个颜色用作文字。交换颜色仍然有用，因为它能告诉你这组颜色在角色互换后是否依然可用，例如深色文字配浅色底与浅色文字配深色底这两种情况。
达到 AA 级别是否就能保证我的设计是无障碍的？
不能。对比度只是众多 WCAG 成功标准中的一项。针对色觉缺陷人群的配色、焦点可见性、文字缩放和键盘导航都是各自独立的检查项；本站的色盲模拟工具覆盖了其中一项。
这是 W3C 或 WebAIM 的官方工具吗？
不是。本工具独立实现了公开的 WCAG 2.x 对比度公式，与 W3C 或任何其他无障碍组织均无关联。