cv.cm
全部工具

颜色对比度检查

对比度在当前标签页里计算。不上传。

对比度

16px 的正常文字看起来是这样。

24px 的大号文字

5.79:1

AA 正常文字（4.5:1）
通过
AA 大号文字（3:1）
通过
AAA 正常文字（7:1）
不通过
AAA 大号文字（4.5:1）
通过
界面组件（3:1）
通过

WCAG 2 对比度：AA 正常文字 4.5:1、大号文字 3:1；AAA 为 7:1 和 4.5:1；非文字 3:1。

使用步骤

按 WCAG 2 AA 和 AAA 检查一组文字色与背景色。不上传。

  1. 打开对比度检查

    已填好一组粉色配奶油色的示例。右侧文字样例下方是对比度和各项通过/不通过。

  2. 填自己的颜色

    为文字和背景输入十六进制色值，或用取色器。「互换」会交换两者。

  3. 修正没通过的组合

    正常文字没过 AA 时，表格下方会给出最接近且能通过的文字色。「复制」会把对比度和结果放到剪贴板。

图文教程

常见问题

对比度是什么意思？

它比较文字色与背景色的相对亮度，范围从 1:1（同色）到 21:1（白底黑字），按 WCAG 2 的定义计算。

会上传什么吗？

不会。对比度在这个标签页里计算。

需要多高的对比度？

WCAG AA 要求正常文字 4.5:1、大号文字 3:1；AAA 要求 7:1 和 4.5:1。图标、边框和表单控件需要 3:1（非文字对比度）。

什么算大号文字？

至少 18pt（24px）常规字重，或 14pt（约 18.7px）粗体。

建议色是怎么来的？

当这对颜色在正常文字上没过 AA，文字色会一步步向黑或白靠拢（看哪个有用），直到达到 4.5:1。色相尽量保持接近。