css中不存在独立合规的颜色值，color与background-color必须成对验证；chrome devtools右键检查元素后，在悬停覆盖层的“辅助功能→对比度”中可实时查看✅/⚠️/❌标识，点击色块还能在color picker中查看合成后的实际对比度。
直接说结论：CSS里没有“符合WCAG标准的颜色”这种独立存在的值，color和background-color必须成对验证，单个色值无法判定是否合规。
Chrome DevTools 里怎么一眼看出对比度是否达标
不用装插件、不写代码，直接用浏览器自带功能就能实时验证：
- 右键页面元素 → 选择「检查」，或按 F12
- 点左上角
Inspect按钮（变蓝即启用） - 鼠标悬停在文字上，弹出的覆盖层中「辅助功能」→「对比度」会显示数值和图标：
✅ 绿色勾：≥4.5:1（AA 普通文本）
⚠️ 橙色感叹号：不达标
❌ 红色圆圈划掉：连最低要求都未达到 - 点击
color属性旁的色块，在 Color Picker 中展开「对比度」区域，还能看到背景色合成后的实际值——这对rgba()或opacity场景特别关键
WebAIM Contrast Checker 为什么比肉眼判断更可靠
它不依赖渲染效果，而是严格按 WCAG 2.1 公式 (L1 + 0.05) / (L2 + 0.05) 计算相对亮度比，且能处理所有 CSS 颜色格式：
- 支持输入
#333333、rgb(51, 51, 51)、hsl(0, 0%, 20%)，自动归一化转换 - 对半透明背景（如
background-color: rgba(255, 255, 255, 0.8)）会明确提示「背景为半透明，对比度无法精确计算」，逼你手动算出叠加后的真实背景色再测 - 小字号（
font-size: 14px）或细字重（font-weight: 300）必须满足 4.5:1，工具会按 AA 标准标红不达标的组合，比如#666666在#ffffff上是 4.49:1——差 0.01，仍Fail
浅色背景下哪些 color 值实际达标
不是所有深灰都安全。WCAG 对比度是数学硬门槛，不是视觉感受：
-
#ffffff背景上，#333333是 4.48:1 → ❌ 不达标；#212529（Bootstrap 默认正文色）是 4.67:1 → ✅ -
#f8f9fa背景 → 至少用#212529（4.52:1），#343a40是 4.49:1 → ❌ -
#e9ecef背景 →#212529刚好 4.51:1，#343a40仅 4.28:1 → ❌ -
#dee2e6背景 → 连#212529都只有 4.33:1，得换更黑的，如#1a1e23（4.53:1）
真正容易被忽略的是半透明叠加和动态主题切换——哪怕你在浅色模式下全绿勾，切到深色模式后，同一组 color/background-color 可能瞬间崩到 2:1 以下。别信“默认就安全”，每个上下文都得实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
