颜色对比度检查器（WCAG）
按照WCAG AA和AAA标准检查文字颜色与背景颜色的对比度，适用于普通文字、大号文字和界面组件，并提供修改建议。
免费 在浏览器中运行 无需注册
正在加载颜色对比度检查器…
您的文件绝不离开您的设备
如何使用颜色对比度检查器
- 1
在此页面打开颜色对比度检查器，它直接在浏览器中加载。
- 2
添加文件、文本或数值，并调整设置。
- 3
复制或下载结果。不会上传或存储任何内容。
关于此工具
对比度不足的文字是网页上最常见的无障碍问题之一，在阳光下用手机阅读的人都会受影响。这款颜色对比度检查器计算文字颜色与背景颜色之间的对比度，并告诉你是否符合WCAG 2指南。如果不达标，它会推荐最接近且达标的颜色，让你无需改变设计就能修正。
如何检查对比度
- 输入文字颜色和背景颜色，或用取色器选择。
- 查看对比度比值以及各级别是否通过。
- 在实时预览中查看普通文字、大标题和小字的效果。
- 如果某个级别未通过，使用推荐的修正，或交换两种颜色测试反向搭配。
- 复制通过的颜色组合的CSS。
WCAG对比度要求
| 元素 | AA | AAA |
|---|---|---|
| 普通文字 | 4.5:1 | 7:1 |
| 大号文字（24px，或18.66px粗体） | 3:1 | 4.5:1 |
| 界面组件和图标 | 3:1 | 未定义 |
大多数法律和无障碍政策引用的是AA级别。AAA更严格，推荐用于长篇阅读文字。约18px的粗体文字也算作大号文字。
对比度如何计算
检查器把两种颜色都换算为相对亮度（衡量人眼感知亮度的指标），然后用较亮颜色加0.05除以较暗颜色加0.05。结果从1:1（无对比，同一颜色）到21:1（白底黑字）。
无障碍配色建议
- 白底灰字是最常见的问题：在白色背景上，#767676大约是普通文字仍能通过AA的最浅灰色。
- 检查所有状态：占位文字、禁用按钮、链接、悬停颜色以及图片上的文字。
- 不要只靠颜色传达含义，例如用红色表示错误；请同时加上图标或文字。
- 尽早测试品牌色，因为亮黄色和浅蓝色作为文字颜色时常常不达标。
常见问题
WCAG AA要求多大的对比度？
普通文字至少4.5:1，大号文字以及按钮、表单边框和图标等界面组件至少3:1。
什么算大号文字？
至少24px的文字，或至少约18.66px（14磅）的粗体文字。大号文字AA需要3:1，AAA需要4.5:1。
AA和AAA有什么区别？
AA是多数无障碍法律引用的标准级别。AAA更严格，普通文字需7:1，推荐用于长段落文字。
最高的对比度是多少？
21:1，即白底黑字或黑底白字。
我的品牌色不达标怎么办？
使用推荐的修正，它会保留色相、调整亮度直至达标；或把品牌色用于大标题和背景，而不是正文文字。
能检查图片上的文字吗？
不能。它检查的是两种纯色。对于照片上的文字，请用文字背后图片最亮和最暗的部分分别测试。