对比度检查器
依据 WCAG AA/AAA 检查颜色对比度。
良好的颜色对比度能让文字和界面元素对每个人都保持可读,包括低视力人群。选择一种前景色和一种背景色,即可查看 WCAG 对比度,以及它在正常文本、大号文本和界面组件方面是否通过 AA 和 AAA——当对比度不足时,还会提供简单的改进建议。
良好的对比度可让文字和界面对所有人(包括低视力人群)都清晰可读。正文建议至少达到 4.5:1。
天地玄黄 宇宙洪荒 The quick brown fox
天地玄黄 宇宙洪荒 The quick brown fox
对比度21.00:1
- 正文文字 AA · 4.5
- 正文文字 AAA · 7
- 大号文字 AA · 3
- 大号文字 AAA · 4.5
- UI 组件 3.0
所有颜色转换均在你的浏览器本地完成 —— 不上传、不存储、不记录。
工作原理
- 1 选择一种前景色(文字)。
- 2 选择一种背景色。
- 3 查看对比度以及 AA/AAA 是否通过。
- 4 按照建议进行调整,直到通过为止。
常见用例
- 确保正文文本满足 WCAG AA(4.5:1)。
- 检查按钮和链接颜色的无障碍性。
- 在上线前验证品牌调色板。
- 避免难以辨认的低对比度文字。
常见问题
我的颜色数据会被发送到任何地方吗?
不会。每一次转换和计算都完全在您的浏览器中运行——不会上传、存储或记录任何内容。
AA 和 AAA 分别要求多少对比度?
AA 要求正常文本达到 4.5:1,大号文本达到 3:1(≥18.66px 加粗或 ≥24px)。AAA 要求 7:1 和 4.5:1。界面组件和图形至少需要 3:1。
对比度是如何计算的?
使用官方 WCAG 公式:(L1 + 0.05) / (L2 + 0.05),其中 L1/L2 分别是较亮颜色和较暗颜色的相对亮度。
真的免费吗?
是的——免费,无需注册,无水印,无限制。