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()，必须先换算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用开发者工具 → “Computed” 面板复制
color的 resolved 值（通常是rgb(169, 169, 169)这类） - 把 resolved 值转成十六进制（如
#a9a9a9），再和背景色一起输入 WebAIM Contrast Checker - 背景也是透明色时（比如
background-color: rgba(255, 255, 255, 0.9)），得先算两层叠加后的最终色，不能只测单层 -
:disabled状态的按钮、表单元素常被跳过验证，但它的color和background-color组合往往更差
HSL/HSLA 更容易控制亮度从而守住对比度底线
写 #6c757d 配 #ffffff 对比度约 4.1:1，不达标；改成 hsl(0, 0%, 20%) 就能一眼看出“20% 亮度”，调到 hsl(0, 0%, 18%) 或更低，立刻达标。HSL 的 l 参数直指 WCAG 最关心的明度维度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 主题色系统优先用
hsl()定义，比如--text-primary: hsl(0, 0%, 16%)，后续所有变体都靠改l值微调 - 避免用
#333这类“看着深就放心”的 hex 值——它对应hsl(0, 0%, 20%)，离 AA 级 4.5:1 的安全线很近，稍一变浅或背景稍一变灰就崩 - 暗色模式下别直接反向套用亮色逻辑，
hsl(0, 0%, 90%)配hsl(0, 0%, 10%)看似对比强，但叠加阴影或渐变后可能掉到 3.8:1 以下
CSS 变量（custom properties）必须每个主题变体单独验证对比度
--text-color 在 light 主题下配 --bg-color: #fff 达标，切换到 dark 主题后若仍沿用同一变量名但没重定义，或者只改了背景没同步调文字色，对比度瞬间归零。工具不会解析 var(--text-color)，你得手动代入每种主题下的实际值再测。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义变量时就带上下文，比如
--text-on-light: hsl(0, 0%, 16%)、--text-on-dark: hsl(0, 0%, 92%)，避免歧义 - 用
@media (prefers-color-scheme: dark)或 class 切换主题时，确保color和background-color成对更新，而不是只改一边 - Primer CSS 的
light_colorblind.scss和dark_high_contrast.scss这类预设主题，本质就是为不同感知能力用户提供独立验证过的变量组合
禁止单靠颜色传递信息时，color 属性只是辅助手段
写 .error { color: #dc3545; } 是不够的。色觉缺陷用户看不到红，屏幕阅读器也读不出“红色=错误”。此时 color 只是视觉增强，核心语义必须由其他方式承载。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 状态类必须叠加非颜色线索：
.error除了color，还得有border-left: 4px solid #dc3545+background-image: url("icon-error.svg") - SVG 图标加
aria-hidden="true"，靠相邻文字或aria-label说明意图，不能只靠颜色区分图标含义 - 表单验证提示必须同步更新
aria-live区域或插入可见错误文本，不能只靠color变化
hsl()，没实测 resolved 色值、没覆盖所有主题态、没剥离颜色语义，照样不达标。 
