真正有效的做法是按背景真实lch亮度反推文字最低亮度并用现代css动态适配：查背景l值（如#2d2d2d≈l:20），按wcag要求文字l≥背景l+55（即l:75），再用color-mix(in lch)动态微调，需加降级色。
直接调高文字亮度值（比如把 color 从 hsl(0, 0%, 70%) 改成 hsl(0, 0%, 90%)）通常无效，甚至会让文字在 OLED 屏上泛青、边缘虚化；真正有效的做法是按背景真实 LCH 亮度反推文字最低亮度，并用现代 CSS 动态适配。
查背景色的 LCH 亮度值再算文字最低 L
RGB/HSL 是设备相关模型，人眼对明暗的感知不等于数值差。LCH 的 L 值（0–100）更贴近视觉亮度，适合做对比控制：
- 用浏览器 DevTools 取色后，在 ColorMe 等工具中粘贴背景色，查出它的
L值（例如#2d2d2d≈L: 20） - WCAG 要求对比度 ≥ 4.5:1，经验公式是：
文字 L ≥ 背景 L + 55 -
#2d2d2d（L≈20）→ 文字至少设为L: 75，对应rgb(220, 220, 220)或hsl(210, 10%, 83%) - 别用
rgb(255, 255, 255)：在偏蓝/紫深灰背景上易泛灰、OLED 边缘发虚
用 color-mix(in lch) 动态提亮文字色
手动维护多套颜色极易漏配，color-mix() 可按背景自动微调文字色，但必须用 in lch，不能用 in srgb：
- 语法示例：
color: color-mix(in lch, white 85%, var(--bg) 15%) - 混入背景色比例控制在 5%–15%，超过会削弱对比，低于 5% 几乎无效果
- 务必加降级：
color: #e0e0e0; color: color-mix(in lch, white 85%, var(--bg) 15%) - 旧版浏览器（Chrome color
小字号必须同步调高 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：如果文字在灰度下仍模糊，说明亮度差不够
最常被忽略的是：LCH 亮度计算和 font-weight 微调必须同步做；只改颜色不调字重，或只调字重不验 LCH，都会在真实设备上翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
