跳转到正文
patrache.tools

颜色对比检查

免费在线颜色对比检查工具。验证WCAG AA/AAA标准对比度,检测网页无障碍等级。浏览器处理,无需安装。

前景色
背景色
21.00:1
对比度
普通文本
AA (4.5:1)通过
AAA (7:1)通过
大文本
AA (3:1)通过
AAA (4.5:1)通过
预览

你好世界 快速的棕色狐狸跳过懒狗 1234567890

你好世界 快速的棕色狐狸跳过懒狗 1234567890

lock文件不会上传到服务器
分享
嵌入

将此工具嵌入你的网站

免费在线颜色对比度检查器,测试两种颜色之间的对比度是否符合WCAG 2. 1无障碍标准(AA、AAA)。 浏览器中处理,无服务器通信。 网页无障碍合规和UI设计验证必备。 颜色对比检查在网页设计、品牌设计和UI制作中精确处理颜色时非常实用。 无需安装或登录,在电脑和手机的浏览器中即可直接使用。

如何使用颜色对比检查?

  1. 输入前景色(文本)和背景色。
  2. 查看对比度和WCAG等级(AA/AAA)。
  3. 根据需要调整颜色以满足标准。

颜色对比检查常见问题

WCAG AA和AAA有什么区别?

AA要求普通文本4.5:1,大文本3:1。AAA更严格,分别要求7:1和4.5:1。

如果对比度不达标怎么办?

调整颜色使其更亮或更暗以增加对比度。工具实时显示结果。

都说大字号的对比度要求较低,那多大才算大字号?

WCAG 规定:常规字重从 18pt(约 24px)起、粗体从 14pt(约 18.7px)起算作大字号。达到该条件后,AA 的要求就从 4.5:1 放宽到 3:1。但要记住这只是底线而非目标:正文在调暗的笔记本屏幕上或阳光下也得看得清,所以尽量接近 7:1 更稳妥。

半透明背景或照片上的文字,对比度该怎么核查?

对比度计算以两种纯色为前提,所以背景不断变化的照片,必须分别用吸管取出文字下方最亮和最暗的两点,各查一次。只要有一处不达标,文字就会在图片的某个区域被吞没。实际做法上,与其在照片上盖半透明黑色蒙版或给文字加阴影,不如直接铺一条纯色底再放文字来得可靠。

如何充分利用颜色对比检查?

  • 正文需要 4.5:1,18pt 以上或加粗 14pt 的大字只需 3:1 即可达到 AA。
  • 中国的信息无障碍标准同样以 WCAG 的对比度阈值为参照,可直接套用这些数值。
  • 图标、输入框边框等非文本元素,也需要与背景保持 3:1 的对比。

Powered by Patrache Studio Tools

请允许此网站展示广告

要使用这些工具,请关闭对此网站的广告拦截。广告收入支持我们免费提供服务。

点击广告拦截器图标,关闭对此网站的拦截,然后重新检查。