真正有效的深色模式文字适配需按背景lch亮度反推文字最低亮度，用color-mix(in lch)动态提亮，并提升font-weight与启用抗锯齿，再经工具实测对比度。
直接调高 color 的亮度值（比如从 hsl(0, 0%, 70%) 改成 hsl(0, 0%, 90%)）往往不够，甚至会让文字在 OLED 屏上泛青、边缘虚化。真正有效的做法是按背景真实亮度反推文字最低亮度，并用现代 CSS 做动态适配。
先查背景色的 LCH 亮度值，再算文字最低 L
深色背景如 #2d2d2d 看似“很黑”，实测 LCH 亮度 L ≈ 20；#1e1e1e 的 L ≈ 15。WCAG 要求对比度 ≥ 4.5:1，经验公式是：文字 L ≥ 背景 L + 55。所以：
-
#2d2d2d（L≈20）→ 文字 L 至少设为 75，对应hsl(210, 10%, 83%)或rgb(220, 220, 220) -
#1e1e1e（L≈15）→ 文字 L 至少设为 70，但建议拉到 82%–85%，更耐看、OLED 边缘更干净 - 别用
hsl(0, 0%, 100%)或rgb(255, 255, 255)：在偏蓝/紫背景上易泛灰、发虚
用 color-mix(in lch) 动态提亮，避免多套颜色硬编码
如果你有多个深色主题（#0f0f0f、#2d2d2d、#1e1e1e），手动维护每套文字色极易漏配。现代浏览器（Chrome 111+、Safari 16.4+、Firefox 119+）支持 color-mix()，关键点：
- 必须用
in lch，不是in srgb：后者在暗区混合会突然偏粉或泛青 - 混入背景色比例控制在 5%–15%，例如：
color: color-mix(in lch, white 85%, var(--bg) 15%) - 务必加降级：
color: #e0e0e0; color: color-mix(in lch, white 85%, var(--bg) 15%)
小字号文字必须同步调高 font-weight 和启用抗锯齿
再准的颜色，在深色背景下也撑不住 font-weight: 400——尤其 ≤14px 时，系统抗锯齿弱化会让文字毛边、发虚：
- 正文至少用
font-weight: 500；按钮/标题建议600或更高 - OLED 设备加
-webkit-font-smoothing: antialiased抑制子像素镶边 - 加
text-rendering: optimizeLegibility启用字距优化（Chrome/Firefox 支持） - 禁用已废弃的
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 - 开 DevTools → Rendering → Emulate vision deficiencies →
Grayscale：如果文字在灰度下仍清晰，说明亮度差真够了
最常被忽略的是：::selection 在暗色模式下默认不继承文字色，必须显式声明 color 和 background-color；还有 :root 必须加 color-scheme: light dark，否则原生控件（滚动条、input 光标）仍走系统默认逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
