在色导网检测文字对比度与无障碍达标情况
默认这一组是故意选的边界值: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)门槛和大字的定义
| 用途 | AA | AAA |
|---|---|---|
| 正文与小字 | 4.5:1 | 7:1 |
| 大字 | 3:1 | 4.5:1 |
| 图形与界面控件边界 | 3:1 | 标准未另设 |
「大字」指不小于 18pt 的常规字重,或不小于 14pt 的粗体;按常见的 96dpi 换算约等于 24px 常规或 18.66px 粗体。中文字形笔画密、字面率高,同样的像素尺寸比拉丁字母更难读,所以靠「字够大所以用 3:1」这条路要谨慎。