色导网中文配色工作台与色彩资料馆

对比度标准的口径与盲区(色导网课堂)

这套口径的好处是可计算、可自动检查;代价是它只看亮度。知道它看不见什么,才不会把「达标」当成「可读」。

对应各目标比值解出的灰色梯级

公式只有三步

lin(c) = c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4
Y      = 0.2126 * lin(R) + 0.7152 * lin(G) + 0.0722 * lin(B)
ratio  = (Y_亮 + 0.05) / (Y_暗 + 0.05)

第一步撤销 sRGB 的编码曲线,第二步按人眼对三原色的灵敏度加权,第三步取比值。那个 0.05 是环境反光的补偿项,它让纯黑对纯白的比值落在 21:1 而不是无穷大。

整条公式里没有任何一项涉及色相。两个颜色的色相差多大,对结果完全没有影响。

两个门槛的分工

门槛来自 WCAG 2.1 的感知类成功准则;具体适用范围以当地现行的无障碍规定为准。
门槛适用出发点
4.5:1正文与小字的 AA覆盖常见的中度视力下降,不依赖放大工具
3:1大字的 AA;图形与界面控件边界字更大时笔画更粗,需要的亮度差更小
7:1正文的 AAA留出更大余量,面向更明显的视力下降
4.5:1大字的 AAA把正文 AA 的余量给到大字

「大字」指不小于 18pt 常规字重或不小于 14pt 粗体,按常见的 96dpi 换算约为 24px 常规或 18.66px 粗体。注意这是按拉丁字母的字形定的。中文字面率高、笔画密,同样像素尺寸下的实际笔画更细,所以用 3:1 做中文大字时要留余量。

从 1.5:1 到 21:1 的灰色正文梯级对照白底 + 解出目标比值的灰对比度 1.5:1 的正文看起来是这样#D3D3D3对比度 2.5:1 的正文看起来是这样#A4A4A4对比度 3.0:1 的正文看起来是这样#959595对比度 4.5:1 的正文看起来是这样#777777对比度 7.0:1 的正文看起来是这样#595959对比度 12.0:1 的正文看起来是这样#363636对比度 21.0:1 的正文看起来是这样#0000004.5:1 是正文 AA 的门槛,3:1 只够大字
白底上按各目标比值解出的灰色正文。4.5:1 已经明显偏淡,3:1 在正文尺寸下基本不可读。

还有别的口径吗

有。基于感知对比的算法(例如 APCA)试图把字号、字重和极性纳入计算,目前仍在发展中,并不是 WCAG 2 的要求。本站不用它的数字冒充标准结论;需要正式合规判断时,请按你所在地区现行采用的标准版本执行。