颜色对比度检查

输入文字色和背景色,计算对比度并检查 WCAG 要求,改善文字可读性。

免费浏览器
对比度
17.74:1
AA 正文字号
通过
AA 大字号
通过
AAA 正文字号
通过
AAA 大字号
通过
可读文本预览

关于颜色对比度检查

计算前景和背景色的对比度,并检查 WCAG 文字对比度阈值。结合预览比较文字在深浅背景上的可读性。

如何使用颜色对比度检查

  1. 输入前景色和背景色。
  2. 查看对比度及普通文字、大文字结果。
  3. 调整颜色,让目标字号满足所需阈值。

输入与输出示例

输入与设置
文字:#000000
背景:#ffffff
预期输出
对比度 21:1,满足显示的文字对比度阈值。

适用场景

  • 检查正文和按钮文案的颜色。
  • 评估品牌色在深色背景上的表现。

使用前需要了解的限制

对比度只覆盖无障碍的一部分。渐变、图片背景、透明度和控件各状态需要另行检查。

数据处理与费用

核心操作在浏览器中完成,工具输入不会上传处理。网站仍可能使用会话 Cookie,并按隐私政策收集运行或使用数据。

在浏览器中免费使用,无需登录。

常见问题

它使用 WCAG 相对亮度对比度公式,并展示普通文本与大字号文本的 AA/AAA 判断。

不代表。对比度只是重要检查项之一,无障碍还与字号、字重、焦点态、布局、动效和上下文有关。

可以。粘贴或选择前景色和背景色,即可快速判断这组颜色是否适合承载文本。

相关工具