明度差低于15%时文字几乎不可读；应优先用hsl()控制明度梯度，box-shadow需明度递减叠加，伪元素蒙版宜用hsla()确保明度纯净，真机强光下验证稳定性。
明度差低于15%时，文字几乎不可读
人眼对明度变化的敏感度远高于色相或饱和度。当文本与背景的明度值（L值）差小于15%，尤其在移动端高DPR屏或环境光较强时，文字会迅速“融化”进背景。比如 hsl(210, 10%, 45%) 文字配 hsl(210, 10%, 58%) 背景，L差仅13%，实测对比度约3.2:1，不满足WCAG AA标准。
实操建议：
- 用浏览器 DevTools 的“Contrast ratio”面板实时校验，别信设计稿标注
- 深色模式下，
--text-primary建议设为hsl(0, 0%, 92%)而非简单hsl(0, 0%, 85%)—— 后者在OLED屏上易发灰 - 按钮禁用态不要只降
opacity，应同步调高背景明度（如从hsl(210, 10%, 60%)→hsl(210, 10%, 82%)），维持明度差
用hsl()批量控制明度梯度比rgb()更可靠
rgb() 调整明度需同时动三个通道，且不同色相的亮度权重不同（绿色最亮，蓝色最暗），手动微调极易失衡。而 hsl() 的 L 参数直接映射感知明度，改一个数字就能线性推移整套颜色。
例如构建前景/中景/远景三层卡片：
- 前景卡片：
background-color: hsl(220, 15%, 42%) - 中景卡片：
background-color: hsl(220, 12%, 68%) - 远景卡片：
background-color: hsl(220, 8%, 86%)
三者色相（h）和饱和度（s）保持关联，仅明度（l）拉开阶梯，视觉纵深自然成立。若强行用 rgba(30, 60, 120, 0.9) → rgba(180, 190, 220, 0.9)，色相实际已漂移，远近感反而断裂。
box-shadow多层叠加必须匹配明度衰减逻辑
单层阴影无法模拟真实空间深度。浏览器绘制多层 box-shadow 时，是从左到右逐层叠加，所以每层的明度（即rgba中第四个参数）必须严格递减，否则会出现“远层压近层”的穿帮效果。
典型错误写法：box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.2) —— 第二层比第一层更重，阴影像被“顶起来”。
正确组合示例：
box-shadow: 0 2px 4px rgba(0,0,0,0.2),
0 4px 12px rgba(0,0,0,0.1),
0 12px 32px rgba(0,0,0,0.04);
注意：模糊半径（第三参数）也需阶梯增大，否则仅调透明度会让远层阴影边缘生硬，失去空气感。
伪元素叠加时，明度控制要避开父容器背景干扰
用 ::before 做蒙版或渐变时，若父容器背景是图片或渐变，直接写 background: rgba(0,0,0,0.3) 会导致明度表现不可控——同一组rgba在浅图上显灰，在深图上显透，远近关系崩塌。
更稳妥的做法：
- 用
background: hsla(0, 0%, 0%, 0.3)替代rgba(0,0,0,0.3)，确保色相/饱和度归零，明度衰减纯粹 - 对关键层级元素加
isolation: isolate，防止混合模式污染明度计算 - 移动端慎用
backdrop-filter: blur(1px)配合明度调整——部分安卓WebView会强制提亮模糊区域，破坏预设梯度
真正难的不是算出哪几个hsl值，而是让明度差在所有设备、所有背景、所有缩放比例下都稳定可测。每次改完变量，务必在真机上切到阳光直射模式看一眼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
