用hsl模式精准调节亮度（l值）是提升对比度且保持配色协调的高效方法，因其分离色相、饱和度与亮度，调l不改主色调；普通文本需≥4.5:1对比度，l值差≥40较安全；微调建议：文字发灰则降l值，背景抢眼则升l值，深色模式下白色文字可微降至l=92%以减眩光。
直接调亮背景或加深文字颜色，往往治标不治本。用 HSL 模式精准控制亮度（Lightness），才是提升对比度又保持配色协调的高效办法。
为什么 HSL 比 HEX/RGB 更适合调对比度
HSL 把颜色拆成色相（H）、饱和度（S）、亮度（L）三个直观维度。其中 L 值直接决定明暗程度：0% 是纯黑，100% 是纯白，50% 左右通常是视觉上最“中性”的亮度。改 L 值不改变主色调，只调整明暗，避免换色后风格跑偏。
快速判断当前对比是否达标
普通文本（字号 ≤ 18px 或加粗 ≤ 14px）需满足 WCAG AA 级对比度 ≥ 4.5:1。可：
- 用浏览器开发者工具选中元素，查看计算出的对比度数值（Chrome DevTools 的 Accessibility 面板会直接显示）
- 临时把背景和文字都转成 HSL，观察两者的 L 值差——差值 ≥ 40 通常较安全（如文字 L=20，背景 L=75），但需结合 S 和实际显示效果验证
用 HSL 微调的实操建议
不推荐暴力拉满亮度，而是小幅、定向优化：
立即学习“前端免费学习笔记（深入）”；
- 若文字发灰看不清：保持 H 和 S 不变，降低文字的 L 值（比如从
hsl(210, 20%, 40%)改为hsl(210, 20%, 25%)） - 若背景太“抢”文字：保持 H 和 S 不变，提高背景的 L 值（比如浅灰背景从
hsl(0, 0%, 90%)升到hsl(0, 0%, 94%)，更柔和不刺眼） - 深色模式下文字难读？别只加白——试把白色文字
hsl(0, 0%, 100%)微调为hsl(0, 0%, 92%)，减少眩光，眼睛更舒服
顺手检查的细节
调完别急着上线：
- 在不同屏幕（尤其低亮度 OLED 手机）上看真实效果
- 检查按钮悬停、禁用等状态下的对比是否依然合格
- 如果用了半透明背景（如
rgba(…, 0.8)），实际对比度会变化，需按最终叠加色重新计算
基本上就这些。HSL 不是万能，但它是你掌控可读性的第一把精准刻刀。
