17370845950

深色背景下文字/图标发灰本质是对比度不足，需提高HSL中的亮度L（65%–85%）和饱和度S（+15–25%），用CSS自定义属性统一管理并工具验证对比度。

深色背景上文字/图标发灰，本质是对比度不足

不是颜色“变灰”，而是人眼在暗背景下对低饱和、中高亮度的颜色更不敏感。比如 #888 在白色背景上是明显灰色，在黑色背景上会显得“脏”“糊”“没精神”，尤其对小字号文本或细线图标。浏览器渲染、OLED 屏幕的子像素混色也会放大这种效应。

用 hsl() 直接调亮、提饱和，比瞎试十六进制快得多

hsl() 把颜色拆成色相（H）、饱和度（S）、亮度（L）三个维度，深色背景下最常需要动的就是后两个：提高 l（让颜色更“跳出来”），适当提高 s（避免发白或发闷）。不要碰 h，除非你真想换色。

• 原色 hsl(200, 10%, 50%) 在 #121212 上几乎看不见
• 调成 hsl(200, 30%, 70%) → 明显、干净、不刺眼
• 再加点饱和度：hsl(200, 45%, 72%) → 更有辨识度，适合按钮或重点标签

记住：深色模式下，l 值通常要拉到 65%–85% 区间，s 值比浅色模式下高 15–25% 才够稳。

别只调单个颜色，用 CSS 自定义属性批量控制

硬写一堆 hsl(210, 40%, 75%) 很难维护。把 H、S、L 拆成变量，一改全改：

:root {
  --primary-h: 210;
  --primary-s: 40%;
  --primary-l: 75%;
}
.text-primary {
color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}
/ 深色模式下覆盖 /
@media (prefers-color-scheme: dark) {
:root {
--primary-l: 80%;
--primary-s: 55%;
}
}

这样改亮度不用翻代码找所有 color，也不用重复写 hsl()。注意：IE 不支持 hsl() 变量，但现代项目基本可忽略。

检查对比度，别信眼睛——用工具验证

人眼在暗环境下会自动降低对比敏感度，你以为“看得清”，实际可能低于 WCAG AA 标准（4.5:1）。尤

• Chrome DevTools 的无障碍面板能实时测当前元素对比度
• 在线工具如 WebAIM Contrast Checker 输入 hsl(240, 30%, 60%) 和 #1e1e1e，它会自动转成 sRGB 再算比值
• 警惕“看起来还行”的灰色：hsl(0, 0%, 60%)（纯灰）在 #121212 上对比度仅 ≈ 3.2:1，不合格

真正麻烦的是半透明色（rgba() 或 hsla()）叠加深色背景后的视觉灰度——它没法靠调 hsl() 简单修复，得重算混合后的真实色值再反推。