点一下把该套配色的背景色填进输入框
文字色候选
对比度从高到低排列,点一行即可切到预览里查看
所有候选都没到 4.5:1。这个背景上只适合放大字,或者给文字加一层底色块。
这段正文用的是当前选中的文字色,背景是你填的颜色。正文门槛 4.5:1,大字放宽到 3:1。
这是大字示例
为什么不用纯白或纯黑
在有色背景上,纯白容易发灰、纯黑容易显脏,因为人眼在判断对比时会把背景的色相一起算进去。留一点底色的色相,文字与背景才像是同一套体系里的东西。
做法是把背景色转到 HSL:色相不动,饱和度乘一个系数并设上限(浅色端不超过 40,深色端不超过 55),明度直接推到两端,浅色端取 100 / 97 / 93 / 88,深色端取 22 / 15 / 8 / 3。
纯黑与纯白仍然留在列表里当参照系:如果掺了色相的候选对比度已经和纯白差不多,那就没有理由不用它。
库里配色的文字色实测
下面是配色库中真实在用的文字色与背景色组合,数值由同一套对比度实现算出,可以自己复核。
| 配色 | 背景 | 文字 | 对比度 | 判定 |
|---|---|---|---|---|
| 暮江蓝 | #f9f9fb | #201f2d | 15.42:1 | AAA |
| 静湖蓝 | #ffffff | #0f172a | 17.85:1 | AAA |
| 生鲜橙 | #f7f8fa | #1f1f1f | 15.51:1 | AAA |
| 深潭蓝 | #f9fafa | #232529 | 14.68:1 | AAA |
| 胭脂粉 | #faf9fa | #292327 | 14.66:1 | AAA |
| 芙蓉粉 | #faf9fa | #292327 | 14.66:1 | AAA |
| 旧金箔 | #FBF5E9 | #33271E | 13.34:1 | AAA |
| 陶野青 | #F6F1E8 | #2A2622 | 13.34:1 | AAA |
| 潮光青 | #F7FAFB | #13323A | 12.96:1 | AAA |
上表九套的正文对比度区间:12.96:1 到 17.85:1,全部达到 AAA。
判定口径
正文级门槛是 4.5:1(AA)与 7:1(AAA);18px 以上、或 14px 加粗以上的大字,门槛降到 3:1(AA)与 4.5:1(AAA)。列表里的判定一律按正文级给出。
被标为推荐的是同色相候选里对比度最高、且达到正文级 4.5:1 的那一个。纯黑与纯白只作参照,它们的对比度常常更高,但在有色背景上偏生硬。如果背景太亮或太暗、没有任何候选过 4.5:1,推荐位退回对比度最高的那一项,并提示只能用于大字。