本工具采用WCAG官方相对亮度公式进行计算,结果与WebAIM检查工具及主流无障碍审计结果一致。所有计算在浏览器本地完成,颜色数据不会上传,无使用次数限制。
颜色对比度检查
全程在浏览器中运行,无需上传,无需注册。
对比度
通过需要 4.5:1
通过需要 3:1
未通过需要 7:1
通过需要 4.5:1
大字体 = 18pt(24px),或粗体14pt(18.66px)。
什么是颜色对比度检查工具?
颜色对比度检查工具用于测量文字颜色与背景颜色之间的对比度比值,并判断是否符合WCAG无障碍标准。比值范围从1:1到21:1,同时显示普通文字和大字体在AA和AAA级别下的通过或未通过结果。
使用方法
- 1输入颜色值. 为文字和背景分别输入十六进制颜色代码、rgb()值或CSS颜色名称,也可以使用取色器直接选取。
- 2查看对比度比值. 对比度比值实时更新,同时显示文字在对应背景上的视觉预览效果。
- 3查看结果标签. 每个标签显示该颜色组合在WCAG AA和AAA级别下,分别针对普通文字和大字体的通过或未通过结果。
适用人群
- 设计师在交付开发前验证品牌配色方案的对比度。
- 前端开发者检查按钮、链接和标签的颜色是否符合WCAG AA标准。
- 无障碍审计人员记录精确比值,找出对比度不达标的问题。
- 内容和邮件团队确认文字在彩色背景上的可读性。
常见问题
颜色对比度检查工具是免费的吗?
完全免费,无需注册,无使用次数限制,所有功能均在浏览器本地运行。
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级别,因此需要结合实际使用的字体大小和目标级别来判断。