candoya
ZH

颜色对比度检查

全程在浏览器中运行,无需上传,无需注册。

对比度
通过AA · 普通文字需要 4.5:1
通过AA · 大字体需要 3:1
未通过AAA · 普通文字需要 7:1
通过AAA · 大字体需要 4.5:1

大字体 = 18pt(24px),或粗体14pt(18.66px)。

什么是颜色对比度检查工具?

颜色对比度检查工具用于测量文字颜色与背景颜色之间的对比度比值,并判断是否符合WCAG无障碍标准。比值范围从1:1到21:1,同时显示普通文字和大字体在AA和AAA级别下的通过或未通过结果。

使用方法

  1. 1输入颜色值. 为文字和背景分别输入十六进制颜色代码、rgb()值或CSS颜色名称,也可以使用取色器直接选取。
  2. 2查看对比度比值. 对比度比值实时更新,同时显示文字在对应背景上的视觉预览效果。
  3. 3查看结果标签. 每个标签显示该颜色组合在WCAG AA和AAA级别下,分别针对普通文字和大字体的通过或未通过结果。

适用人群

本工具采用WCAG官方相对亮度公式进行计算,结果与WebAIM检查工具及主流无障碍审计结果一致。所有计算在浏览器本地完成,颜色数据不会上传,无使用次数限制。

常见问题

颜色对比度检查工具是免费的吗?

完全免费,无需注册,无使用次数限制,所有功能均在浏览器本地运行。

WCAG AA级别需要多少对比度?

WCAG 2.1 AA级别要求普通文字的对比度至少为4.5:1,大字体至少为3:1。AAA级别则要求普通文字达到7:1,大字体达到4.5:1。

什么是大字体?

大字体指常规字重下至少18pt(约24px),或粗体下至少14pt(约18.66px)的文字。由于字形较大更易辨识,大字体允许使用更低的对比度要求。

对比度比值是如何计算的?

计算公式为(L1 + 0.05) / (L2 + 0.05),其中L1和L2分别为较亮色和较暗色的相对亮度。亮度值根据WCAG 2.x定义,由sRGB色彩空间的红、绿、蓝通道计算得出。

支持哪些颜色格式?

支持3位、4位、6位或8位十六进制颜色代码,rgb()和rgba()值,以及CSS颜色名称(如teal)。也可以使用原生取色器选取颜色。

为什么同样的比值有时通过有时不通过?

所需对比度取决于文字大小和目标级别。例如3.5:1对普通文字不符合AA要求,但对大字体则通过AA级别,因此需要结合实际使用的字体大小和目标级别来判断。