深色背景下文字发灰因对比度不足，需用lch色空间按背景l值+55确定文字亮度，再转rgb；可用color-mix(in lch)动态混合提亮，并用工具实测对比度，避免小字号细字体导致可读性差。
深色背景上文字发灰看不清，是因为对比度不足
人眼对颜色明暗差异敏感，不是单纯看“是不是白色”。rgb(255, 255, 255) 在纯黑背景（rgb(0, 0, 0)）上对比度是 21:1，达标；但若背景是 #1e1e1e 或 #2d2d2d，白色文字实际对比度可能跌到 15:1 甚至更低——已低于 WCAG AA 级最低要求（4.5:1），视觉疲劳感明显。
直接调亮文字不是万能解：盲目用 rgb(255, 255, 255) 在偏蓝/紫的深灰背景上反而泛灰、发虚；而用 hsl(0, 0%, 98%) 这类高亮度但低饱和的“假白”，在 OLED 屏上更易出现辉光晕染。
别硬凑 RGB 数值，先查背景色的 LCH 亮度值
RGB 是设备相关模型，调整时难直觉判断明暗变化。LCH 色彩空间中 L（亮度）值 0–100 直接对应人眼感知亮度，更适合做对比控制：
- 用浏览器开发者工具取色后，在支持 LCH 的工具（如 ColorMe）粘贴背景色，记下它的
L值（比如#2d2d2d≈L: 20） - 目标文字
L值建议 ≥background_L + 55（保证对比度 ≥ 4.5:1），例如背景L: 20→ 文字至少L: 75 - 再转回 RGB：选
L: 75、C: 0（去色，避免偏色）、H任意（通常设为 0），得到类似rgb(220, 220, 220)的“真灰白”，比生硬的rgb(255, 255, 255)更耐看
用 CSS color-mix() 动态提亮，适配多种深色主题
如果项目支持现代浏览器（Chrome 111+、Safari 16.4+、Firefox 119+），color-mix() 可以按背景色自动计算文字色，避免为每种主题写死多套颜色：
立即学习“前端免费学习笔记（深入）”；
body.dark {
--bg: #1e1e1e;
color: color-mix(in lch, white 85%, var(--bg) 15%); /* 白色为主，微量混入背景保协调 */
}关键点：
-
in lch混合比in srgb更均匀，不会在暗区突然变粉或泛青 - 比例别拉满（如
white 100%），混入 5–15% 背景色可抑制 OLED 屏的过曝边缘 - 不支持该语法的浏览器会回退到声明的前一个
color值，记得加降级
检查对比度不能只信眼睛，要跑自动化验证
人工判断误差大：同一段文字，在 MacBook Pro 屏和 iPhone OLED 屏上清晰度差异显著。必须用工具实测：
- VS Code 插件
Color Highlight悬停颜色可实时显示对比度数值 - Chrome DevTools → Elements → Styles 面板右侧的“Accessibility”标签页，选中文字元素直接看
Contrast ratio - 命令行可用
axe-core扫描：npx axe http://localhost:3000 --rule=contrast - 警惕“伪达标”：工具报 4.6:1，但如果文字用了
font-weight: 300或letter-spacing: 1px，实际可读性仍可能不合格
真正麻烦的是小字号+细字体+深灰背景的组合，这时哪怕对比度数字好看，用户依然要眯眼。优先加粗文字、增大行高，比死磕 RGB 值更有效。
