首页 / 颜色工具 / 文字色推荐器

文字色推荐器

给一个背景色,还你一组能用的文字色。候选不是随手挑的白与黑,而是同色相的极浅与极深版本,每个都带实测对比度。

点一下把该套配色的背景色填进输入框

文字色候选

对比度从高到低排列,点一行即可切到预览里查看

预览——

这段正文用的是当前选中的文字色,背景是你填的颜色。正文门槛 4.5:1,大字放宽到 3:1。

这是大字示例

为什么不用纯白或纯黑

在有色背景上,纯白容易发灰、纯黑容易显脏,因为人眼在判断对比时会把背景的色相一起算进去。留一点底色的色相,文字与背景才像是同一套体系里的东西。

做法是把背景色转到 HSL:色相不动,饱和度乘一个系数并设上限(浅色端不超过 40,深色端不超过 55),明度直接推到两端,浅色端取 100 / 97 / 93 / 88,深色端取 22 / 15 / 8 / 3。

纯黑与纯白仍然留在列表里当参照系:如果掺了色相的候选对比度已经和纯白差不多,那就没有理由不用它。

库里配色的文字色实测

下面是配色库中真实在用的文字色与背景色组合,数值由同一套对比度实现算出,可以自己复核。

配色背景文字对比度判定
暮江蓝#f9f9fb#201f2d15.42:1AAA
静湖蓝#ffffff#0f172a17.85:1AAA
生鲜橙#f7f8fa#1f1f1f15.51:1AAA
深潭蓝#f9fafa#23252914.68:1AAA
胭脂粉#faf9fa#29232714.66:1AAA
芙蓉粉#faf9fa#29232714.66:1AAA
旧金箔#FBF5E9#33271E13.34:1AAA
陶野青#F6F1E8#2A262213.34:1AAA
潮光青#F7FAFB#13323A12.96:1AAA

上表九套的正文对比度区间: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,推荐位退回对比度最高的那一项,并提示只能用于大字。