颜色对比度检查器

按 WCAG 相对亮度公式在本地检查前景色与背景色的对比度,分别判断普通正文、大字号的 AA/AAA 门槛并支持报告导出。

浏览器本地处理
该页面已通过公开目录检查;启用JavaScript后可使用完整功能。
使用指南

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

颜色值只在当前浏览器中计算相对亮度和对比度,不会上传或保存。

  1. 输入两种颜色

    用颜色选择器或粘贴 #RRGGBB 值设置前景色和背景色,预览会同步更新。

  2. 检查门槛

    点击检查,分别查看普通正文 AA、普通正文 AAA 和大字号 AA 的通过状态。

  3. 复制检查记录

    通过后可复制报告或下载 TXT,记录颜色值、比值和各级门槛结果。

限制与注意事项

  • 首发版本只接受不含透明度的 #RGB 或 #RRGGBB;半透明颜色必须先确定实际合成背景。
  • 4.5:1 适用于普通正文 AA,3:1 适用于大字号 AA,7:1 是普通正文 AAA 的参考门槛;还需检查字号、字重和非文本对比度。
  • 工具只计算一对纯色,不模拟渐变、图片、阴影、字体渲染或复杂背景。

常见问题

4.5:1 是什么意思?

它是 WCAG 对普通正文文本的 AA 最低对比度门槛;大字号正文的 AA 门槛是 3:1。

为什么透明色不能直接判断?

透明前景或背景的最终颜色取决于合成顺序和底图;先确定实际显示的纯色更可靠。

通过对比度就一定无障碍了吗?

不一定。还应检查字号、字重、状态、焦点、非文本组件、图片背景和实际设备显示效果。

页面反馈发现问题或有改进建议?
反馈功能需要在在线版使用

请在在线版启用 JavaScript 后提交;当前工具或案例的本地功能不受影响。

前往在线版反馈