合格的对比度数值不等于舒适的视觉体验，问题在于hsl的l%是绝对线性明度值而非人眼感知亮度，同一组hsl(200,100%,50%)在深灰底上因瞳孔放大引发色散和光学振动而刺眼；l%±10%调整比s%大幅变化更有效缓解刺眼，且必须声明color-scheme: light dark以启用系统控件暗色渲染，并重估gap/border/shadow等非文字视觉分量。
合格的对比度数值不等于舒适的视觉体验——WCAG 工具测出 4.8:1，眼睛却发酸、跳字、觉得某块颜色“在动”，问题不在对比度是否达标，而在 HSL 的 l% 值没适配暗环境生理响应。
hsl() 的 l% 是绝对值，不是人眼感知亮度
同一组 hsl(200, 100%, 50%) 在白底上温和，在深灰底上却像一道蓝光扎进瞳孔。因为 l% 描述的是“全白到全黑”的线性明度，而人眼在暗环境下瞳孔放大、视锥细胞敏感度下降、对中高 l%（如 45%–60%）区域的颜色会产生强烈色散和光学振动。实测显示：l% 变化 ±10% 引起的刺眼感，远大于 s% 从 80% 降到 40% 的影响。
系统级暗色切换未触发 color-scheme 声明
只写 @media (prefers-color-scheme: dark) 不够，浏览器不会自动启用原生控件（滚动条、input 光标、::selection）的暗色渲染逻辑。必须显式声明：
:root {
color-scheme: light dark;
}
否则你调好的 hsl(210, 12%, 18%) 文字，可能被系统强制套上默认深色 ::selection 背景，造成局部高亮闪烁；或者 input 边框仍用亮色模式的 #cbd5e1，在深灰背景上直接“消失”。
gap / border-color / box-shadow 的视觉分量崩了
刺眼感常来自“非文字区域”的相对失衡：
- 亮色模式下
gap: 1rem和border-color: #e2e8f0看着清爽，切到暗色后，这些值在深背景上几乎不可见，导致模块边界模糊，视觉焦点被迫挤向高亮文字或按钮，加剧疲劳 -
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)在暗背景下变成“脏灰晕染”，反而让卡片边缘发虚 - 解决方式不是调文字色，而是重估所有视觉分量：深色模式下
border-color应改用hsl(210, 8%, 30%)，box-shadow改用hsla(210, 10%, 25%, 0.15)，gap建议微增至1.125rem提升呼吸感
RGBA 或 opacity 混合制造“假柔和”
用 rgba(30, 144, 255, 0.9) 替代 hsl(210, 100%, 50%) 看似降低了强度，实则是把高饱和蓝和背景做线性混合——在 OLED 屏幕上会激发子像素辉光，小字号时文字边缘泛蓝晕，持续阅读 2 分钟后明显眼干。真正有效的降刺眼路径是：先压 l%（如降到 25%），再微调 s%（如降到 40%），最后考虑是否加 alpha；且 alpha 值绝不超 0.9，避免二次混合失真。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
