devtools 内置 color picker 可直接测文本对比度，点击 styles 中 color 旁色块即可查看“contrast ratio”数值（如4.49），✓表示≥4.5达标；但仅适用于纯色背景，不支持渐变、图片、rgba叠加、伪元素及 disabled 状态等复杂场景。
直接用浏览器 DevTools 内置的 Color Picker 就能测，不需要额外装“HTML Color Contrast Analyzer”这类第三方工具——它根本不是标准 HTML 功能，也不是浏览器原生 API。
Chrome / Edge 里点两下就能看到真实对比度数值
前提是元素渲染完成、背景是纯色（#fff、rgb(240,240,240) 这类），不是 rgba() 叠在图片上，也不是渐变背景。
- 右键网页任意文本 → “检查”，或按
F12 - 在
Elements面板选中目标元素（比如<p></p>、<label></label>） - 切到
Styles标签页，找到color属性，点击它右边的小色块 - 弹出的
Color Picker浮层里，“Contrast ratio” 行就显示数值，比如Contrast ratio: 4.49 - 注意图示：
✓表示达标（≥4.5），⚠或✗表示不达标
为什么 Computed 面板里的 color 和 background-color 不能直接抄出来算
因为 getComputedStyle(el).color 返回值格式不统一：Chrome 可能是 rgb(51, 51, 51)，Firefox 可能是 rgb(51 51 51)，IE 甚至返回 #333；更麻烦的是 currentcolor、transparent、hsl() 这些值，没法直接喂给对比度公式。
- 别手动正则提取
rgb()里的数字——空格、逗号、alpha 通道都可能破坏匹配 - 想写 JS 自动检测？用
tinycolor2的new tinycolor(color).toRgb()统一转成对象，再取r/g/b -
background-color: transparent不等于白色背景，得往上找第一个非transparent的父级背景色
哪些地方 DevTools 的 Color Picker 会失效
它只读取当前元素的 color 和计算出的最终 background-color，但很多场景它压根算不准：
-
background-image: url(...)或linear-gradient()—— 浮层里显示的对比度是错的，实际得取背景图关键像素点颜色手动合成 -
opacity: 0.8或filter: brightness(1.2)—— 渲染变亮了，但color值没变，工具仍按原始色值算，结果严重虚高 -
::before/::after里的content: "必填"—— 这些伪元素文本不会被自动纳入检测范围，得单独选中伪元素节点再测 -
<svg><text fill="#666">标题</text></svg>——fill不是color，DevTools 不识别，必须手动输进 WebAIM 工具验
最常被忽略的一点：禁用态按钮 <button disabled></button> 的文字，设计师常设为 #aaa 配 #f5f5f5，实测对比度往往只有 2.1:1，连大号文本的 3:1 都不满足——而 Color Picker 在 :disabled 状态下有时根本不显示对比度行，得手动触发禁用态再点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
