直接改 :root 颜色变量不能自动提升无障碍表现，必须验证对比度（小文本≥4.5:1、大文本≥3:1）、适配深色模式、交互态及色觉缺陷——工具校验与语义增强缺一不可。
直接改 :root 里的颜色变量就能提升无障碍表现，但必须配合对比度验证和状态适配，否则只是“看起来换了色”。
怎么用CSS变量定义WCAG合规的文本/背景组合
CSS变量本身不保证可访问性，关键在于赋值是否满足4.5:1（小文本）或3:1（大文本）对比度。不能只写--text-color: #333就完事——得先算。
- 用工具验证：Chrome DevTools 的无障碍检查器、axe DevTools 或在线工具如
contrast-ratio.com输入你的--bg-color和--text-color值实时测 - 优先用
hsl()而非hex：明度（L）是影响对比度的核心，比如--text-color: hsl(0, 0%, 12%)比#1a1a1a更易推演变体 - 深色模式下别直接反色：浅色模式用
--bg: #fff; --text: #1a1a1a，深色模式应设为--bg: #121212; --text: #e0e0e0，而不是#000和#fff——后者在OLED屏上反而刺眼且耗电
按钮悬停/激活态的颜色变量怎么设才不翻车
很多项目只改了默认态，结果:hover一触发对比度暴跌，用户根本点不清。
- 必须为每个交互态单独声明变量：
--button-bg、--button-hover-bg、--button-active-bg、--button-text、--button-hover-text - 悬停色不是“随便加深一点”：若默认
--button-bg: hsl(120, 60%, 70%)，悬停建议用hsl(120, 60%, 60%)（降明度），而非hsl(120, 70%, 70%)（增饱和度）——后者可能让色盲用户无法区分 - 禁用态
--button-disabled-bg要显式定义，且确保--button-disabled-text与它仍有至少3:1对比度，别依赖浏览器默认灰
如何让CSS变量适配色觉缺陷用户
纯靠WCAG对比度还不够——红绿色觉缺陷用户可能根本看不出red和green按钮的区别。
立即学习“前端免费学习笔记（深入）”；
- 别只依赖颜色传递状态：按钮除了
color，必须叠加图标、文字标签或边框样式变化 - 用
hsl()时避开高饱和红/绿窄带：比如避免hsl(0, 100%, 50%)和hsl(120, 100%, 50%)并存，改用hsl(200, 80%, 50%)（蓝）+hsl(30, 90%, 50%)（橙）组合 - 提供色觉模式开关：用
prefers-reduced-transparency或自定义data-color-vision="protanope"属性，在JS里动态切换整套变量值，而不是只换一两个
最常被忽略的是：CSS变量只是容器，真正决定无障碍效果的是你往里面塞的数值是否经过人因验证。一个--primary-color变量背后，至少要覆盖正常视力、三种常见色觉缺陷、暗光/强光环境下的多组明度值，而不是一套值打天下。
