最贴近真实场景的对比度检测方式是chrome devtools中通过color picker查看contrast ratio数值或启用rendering面板实时叠加显示；webaim工具适合验证确定色值。
直接打开浏览器就能用，不需要安装插件或运行服务器——但必须确保你操作的是真实渲染后的颜色，不是变量、透明色或未生效的 CSS。
Chrome DevTools 里点一下就出对比度数值
这是最贴近真实场景的检测方式，数值来自浏览器渲染引擎调用 WCAG 算法的结果：
- 右键页面上的文字元素（比如
<p></p>或<button></button>），选「检查」 - 在右侧 Styles 面板中找到
color或background-color属性，点击旁边的色块 - 弹出的 Color Picker 里会显示「Contrast ratio」区域，含具体比值（如
4.2:1）和 ✅/⚠️/❌ 图标 - 如果显示
NaN:1，说明背景是transparent、rgba(0,0,0,0)，或用了未定义的 CSS 变量（如var(--bg)）
DevTools Rendering 面板实时叠加所有文本对比度
适合快速扫全页，尤其发现那些你根本没注意的低对比文本：
- 按
Ctrl+Shift+P（Win/Linux）或Cmd+Shift+P（Mac），输入Rendering，回车 - 勾选
Contrast ratio（在 Emulate vision deficiencies 区域下） - 页面上所有可见文本旁会实时显示比值，比如
3.8:1（标红）或4.5:1（绿色） - 它不处理
opacity、backdrop-filter或background-image，只认最终合成的color和background-color
WebAIM Contrast Checker 输入 HEX 或 RGB 直接验算
适合验证设计稿色值、CI 流程校验，或排查 DevTools 里显示异常的原因：
- 打开 WebAIM Contrast Checker，填入两个确定的十六进制或 RGB 值（如
#212529和#ffffff） - 工具会立刻返回比值和 WCAG 合规等级（
AA/AAA），并提示是否适用于普通文本或大文本 - 别直接输
rgba(0,0,0,0.7)—— 它无法自动合成底层背景，得先用 DevTools 的 Computed 面板复制出最终rgb()值再填 - 小字号（≤16px）、细字重（
font-weight: 300）必须卡死4.5:1，工具默认按此阈值判断
真正容易被忽略的是：对比度不是写在 CSS 里的静态值，而是渲染结果。同一组 color 和 background-color，在深色模式、禁用态、系统高对比模式下可能完全失效——每个上下文都得单独测，不能靠“看起来差不多”蒙混过关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
