🎨 颜色对比度检查器

Updated: 2026-07-11
广告位 - 顶部 (728x90)
广告位 - 底部 (728x90)

使用说明

  1. 输入前景色(文本颜色)和背景色的十六进制值
  2. 也可以使用颜色拾取器选择颜色
  3. 工具自动计算对比度比率并判断是否符合WCAG AA/AAA标准
  4. 所有计算在浏览器本地完成

关于WCAG对比度标准

WCAG(Web Content Accessibility Guidelines)定义了颜色对比度标准,确保低视力用户也能清晰阅读内容:

AA级(最低要求):普通文本 ≥ 4.5:1,大文本(≥18pt或≥14pt粗体) ≥ 3:1

AAA级(增强要求):普通文本 ≥ 7:1,大文本 ≥ 4.5:1

对比度比率范围从1:1(完全相同)到21:1(黑白对比)。

常见问题

Q:什么是颜色对比度?

颜色对比度衡量前景色(文本)和背景色之间的亮度差异,用比率表示(如4.5:1)。比率越高,文字越容易阅读。低对比度对视力障碍用户、老年用户或在强光下使用设备的用户会造成阅读困难。

Q:哪些场景需要满足WCAG AA标准?

政府网站、公共服务平台、电商网站、教育平台等通常强制要求AA级标准。许多国家的法律法规要求公共网站满足WCAG 2.1 AA级。AAA级是更高标准,建议尽可能达到。

Q:如何提高颜色对比度?

提高对比度的方法:1) 使用更暗的文本颜色(接近#000);2) 使用更亮的背景颜色(接近#FFF);3) 避免浅灰配白色或深灰配黑色;4) 使用本工具测试调整后的方案。

Q:大文本和小文本的标准为什么不同?

大文本(≥18pt或≥14pt粗体)更易阅读,因此对比度要求较低。小文本需要更高的对比度才能保证清晰可读。这是WCAG根据视觉科学研究的合理设计。

Q:对比度计算采用什么算法?

使用WCAG 2.1定义的相对亮度算法,基于sRGB色彩空间的线性化计算。该算法考虑了人眼对不同颜色的感知差异(如对绿色更敏感),是国际公认的标准计算方法。

Q:需要联网使用吗?

纯前端应用,加载后断开网络也能正常使用。所有计算在浏览器本地完成。