深色背景下文字发晕的根本原因是对比度不足叠加渲染特性，需同步控制亮度差、饱和度、字重与抗锯齿行为；纯白文字在oled上易辉光晕染，应优选hsl(210,10%,82%)等冷调稳白，正文font-weight≥500并启用optimizelegibility。
深色背景下文字发晕（边缘虚化、泛灰、聚焦困难），根本原因是对比度不足叠加渲染特性，不是单纯调亮就能解决；必须同步控制亮度差、饱和度、字重与抗锯齿行为。
为什么纯白文字在深色背景上反而发虚
纯白 rgb(255, 255, 255) 在 OLED 屏或高对比深灰背景（如 #1e1e1e）上易出现辉光晕染，尤其小字号时，子像素混色会让边缘“融化”。这不是 bug，是物理显示限制。
- 人眼对蓝紫光（H≈240–300）在暗场中敏感度下降，
hsl(240, 30%, 95%)看似亮，实测对比度可能仅 ≈ 3.8:1 -
font-weight: 400在深底上渲染更细、更易被背景“吃掉”，需至少500起步 - 系统级抗锯齿（如 macOS 的 subpixel rendering）在深色模式下默认弱化，导致文字毛边感增强
用 HSL 精准提亮 + 控制饱和度防发灰
别硬凑 #ffffff 或 hsl(0, 0%, 100%)。优先动 L（亮度），慎动 S（饱和度），H（色相）微调 ±10° 即可。
- 背景
lch(20% 5 220)（约#2d2d2d）→ 文字目标 L ≥ 75%，推荐hsl(210, 10%, 82%)（带冷调的稳白，非荧光） - 避免
hsl(0, 0%, 90%)这类“假白”：它在 OLED 上灰阶压缩明显，实际亮度感知低于hsl(210, 8%, 85%) - 小字号（≤14px）文字 S 建议 ≤12%，否则绿/红通道过强会抢焦点；大标题可放宽至 20%
必须配合 font-weight 和 text-rendering 微调
再准的颜色，没合适的字重和渲染策略也白搭。深色背景对字体渲染更苛刻。
- 正文至少设
font-weight: 500；按钮/标题建议600或更高，避免400在深底上“隐形” - 加
text-rendering: optimizeLegibility强制启用连字与字距优化（Chrome/Firefox 支持） - OLED 设备上，加
-webkit-font-smoothing: antialiased可抑制子像素渲染导致的彩色镶边 - 禁用
font-smooth: always（已废弃）或paint-order: stroke（无意义）
rgba 衬底或 text-shadow 是兜底方案，不是首选
当颜色+字重仍不稳（比如背景图明暗不均），才考虑视觉锚点。但必须控制尺寸和透明度，否则破坏语义。
- 用
::before叠rgba(0, 0, 0, 0.4)衬底时，display: inline-block+padding: 2px 6px，不可只靠margin -
text-shadow: 0 0 4px rgba(0, 0, 0, 0.6)仅限 ≥16px 标题；小字会糊成一团，且无法精确控制底色宽度 - 所有衬底方案都绕不开对比度验证：把最终呈现色（混合后）输入 WebAIM Checker，而非原始
color值
真正难的不是调出一个“看起来还行”的颜色，而是确认它在目标设备（尤其是 OLED 手机）、真实光照（非实验室暗室）、用户视疲劳状态下是否持续可辨——这要求你每次改完都用 DevTools 的 Accessibility 面板看实时对比度数值，而不是盯着屏幕点头。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
