应使用 WebAIM Contrast Checker 测量浏览器渲染后的 resolved 颜色值，而非手动计算或直接输入设计稿 HEX/RGB；需通过 Chrome DevTools 的 Computed 面板获取 color 和 background-color 的最终 rgb 值，确保透明度、混合模式及上下文影响被准确纳入对比度判定。
直接用工具测，别自己算公式——人眼对灰阶对比极度不敏感，手动计算容易漏掉亮度归一化、sRGB伽马校正等关键步骤，结果不可靠。
用 WebAIM Contrast Checker 输入渲染后的真实色值
它免费、无需登录、支持透明色解析，是开发阶段最实用的检测入口。但必须注意：输入的不能是 rgba(0, 0, 0, 0.7) 或 currentColor 这类动态值，而得是浏览器最终渲染出的 rgb(34, 34, 34) 这样的 resolved 值。
- 打开 Chrome DevTools → 选中目标元素 → 切到 “Computed” 面板 → 找
color和background-color对应的 resolved 值（右键可复制） - 把这两个值粘贴进 WebAIM 工具，它会立刻返回对比度比值和是否达标（正文需 ≥4.5:1）
- 按钮禁用态、深色模式切换后、
backdrop-filter叠加层等场景，必须单独测——同一套 CSS 变量在不同上下文里渲染出的实际色值可能完全不同
为什么不能直接用设计师给的 HEX 或 RGB 值？
因为透明度和图层混合会让最终颜色“失真”。比如 background-color: rgba(0, 0, 0, 0.1) 叠在 #f5f5f5 上，人眼看是浅灰，但工具若只输 rgba(0, 0, 0, 0.1)，就完全没考虑底层背景的参与。
-
opacity作用于整个元素（含子元素），而rgba()只影响该属性自身通道，二者混合逻辑不同 -
mix-blend-mode: difference这类混合模式会彻底改变颜色输出，WebAIM 无法模拟，必须在真实页面中截图取色或用 DevTools 查 resolved 值 - CSS 变量如
--text-color: #666在 :root 里定义，但被color: var(--text-color)引用时，其实际亮度仍取决于父级背景是否透明或有滤镜
小字号文本必须卡死 4.5:1，别信“大标题放宽到 3:1”
WCAG AA 级要求很明确：常规正文（
立即学习“前端免费学习笔记（深入）”；
- 用 Chrome 的 “Rendering” 面板开启 “Emulate vision deficiencies”，能快速预览色弱用户看到的效果
- axe DevTools 插件可自动扫描整页，高亮所有未达标的文本节点，并定位到具体 CSS 规则
- 别依赖“看起来还行”——灰色系组合（如
#999文字配#eee背景）实测常低于 3:1，必须量化验证
真正难的不是算对比度，而是确保每个视觉状态（悬停、禁用、加载中、主题切换后）都拿到正确的 resolved 色值。DevTools 的 Computed 面板是唯一可信来源，其他全是猜测。
