在写css样式时，我们常常用十六进制或者rgb来定颜色，但这类写法很难直观判断两块颜色摆在一起是否看得清。可访问性规范里明确要求正文文字和背景的对比度至少要达到4.5比1，可很多团队上线后才发现按钮上的白字配浅蓝底根本读不动。hsl把颜色拆成色相、饱和度、亮度三个独立维度，其中亮度直接对应人眼感受到的明暗，因此用它来规划配色更能保证对比度。
为什么hsl更适合可访问性设计
rgb和hex都是基于光的三原色混合，改动其中一个数值，色相、亮度都会变，不好预估明暗。hsl里的l表示亮度，从0%到100%，0%是黑、100%是白。只要我们让文字和背景的l值拉开足够差距，对比度通常就能达标。比如深底用l在20%左右，浅字用l在85%以上，基本不会出错。
对比度与亮度的简单关系
根据wcag的相对亮度公式，两个颜色的相对亮度差越大，对比度越高。hsl的l虽然不是严格物理亮度，但和相对亮度高度相关，所以调l比调rgb更省事。
| 背景l值 | 文字l值 | 预估对比度 |
|---|---|---|
| 20% | 90% | 约7:1 |
| 50% | 90% | 约3:1（不达标） |
| 10% | 80% | 约9:1 |
用css变量管理hsl配色
我们可以把色相和饱和度固定，只暴露亮度变量，这样整站换肤时也能守住对比度底线。
:root {
--hue: 220;
--sat: 60%;
--bg-l: 18%;
--text-l: 92%;
--bg: hsl(var(--hue) var(--sat) var(--bg-l));
--text: hsl(var(--hue) var(--sat) var(--text-l));
}
body {
background: var(--bg);
color: var(--text);
}
通过js校验对比度
如果担心手调不准，可以用一小段脚本把hsl转成相对亮度算对比度。下面代码演示核心逻辑：
// 将hsl转rgb再算相对亮度
function hslToRgb(h, s, l) {
s /= 100; l /= 100;
const k = n => (n + h / 30) % 12;
const a = s * Math.min(l, 1 - l);
const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
return [f(0) * 255, f(8) * 255, f(4) * 255];
}
function relLum(r, g, b) {
const chan = c => {
c /= 255;
return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
};
return 0.2126 * chan(r) + 0.7152 * chan(g) + 0.0722 * chan(b);
}
function contrast(l1, l2) {
const light = Math.max(l1, l2), dark = Math.min(l1, l2);
return (light + 0.05) / (dark + 0.05);
}
const [r, g, b] = hslToRgb(220, 60, 18);
const [r2, g2, b2] = hslToRgb(220, 60, 92);
const ratio = contrast(relLum(r, g, b), relLum(r2, g2, b2));
console.log('对比度:' + ratio.toFixed(2));
实际书写时的注意点
- 不要只用饱和度区分，色弱用户可能分不出相近色相。
- 大段正文尽量用高对比，图标文字可略放宽到3:1。
- 用
hsl()函数时，现代浏览器支持空格分隔写法，旧版可用逗号。
可访问性不是上线前补丁，而是定主题色时就该算好的事。hsl让这件事变得可量化。
小结
把颜色拆成hsl三个通道，我们就能把对比度控制简化成亮度差控制。配合css变量与简单校验脚本，团队可以低门槛地产出符合规范的界面。下次写css颜色时，先问一句：这两个l值差够了吗。