wcag aa标准要求普通文本对比度≥4.5:1，必须用公式(l1+0.05)/(l2+0.05)计算相对亮度比值，chrome devtools和webaim工具可实时检测，后者更精准支持半透明、小字号等边界场景。
不能靠眼睛看，也不能只比十六进制数值大小——必须用 WCAG 2.1 公式算出对比度比值，再对照 4.5:1 或 3:1 的阈值判断是否达标。
Chrome DevTools「Accessibility」面板怎么实时查对比度
这是最直接、无需额外工具的验证方式，但很多人没点对位置或误读结果：
- 右键页面文字 → 「检查」，确保 Elements 面板已打开
- 鼠标悬停在目标
<p></p>或<button></button>元素上，右侧「辅助功能」标签页会自动展开 - 找到「对比度」一栏：✅ 表示 ≥4.5:1（AA 普通文本），⚠️ 是不达标，❌ 是连最低要求都未满足
- 点击颜色属性旁的小色块，在 Color Picker 中展开「对比度」区域，能看见合成后的真实背景色（对
rgba()、opacity、多层background-image尤其关键）
WebAIM Contrast Checker 为什么比手算更可靠
它严格按 WCAG 公式 (L1 + 0.05) / (L2 + 0.05) 计算相对亮度比，且处理边界情况更严谨：
- 支持所有 CSS 颜色格式：
#333、rgb(51, 51, 51)、hsl(0, 0%, 20%)、甚至oklch(60% 0.28 258.5)（需手动转为 sRGB 输入） - 遇到半透明背景（如
background-color: rgba(255, 255, 255, 0.8)）会明确提示「背景为半透明，对比度无法精确计算」，逼你先算出叠加后的实际色值再测 - 小字号（
font-size: 14px）或细字重（font-weight: 300）默认按 AA 标准标红，比如#666在#ffffff上是 4.49:1 —— 差 0.01，仍 Fail
color-contrast() 函数现在能用吗
不能直接用于生产环境。虽然 CSS Color Level 4 提出了 color-contrast()，但它目前仅在 Safari 技术预览版中部分支持，Chrome 和 Firefox 均未实现：
- 写法示例：
color: color-contrast(var(--bg), white, black, #333); - 原理是遍历候选色，选与
--bg对比度最高且 ≥4.5:1 的那个；若全不达标，则回退到列表第一个 - 当前替代方案：用 JavaScript 实时计算相对亮度（注意不是 HSL 的
lightness()），或 SCSS 编译期生成确定色值（需用 WCAG 公式重写relative-luminance()函数） - 特别注意：OKLCH 的
L值非线性极强，oklch(60% ...)减 20% 得到oklch(40% ...)，实际对比度可能从 7.2:1 断崖跌到 3.1:1
真正容易被忽略的是禁用态、悬停态、焦点态这些“次要状态”——它们常被跳过验证，但 WCAG 要求每个可交互状态都必须单独测够 4.5:1；还有 SVG 中的 <text></text>、伪元素生成的内容、<label></label> 关联的隐藏文本，也得手动点进去测，浏览器不会自动合并渲染像素再算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
