WCAG色彩对比度是怎么算出来的,多少才算合格

对比度把"这个颜色看起来读得清吗"这种主观感受,变成了一个可以对照标准直接核实的客观数字。

对比度的计算公式

对比度计算方式为 (L1 + 0.05) / (L2 + 0.05),其中L1是较浅颜色的相对亮度,L2是较深颜色的相对亮度。结果范围从1:1(两色完全相同)到21:1(纯黑配纯白)。

相对亮度不是简单的RGB平均值

亮度的计算基于经过伽马校正的RGB三通道,并按大约红21%、绿72%、蓝7%的不均等权重加权,原因是人眼对绿色光的敏感度远高于红色和蓝色。

普通文字的AA标准:4.5:1

最常被要求达到的基准——WCAG 2.1 AA级标准,要求普通正文文字的对比度至少达到4.5:1。

大号文字的AA标准:3:1

被认定为"大号"的文字(大致相当于18号以上常规字重,或14号以上加粗)在AA级标准下只需达到3:1即可,因为字号更大本身就更容易辨认,即使对比度稍低。

更严格的可选级别:AAA

AAA级标准的门槛更高,普通文字需要7:1,大号文字需要4.5:1。大多数合规要求并不强制达到这一级别,但在对可读性要求特别高的场景中值得追求。

非文字元素有单独的规则

WCAG 1.4.11要求,按钮边框、表单输入框轮廓等有实际意义的图形和交互式界面元素,与其相邻颜色之间也要达到3:1的对比度,这与文字对比度的规则是分开单独规定的。

为什么对比度不只是"看着顺不顺眼"的问题

同一组配色,在一个人眼里可能"读起来还行",但对低视力或存在色觉差异的人来说,可能实际上根本看不清。对比度公式把这种主观判断,替换成了一个考虑到人眼在整个色域内对亮度感知差异的客观数字,让设计师和审核者拥有一个可以共同验证的标准,而不是各说各话的主观意见。

配色不达标时的常见修复方法

最可靠的办法是把深色调得更深、或把浅色调得更浅,直到对比度超过门槛为止,因为单纯改变色相往往对数字的影响不大。同时也值得检查文字与背景的默认组合,以及反色或悬停状态下的配色——默认状态达标,不代表交互状态下的配色也一定达标。

常见问题

字号大小真的会改变对比度要求吗?

会。更大更粗的文字本身就更容易与背景区分开来,所以WCAG标准中被认定为"大号文字"的内容,门槛会更低(3:1而不是4.5:1)。

对比度是不是越高越好?

从无障碍合规的角度看,关键在于是否达到所需的最低标准,而AAA是一个更严格的可选目标。不过,像纯黑配纯白这种极高对比度,长时间阅读反而可能让部分读者感到眼睛疲劳,因此不少设计师把AA当作一个既合规又舒适的基准,而不是一味追求最高对比度。