Chrome DevTools 中通过快捷键调出命令菜单→输入Rendering→启用Contrast ratio可实时显示文本对比度；该功能基于实际渲染色计算，不支持透明背景或CSS变量未定义等情况，且仅对可见文本生效。
Chrome DevTools 里怎么打开颜色对比度审计
Chrome 自带的颜色对比度检查功能藏得有点深，不是默认开启的面板。它属于 Lighthouse 的一部分，但日常开发调试时更推荐用“Rendering”面板实时查看——省去每次跑完整审计的等待。
操作路径：Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac）→ 输入 Rendering → 回车 → 勾选 Emulate vision deficiencies 下方的 Contrast ratio。页面上所有文本元素旁会实时叠加对比度数值（如 4.5:1）。
- 只对
内实际渲染的文本生效，display: none或未插入 DOM 的节点不显示 - 数值基于当前背景色和字体色的计算结果，不考虑半透明叠加、filter 或 backdrop-filter 等混合效果
- 如果看到
NaN:1，大概率是某层背景色为transparent或未解析的 CSS 变量（比如var(--bg)但没定义）
为什么 getComputedStyle 拿不到真实渲染颜色
很多开发者想用 JS 主动检测对比度，于是调 getComputedStyle(el).color 和 getComputedStyle(el).backgroundColor —— 但常拿到 rgba(0, 0, 0, 0) 或 transparent，根本没法算。
原因很实在：CSS 层叠和继承太复杂。背景可能来自父级 background-image、border、甚至 box-shadow；文字色可能被 color-scheme: dark 或系统偏好反转；还有 CSS 自定义属性未展开、@media 查询未命中等情况。
立即学习“前端免费学习笔记（深入）”；
- 别依赖单个元素的
backgroundColor，用document.elementFromPoint(x, y)+getComputedStyle向上遍历到有背景色的祖先更靠谱 - 遇到
currentcolor或inherit，必须手动向上查找计算值，浏览器不提供“最终解析色”API - 若需高精度检测（比如自动化可访问性测试），直接用 Puppeteer + axe-core，别自己拼色值
axe-core 扫描报 color-contrast 失败但人眼看不出问题
常见现象：按钮文字是黑字白底，axe 却报对比度不足。大概率是它检测到了你没注意的中间层——比如按钮用了 background: linear-gradient(#fff, #f5f5f5)，而渐变起始色在部分区域低于 WCAG 要求的 4.5:1（小字号）或 3:1（大字号/粗体）。
axe 默认按最差像素点判断，不是取平均值。它还会考虑字体粗细、字号、是否加粗等渲染细节，而这些在 CSS 中未必显式声明（比如 font-weight: 500 在某些字体下实际渲染为 normal）。
- 检查是否启用了
font-synthesis: none或font-optical-sizing: auto，这类特性会影响实际渲染权重 - 用 Chrome 的
Computed面板看font-weight最终值，别信样式面板里写的 - 如果用 CSS 变量定义颜色，确保
axe运行时变量已注入，否则会 fallback 到初始值（常是inherit或transparent）
第三方插件（如 Color Contrast Analyzer）和 DevTools 审计结果不一致
根本差异在于采样方式：DevTools 渲染面板取的是元素边框内中心点的像素色值；而桌面插件（如 Windows 上的 Colour Contrast Analyser）靠屏幕坐标抓取，受缩放、多屏 DPI、浏览器缩放设置影响极大。
比如 Chrome 缩放设为 125%，DevTools 仍按逻辑像素计算，而插件读的是物理像素——同一位置 RGB 值可能不同。再比如 Safari 的 color management 更激进，同一 HEX 值在不同浏览器渲染出的 LAB 值就有偏差。
- 统一用 Chrome 100% 缩放 + sRGB 显示器做基准，其他环境只作参考
- 避免用截图工具测网页颜色——PNG 压缩、色彩配置文件嵌入都会失真
- 真正上线前，务必在真实设备（尤其 OLED 屏手机）上肉眼验证灰阶过渡和弱光场景下的可读性，算法永远代替不了人眼
对比度不是个开关式指标，而是和字体、间距、环境光、用户视力共同作用的结果。工具报绿不等于真可读，报红也不代表必须改——得看谁在用、在哪用、怎么用。
