颜色对比度检测
免费颜色对比度检测工具：检查文字颜色与背景色是否符合 WCAG 2.2 AA 和 AAA 标准，查看对比度，并获取最接近的达标颜色。
4.54:1
对比度
这是普通文字，大小与正文段落相同。
大号文字
按钮| AA | AAA | |
|---|---|---|
| 普通文字 | ||
| 大号文字（24 px，或粗体 18.7 px） | ||
| 图标和界面边框 | — |
它做什么
此工具使用 WCAG 2.2 无障碍指南（许多无障碍法规所采用）中的公式，测量文字颜色与背景之间的对比度。它会显示从 1:1（无对比）到 21:1（白底黑字）的对比度，并判断该颜色组合在普通文字、大号文字以及图标和边框等界面组件上是否达到 AA 和 AAA 级别。若未达标，它会推荐色相相同、最接近的达标颜色。
使用方法
- 输入或拾取文字颜色和背景颜色。
- 查看对比度以及 AA 和 AAA 的检测结果，并查看实时预览。
- 若未通过，在推荐颜色上点击“使用”，然后复制链接分享结果。
常见问题
我需要多大的对比度？
AA 级是常见的法规要求，普通文字需要 4.5:1，大号文字以及图标和界面边框需要 3:1。AAA 级要求普通文字达到 7:1，大号文字达到 4.5:1。
什么算大号文字？
至少 24 CSS 像素（18 磅）的文字，或粗体时至少约 18.7 CSS 像素（14 磅）的文字。标题通常属于大号文字，正文一般不是。
为什么白底上的 #777777 不达标？
它的对比度为 4.47:1，略低于普通文字所需的 4.5:1。对比度不会向上取整，因此稍深一点的灰色 #767676（4.54:1）是在白底上达标的最浅灰色。
W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast