直接调高文字颜色的l值至82%–85%最可靠，因暗背景下人眼对中低饱和度、中高亮度颜色不敏感，l值卡在60%–75%是瓶颈，需用lch色空间精准控制亮度并实测验证。
直接调高文字颜色的 L 值（HSL 中的亮度）到 82%–85%，比换色相或加饱和度更可靠、更可控。
为什么暗色下文字发灰不是颜色“不对”，而是L值太低
人眼在暗背景下对中低饱和度、中高亮度的颜色极其不敏感。比如 hsl(0, 0%, 70%) 在 #121212 上实际对比度可能只有 ≈3.2:1，远低于 WCAG AA 要求（4.5:1）。这不是浏览器 bug，是明暗感知的生理限制。
- 别再试
rgb(255, 255, 255)—— 在偏蓝深灰背景（如#1e1e1e）上反而泛灰、OLED 边缘虚化 - 也别只调
S（饱和度）：S 单独拉高会放大色相偏差，导致文字“发闷”或“泛黄” - 真正瓶颈是
L值卡在 60%–75% 区间，必须推到 82%–85% 才稳
用 LCH 色空间算出安全 L 值，再转成可用颜色
RGB/HSL 是设备相关模型，调亮度靠猜；LCH 的 L 值（0–100）直接对应人眼感知亮度，更适合做对比控制。
- 用 DevTools 取背景色，丢进支持 LCH 的工具（如 ColorMe），查出背景
L值（例：#2d2d2d ≈ L: 20） - 按 “背景
L+ 55” 原则算文字最低L（例：20 + 55 = 75） - 选
L: 75、C: 0（去色，避免偏色）、H: 0，得到类似rgb(220, 220, 220)的真灰白，比硬写白色更耐看
现代浏览器用 color-mix(in lch) 动态适配多套深色主题
如果你有多个深色背景（#1e1e1e、#0f0f0f、#2d2d2d），硬写多套 hsl() 容易漏、难维护。
- 语法：
color: color-mix(in lch, white 85%, var(--bg) 15%) - 必须用
in lch：用in srgb在暗区混合容易突然偏粉或泛青 - 混入背景比例控制在 5%–15%：既能抑制 OLED 过曝边缘，又不削弱文字主体感
- 务必降级：
color: #e0e0e0; color: color-mix(in lch, white 85%, var(--bg) 15%);
别忽略 font-weight 和渲染行为的影响
再准的颜色，在深色背景下也撑不住 font-weight: 400 —— 尤其 ≤14px 时，系统抗锯齿弱化会让文字毛边、发虚。
- 小字号文本强制设
font-weight: 500或更高 - 加
text-rendering: optimizeLegibility提升字形清晰度 -
::selection必须显式声明color和background-color，否则系统切暗色后高亮不可见 - 所有调整后，务必开 DevTools 灰度模式验证：如果文字在灰度下仍清晰，说明亮度差真够了
最易被忽略的点是：对比度达标 ≠ 可读性达标。OLED 屏幕的子像素混色、系统字体渲染策略、甚至用户自身的视觉敏感度，都会让同一组 L 值在不同设备上表现差异巨大——必须实测，不能只信眼睛或工具数值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
