工作原理
输入文字颜色和背景颜色,即可得到它们的对比度、实时预览,以及每个 WCAG 等级是否通过。如果这组颜色未通过,检查工具会推荐色相相同、达到 4.5:1 的最接近的文字颜色,点一下即可套用。
对比度 = (较亮颜色的亮度 + 0.05) ÷ (较暗颜色的亮度 + 0.05)
WCAG 要求
- 普通文字:AA 至少 4.5:1,AAA 至少 7:1。
- 大号文字 (24 px,或粗体 18.66 px):AA 至少 3:1,AAA 至少 4.5:1。
- 按钮、图标和表单边框:与周围环境至少 3:1。
使用提示
- 白底上的灰色文字经常不达标——占位文字和说明文字也要检查。
- 良好的对比度对所有人都有帮助,包括在户外用手机阅读的人。
- 用交换按钮可以检查深色背景上的浅色文字。
标准与出处
- 对比度公式和阈值遵循 WCAG 2.2 成功标准 1.4.3、1.4.6 和 1.4.11 (W3C)
最后核对于 2026年10月7日
常见问题
需要多高的对比度?
普通文字在 WCAG AA 下需要 4.5:1,AAA 需要 7:1。大号文字 AA 需要 3:1,AAA 需要 4.5:1。
什么算大号文字?
至少 24 px 的文字,或粗体时至少 18.66 px 的文字。
颜色不达标怎么办?
使用推荐的颜色。它会保留您的色相和饱和度,只调整亮度,直到这组颜色达到 4.5:1。
按钮和图标也需要考虑对比度吗?
需要。WCAG 要求按钮、图标和输入框边框等界面元素与其周围至少达到 3:1。
透明度会影响结果吗?
检查工具使用不透明的颜色。对于半透明文字,请检查它叠加在背景上实际看到的颜色。