深色背景下文字/图标发灰本质是对比度不足，需提高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%;
}
<p>.text-primary {
color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}</p><p>/<em> 深色模式下覆盖 </em>/
@media (prefers-color-scheme: dark) {
:root {
--primary-l: 80%;
--primary-s: 55%;
}
}这样改亮度不用翻代码找所有 color，也不用重复写 hsl()。注意：IE 不支持 hsl() 变量，但现代项目基本可忽略。
检查对比度，别信眼睛——用工具验证
人眼在暗环境下会自动降低对比敏感度，你以为“看得清”，实际可能低于 WCAG AA 标准（4.5:1）。尤其蓝紫色系（H≈240–300）在深色背景上极易掉对比度。
- Chrome DevTools 的无障碍面板能实时测当前元素对比度
- 在线工具如 WebAIM Contrast Checker 输入
hsl(240, 30%, 60%)和#1e1e1e，它会自动转成 sRGB 再算比值 - 警惕“看起来还行”的灰色：
hsl(0, 0%, 60%)（纯灰）在#121212上对比度仅 ≈ 3.2:1，不合格
真正麻烦的是半透明色（rgba() 或 hsla()）叠加深色背景后的视觉灰度——它没法靠调 hsl() 简单修复，得重算混合后的真实色值再反推。
