wcag aa标准要求普通文本对比度≥4.5:1，必须成对验证渲染后的前景色与背景色；chrome devtools可右键检查→悬停文字→「辅助功能」→「对比度」实时查看✅/⚠️/❌结果，并通过color picker查看rgba()等合成后的真实值。

没有“符合WCAG AA标准的颜色”这种单独存在的值，color必须和它实际渲染时的background-color成对验证——哪怕你写了color: #212529，如果背景是rgba(255, 255, 255, 0.3)，照样可能不达标。

Chrome DevTools里怎么一眼看出对比度是否达标

不用装插件、不写代码，直接用浏览器自带功能就能实时验证：

• 右键页面文字元素 → 选择「检查」（或按 F12）
• 鼠标悬停在该文字上，弹出的覆盖层中点开「辅助功能」→「对比度」
• 看到 ✅ 表示 ≥4.5:1（AA 普通文本），⚠️ 或 ❌ 就得调色
• 点击 color 属性旁的小色块，在 Color Picker 的「对比度」区域里能看到合成后的实际值——这对 rgba()、opacity、filter 场景特别关键

为什么不能直接用 color-contrast() 函数

这个函数目前只是 CSS Color Module Level 5 草案，全浏览器都不支持：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 你写 color: color-contrast(#333 vs #fff, #000);，浏览器会直接忽略，回退到前一个有效声明
• PostCSS 没有成熟插件能安全转译它；MDN 和 Can I Use 均标为 “No support”
• 想做动态配色（比如主题切换、按钮悬停换字色），得靠 JS + WCAG 算法，推荐用 @deque/busybuddy 或 color-contrast（npm 包，和 CSS 函数同名但无关）

浅色背景下哪些 color 值实际达标

不是所有深灰都安全。WCAG 对比度是数学硬门槛，不是视觉感受：

• #ffffff 背景上：#333333 是 4.48:1 → ❌ 不达标；#212529（Bootstrap 默认正文色）是 4.67:1 → ✅
• #f8f9fa 背景上：至少用 #212529（4.52:1），#343a40 是 4.49:1 → ❌
• 小字号（font-size: 14px）或细字重（font-weight: 300）必须满足 4.5:1，工具会标红差 0.01 的组合

真正容易被忽略的是：字体抗锯齿、子像素渲染、屏幕反光都会吃掉 1–2 个对比度点，所以别卡在 4.5 边缘——哪怕只深一丁点，比如从 #343a40 改成 #212529，可读性提升远超视觉变化。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！