颜色对比度不足、HSL/HWB滥用、深色模式适配缺失及渐变半透明闪烁是四大视觉可访问性陷阱；需用工具检测、约束饱和度亮度、响应prefers-color-scheme、禁用高对比渐变与opacity叠加。
颜色对比度不足导致文字难以辨认
很多设计师直接用 #999 写在 #fff 背景上，或用 #333 放在 #f0f0f0 上，看似“灰得刚好”，实则对比度低于 WCAG 2.1 AA 标准（4.5:1），尤其对中老年用户或弱视者，阅读几行就容易眼酸。
解决方法：
- 用浏览器插件（如 axe DevTools）实时检测文本对比度，红色警告必须处理
- 深色文字优先选
#212121或更黑的#1a1a1a，避免用#333（它在浅灰背景上常不达标） - 浅色文字（如白字）配深背景时，别用纯黑
#000，改用#121212或#1e1e1e，减少眩光感
滥用 HSL/HWB 的饱和度和亮度值
写 hsl(200, 100%, 50%) 看似蓝得“饱满”，但高饱和+中等亮度在屏幕上极易刺眼；同理，hwb(0 90% 10%)（极浅红）在阳光下几乎不可读。HSL/HWB 不是“调色盘自由”，而是需要约束的视觉变量。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 正文用色饱和度控制在
10%–30%区间，UI 元素主色可放宽到50%，但避免长期直视区域（如标题、按钮）超过60% - 亮度值慎用
95%–100%和0%–5%，前者泛白刺眼，后者吸光沉闷，推荐正文背景亮度设为97%–98%（如hsl(0, 0%, 97%)） - 用 CSS 自定义属性统一管理：比如
--text-primary: hsl(210, 12%, 18%)，而不是每次手敲
忽视系统配色模式切换时的颜色适配
只写 color: #333 和 background: #fff，在 macOS / Windows 深色模式下会变成黑底黑字——不是看不见，是根本没渲染出来。这不是 bug，是 CSS 没响应 prefers-color-scheme。
必须做的三件事：
- 基础层用
@media (prefers-color-scheme: dark)覆盖关键色，至少保证文字与背景有 4.5:1 对比 - 避免硬编码
#000或#fff，改用语义化变量：color: var(--text-default)，并在 :root 和 @media 中分别定义 - 测试时手动切换系统深色模式（Chrome DevTools → Rendering → Emulate CSS media feature prefers-color-scheme），别只靠“看起来差不多”
:root {
--text-default: #1a1a1a;
--bg-default: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--text-default: #e0e0e0;
--bg-default: #121212;
}
}
body {
color: var(--text-default);
background: var(--bg-default);
}
渐变与半透明叠加引发视觉闪烁或晕眩
用 background: linear-gradient(135deg, #ff9a9e, #fad0c4) 做卡片背景，再叠一层 opacity: 0.9 的文字容器——低频色块交界处易产生摩尔纹，长时间注视会头晕。这不是玄学，是人眼对相邻高对比色阶变化的生理不适反应。
缓解策略：
- 禁用含红/蓝强对比的渐变（如
#ff0000→#0000ff），改用同色系明度过渡，例如hsl(210, 20%, 90%) → hsl(210, 20%, 95%) - 半透明元素（
rgba()或opacity）下方背景必须是纯色或极低对比纹理，禁止叠加渐变或图片 - 动画中涉及颜色变化时，禁用
transition: all，明确只过渡background-color或color，防止浏览器偷偷过渡 opacity 引发闪烁
