如何选择CSS颜色表示方式避免无障碍对比度不足？

rgba()和hsla()透明色必须先计算最终渲染色再测对比度，因浏览器alpha混合后实际色值（如rgba(0,0,0,0.7)叠在#f8f9fa上≈#a9a9a9）与输入值不同；工具不支持直接解析透明色，须通过DevTools“Computed”面板获取resolved rgb值并转为hex后验证。

rgba() 和 hsla() 透明色必须先算出最终渲染值再测对比度

很多人以为 rgba(0, 0, 0, 0.7) 配 #f8f9fa 肯定够对比度，结果一测只有 3.2:1。问题在于浏览器做了 alpha 混合，实际文字色接近 #a9a9a9，不是“半透黑”也不是纯灰——工具不支持直接输 rgba()，必须先换算。

实操建议：

1. 用开发者工具 → “Computed” 面板复制 color 的 resolved 值（通常是 rgb(169, 169, 169) 这类）
2. 把 resolved 值转成十六进制（如 #a9a9a9），再和背景色一起输入 WebAIM Contrast Checker
3. 背景也是透明色时（比如 background-color: rgba(255, 255, 255, 0.9)），得先算两层叠加后的最终色，不能只测单层
4. :disabled 状态的按钮、表单元素常被跳过验证，但它的 color 和 background-color 组合往往更差

HSL/HSLA 更容易控制亮度从而守住对比度底线

写 #6c757d 配 #ffffff 对比度约 4.1:1，不达标；改成 hsl(0, 0%, 20%) 就能一眼看出“20% 亮度”，调到 hsl(0, 0%, 18%) 或更低，立刻达标。HSL 的 l 参数直指 WCAG 最关心的明度维度。

实操建议：

1. 主题色系统优先用 hsl() 定义，比如 --text-primary: hsl(0, 0%, 16%)，后续所有变体都靠改 l 值微调
2. 避免用 #333 这类“看着深就放心”的 hex 值——它对应 hsl(0, 0%, 20%)，离 AA 级 4.5:1 的安全线很近，稍一变浅或背景稍一变灰就崩
3. 暗色模式下别直接反向套用亮色逻辑，hsl(0, 0%, 90%) 配 hsl(0, 0%, 10%) 看似对比强，但叠加阴影或渐变后可能掉到 3.8:1 以下

CSS 变量（custom properties）必须每个主题变体单独验证对比度

--text-color 在 light 主题下配 --bg-color: #fff 达标，切换到 dark 主题后若仍沿用同一变量名但没重定义，或者只改了背景没同步调文字色，对比度瞬间归零。工具不会解析 var(--text-color)，你得手动代入每种主题下的实际值再测。

实操建议：

1. 定义变量时就带上下文，比如 --text-on-light: hsl(0, 0%, 16%)、--text-on-dark: hsl(0, 0%, 92%)，避免歧义
2. 用 @media (prefers-color-scheme: dark) 或 class 切换主题时，确保 color 和 background-color 成对更新，而不是只改一边
3. Primer CSS 的 light_colorblind.scss 和 dark_high_contrast.scss 这类预设主题，本质就是为不同感知能力用户提供独立验证过的变量组合

禁止单靠颜色传递信息时，color 属性只是辅助手段

写 .error { color: #dc3545; } 是不够的。色觉缺陷用户看不到红，屏幕阅读器也读不出“红色=错误”。此时 color 只是视觉增强，核心语义必须由其他方式承载。

实操建议：

1. 状态类必须叠加非颜色线索：.error 除了 color，还得有 border-left: 4px solid #dc3545 + background-image: url("icon-error.svg")
2. SVG 图标加 aria-hidden="true"，靠相邻文字或 aria-label 说明意图，不能只靠颜色区分图标含义
3. 表单验证提示必须同步更新 aria-live 区域或插入可见错误文本，不能只靠 color 变化

真正卡住对比度的不是写法本身，而是混合渲染后的最终像素值和信息传达的单一依赖。哪怕你全用 hsl()，没实测 resolved 色值、没覆盖所有主题态、没剥离颜色语义，照样不达标。