最有效解法是调高hsl的l值至82%–85%，而非换色相或加饱和度；需配合font-weight≥500、text-rendering: optimizelegibility及color-mix(in lch)动态适配，并用工具实测对比度。
直接调高颜色的亮度值（L），而不是换色相或加饱和度——这是最有效、最可控的解法。
用 HSL 的 L 值精准提亮文字色
深色背景上文字发灰，90% 的情况是 HSL 中的 L（亮度）值太低。比如 hsl(0, 0%, 70%) 在 #2d2d2d 背景上实际对比度可能只有 ≈3.2:1，远低于 WCAG 最低要求（4.5:1）。
目标不是“越白越好”，而是让文字在当前背景下“够亮又不刺眼”：
-
L值建议设为82%–85%（如hsl(210, 10%, 83%)），冷调稳白，OLED 屏上不易辉光 - 避免
hsl(0, 0%, 100%)或rgb(255, 255, 255)：在偏蓝/紫的深灰背景（如#1e1e1e）上反而泛灰、边缘虚化 - 小字号（≤14px）时，
S（饱和度）别超过12%，否则红/绿通道干扰聚焦
用 color-mix(in lch) 动态适配背景色
如果你有多个深色主题（比如 #1e1e1e、#2d2d2d、#0f0f0f），硬写多套 hsl() 容易漏配、难维护。color-mix(in lch) 可按背景自动计算文字色，现代浏览器（Chrome 111+、Safari 16.4+、Firefox 119+）已支持：
- 语法示例：
color: color-mix(in lch, white 85%, var(--bg) 15%) - 必须用
in lch，不用in srgb：后者在暗区混合容易突然偏粉或泛青 - 混入背景色比例控制在
5%–15%：既能抑制 OLED 过曝边缘，又不削弱文字主体感 - 务必加降级：
color: #e0e0e0; color: color-mix(...);，不支持时回退到预设色
别忽略字重和渲染行为的影响
再准的颜色，在深色背景下也撑不住 font-weight: 400 —— 尤其小字号时，系统抗锯齿弱化会让文字毛边、发虚。
- 正文至少用
font-weight: 500；按钮/标题建议600或更高 - 加
text-rendering: optimizeLegibility启用字距优化（Chrome/Firefox 支持） - OLED 设备上可加
-webkit-font-smoothing: antialiased抑制子像素彩色镶边 - 禁用已废弃的
font-smooth: always或无意义的paint-order: stroke
验证不能只靠眼睛，得跑工具
同一段文字，在 MacBook Pro LCD 屏和 iPhone OLED 屏上的清晰度差异显著。人工判断误差大，必须实测：
- VS Code 插件
Color Highlight悬停即可看实时对比度数值 - Chrome DevTools → Elements → Styles 面板右侧 “Accessibility” 标签页，选中元素直出
Contrast ratio - 命令行扫描：
npx axe http://localhost:3000 --rule=contrast - 注意“伪达标”：工具报
4.6:1，但如果字号 ≤14px、字体细、背景有纹理或图片，实际可读性仍可能崩
真正卡住人的从来不是“怎么调颜色”，而是忘了字重、渲染策略和设备差异这三块——它们和颜色一起构成可读性的完整链条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
