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

在色导网检测文字对比度与无障碍达标情况

默认这一组是故意选的边界值:4.48:1 离正文门槛只差一点,正文判不通过,大字判通过。改一位十六进制就能看出门槛有多近。

从白到墨的灰阶梯级

两个颜色

方案库与传统色谱里的「在对比度工具中检查」链接会把颜色带到这里。

结果

4.48:1

正文 AA(4.5:1)不通过
正文 AAA(7:1)不通过
大字 AA(3:1)通过
大字 AAA(4.5:1)不通过

大字示例:二十四像素的粗体标题

正文示例:这一段用的是十六像素的常规字重,中文笔画比拉丁字母密,同样的比值下更吃亏。

再一行正文,用来看连续阅读时眼睛累不累。

公式写在这里

第一步把每个通道从 8 位整数还原成线性值:

c = C / 255
lin(c) = c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ^ 2.4

第二步算相对亮度:

L = 0.2126 * lin(R) + 0.7152 * lin(G) + 0.0722 * lin(B)

第三步取两者的比值,亮的在上:

contrast = (L_light + 0.05) / (L_dark + 0.05)

门槛和大字的定义

门槛来自 WCAG 2.1 的感知类成功准则。
用途AAAAA
正文与小字4.5:17:1
大字3:14.5:1
图形与界面控件边界3:1标准未另设

「大字」指不小于 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 只有放大后才勉强可读。