YUCTS Tools

网页色彩对比度检查（WCAG 2.2 AA／AAA）

输入文字和背景的 HEX 色值，按 WCAG 2.2 公式计算对比度，判断普通文字、大号文字和界面组件是否符合 AA／AAA 标准。

  • 在浏览器内处理（不上传）

#RGB 或 #RRGGBB（例：#6B7280）

#RGB 或 #RRGGBB（例：#6B7280）

结果

对比度 4.83:1

对比度
4.83:1

与 WCAG 2.2 标准对比

  • 对象: 普通文字判定: 通过

    标准: AA：至少 4.5:1（成功准则 1.4.3）

  • 对象: 普通文字判定: 未通过

    标准: AAA：至少 7:1（成功准则 1.4.6）

  • 对象: 大号文字判定: 通过

    标准: AA：至少 3:1（成功准则 1.4.3）

    24px（18pt）及以上，或约 18.66px（14pt）及以上的粗体

  • 对象: 大号文字判定: 通过

    标准: AAA：至少 4.5:1（成功准则 1.4.6）

    24px（18pt）及以上，或约 18.66px（14pt）及以上的粗体

  • 对象: 界面组件和图形判定: 通过

    标准: AA：至少 3:1（成功准则 1.4.11）

    按钮边框、图标、图表等非文字内容

判定使用未经四舍五入的数值；显示的对比度向下截断到小数点后 2 位（例：4.499:1 显示为 4.49:1，未达到 4.5:1）。

预览

这是 16px 的普通文字，请确认是否容易阅读。

24px 的大号文字

约 18.66px 的粗体文字

按钮样式的边框和图标

相对亮度

文字颜色 #6B7280
0.1672
背景颜色 #FFFFFF
1.0000

使用方法

  1. 以 #RRGGBB 或 #RGB 输入文字颜色和背景颜色，或用取色器选择。
  2. 对比度以及普通文字、大号文字、界面组件的 AA／AAA 判定会立即显示。
  3. 在预览中确认实际效果，需要时点击“复制”分享结果。

常见问题

AA 和 AAA 有什么区别？

两者是 WCAG 2.2 的符合等级。普通文字 AA 需要至少 4.5:1、AAA 需要至少 7:1；大号文字 AA 需要至少 3:1、AAA 需要至少 4.5:1。

“大号文字”是多大？

WCAG 将 18 点及以上，或 14 点及以上的粗体定义为大号文字。CSS 中 1pt 约等于 1.333px，因此大约是 24px 及以上，或约 18.66px 及以上的粗体。

显示 4.49:1，四舍五入不就是 4.5 吗？

WCAG 的说明文档（Understanding 1.4.3）指出计算值不应四舍五入，4.499:1 不满足 4.5:1。本工具按未经四舍五入的数值判定，显示时向下截断，避免未通过的配色看起来像是通过。

可以检查透明色或渐变吗？

不可以，只支持两个不透明的纯色。透明色请按屏幕上实际显示的不透明颜色来检查。

注意事项与限制

  • 你输入的内容只在本页面处理，不会发送到 YUCTS 的服务器。
  • 基于 WCAG 2.x（2.2）的对比度公式；与 APCA 等其他计算方式的结果不同。
  • 不考虑背景图片、渐变、透明度、文字阴影、字重和字体差异。
  • 自动判定仅供参考；标志或装饰性内容可能不在标准范围内，请结合整个页面实际确认。

数据来源