首页·颜色工具·颜色对比度检查

颜色对比度检查

算出背景色和文字色之间的对比度,告诉你有没有过网页无障碍的门槛(WCAG AA 和 AAA),还配了实时的文字预览,可以直接用眼睛判断。

🎨 全部在你的浏览器里运行。不用装,也不用注册。

大标题看起来是这样

正文大小的字,读起来是这个程度。

小字(图说)会缩到这么小 —— 对比不够的话,最先露馅的就是这里。

对比度

3.68 : 1

只能用在大字上

未达

AA 正文

4.5:1

通过

AA 大字

3:1

未达

AAA 正文

7:1

未达

AAA 大字

4.5:1

这些标准是什么意思

  • · AA 4.5:1 —— 这是网页无障碍的底线。正文必须过这一关。
  • · 3:1 —— 18pt(粗体 14pt)以上时标准会放宽。
  • · AAA 7:1 —— 更严的标准,公共网站有时会要求。
  • 对比度取决于明暗差,不是色差。所以黄底上放白字,颜色明明不同,还是读不出来。

这个工具能做什么

  • 1 到 21 的对比度
  • AA 与 AAA 是否通过
  • 大字另有一套判定
  • 自动调明度直到通过

其他颜色工具

颜色会因屏幕和色彩配置文件而略有差别。