读懂文字对比度图解:色对不能省略背景;普通正文优先按 4.5:1 检查;阈值通过后仍看版面。
阅读口径

适用于不透明、纯色背景上的网页文字。这里核查颜色对,不代表已经完成整站无障碍评估。

先确定文字落在哪里

一段文字的颜色不能单独判定好坏,必须和实际背景配成一对。先记下正文、注释、按钮文字各自的前景色与背景色;如果同一种文字出现在浅色卡片和深色页脚里,应拆成两条记录。透明叠层还要先确定合成后的颜色。

用阈值回答具体问题

WCAG 2.2 的 AA 文字对比度要求通常为至少 4.5:1,大号文字为至少 3:1。大号的界定涉及字号、粗细及中日韩文字的等效大小;练习时不确定字号条件,就按普通正文检查。不要把 4.49:1 四舍五入视为达标。

原创演算:深蓝与珊瑚

用 sRGB 相对亮度公式计算,深蓝 #082C4C 与白色约为 14.24:1;珊瑚 #FF745C 与白色约为 2.66:1。因此本练习把深蓝用于浅底正文,把珊瑚用于装饰或配深色文字。换成浅蓝背景后必须重算,不能复用白底结果。

可执行检查单

  1. 01列出正文、注释、按钮三个真实的前景与背景色对。
  2. 02计算比值并保留未四舍五入的原值,再按文字类别判断。
  3. 03把不通过的组合改深或改背景,记录改动后的色值与结果。

一个常见问题

数值通过了,为什么仍觉得费力?

对比度只覆盖一部分条件。细字、紧行距、长行和刺眼的大块亮色仍可能增加阅读负担。先保持颜色不变,分别调整字号、行距与段落宽度,避免把所有问题都归咎于配色。

复查边界

本例使用不透明的纯色 sRGB 值。照片、渐变和半透明背景要检查文字覆盖区域中的不利位置;小数值是本地演算结果,不是认证标签。

来源与适用范围

W3C:理解文字最低对比度(1.4.3)。这是 W3C 对相应成功准则的解释文档。本站用自己的例子说明应用,不代表标准机构认可本站,也不等于整站合规评估。