devtools 自带 color picker 是最直接可靠的对比度检测方式，但仅适用于纯色背景且元素已渲染的场景；对 background-image、filter、opacity、伪元素、svg fill 等复杂情况失效，需人工复核或借助 axe-core 等专业工具。
浏览器 DevTools 自带的 Color Picker 就是当前最直接、最可靠的对比度检测方式，不需要装任何“HTML Color Contrast Analyzer”插件——它压根不是标准功能，也不是浏览器 API。
Chrome / Edge 里点两下就能看到真实对比度数值
前提是元素已渲染、背景是纯色（比如 #fff、rgb(240, 240, 240)），不是 rgba() 叠在图片上，也不是 linear-gradient() 或伪元素内容。
- 右键页面文字 → 「检查」，或按
F12 - 在
Elements面板选中目标元素（如<p></p>、<button></button>） - 切到
Styles标签页，找到color属性，点击它右边的小色块 - 弹出的 Color Picker 浮层里，直接看
Contrast ratio行：比如Contrast ratio: 4.49，✓ 表示 ≥4.5（AA 达标）
哪些场景 Color Picker 会失效或不准
它只读取当前元素的 color 和计算出的最终 background-color，但很多常见情况它根本算不准：
-
background-image: url()或background: linear-gradient()—— 浮层显示的对比度是错的，得手动取关键像素点颜色再合成 -
opacity: 0.8或filter: brightness(1.2)—— 渲染变亮了，但工具仍用原始色值算，结果虚高 -
::before/::after里的文本（如content: "必填"）—— 不会被自动纳入检测，得单独选中伪元素节点再测 -
<svg><text fill="#666">标题</text></svg>——fill不是color，DevTools 不识别，必须手动输进 WebAIM 工具验 -
button[disabled]的文字 —— 常设为#aaa配#f5f5f5，实测对比度往往只有 2.1:1，连大号文本的 3:1 都不满足
需要自动化检测时，别自己解析 getComputedStyle 的 color 值
getComputedStyle(el).color 返回格式不统一：Chrome 是 rgb(51, 51, 51)，Firefox 是 rgb(51 51 51)，IE 甚至返回 #333；更麻烦的是 currentcolor、transparent、hsl() 这些值，没法直接喂给对比度公式。
- 别写正则硬提
rgb()里的数字——空格、逗号、alpha 通道都可能破坏匹配 - 遇到
transparent，得往上找第一个非transparent的父级背景色 - 想写 JS 自动检测？用
tinycolor2的new tinycolor(color).toRgb()统一转成对象再取r/g/b - 高精度需求（如 CI 自动化审计）直接用
Puppeteer + axe-core，别自己拼色值
最常被忽略的一点：禁用态按钮、表单 placeholder、SVG 文本、以及所有通过 filter 或 opacity 改变视觉亮度的元素——它们的渲染结果和 DevTools 显示的数值经常对不上，必须人工复核。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
