css无法判断对比度是否达标，color-contrast()函数目前所有主流浏览器均不生效；真正有效的验证方式只有工具扫描或js运行时计算。
直接看结论：CSS 本身无法“判断”对比度是否达标，color-contrast() 函数目前（2026 年中）在所有主流浏览器中均不生效，写上去等于没写；真正能验证的，只有工具扫描或 JS 运行时计算。
Chrome DevTools 悬停颜色块就能看到对比度数值
这是最省事、最贴近真实渲染的方式，但很多人没注意触发条件：
- 必须用 Chrome 111+ 或 Edge 111+，Firefox 120+ 也支持，旧版本不显示
- 要选中实际渲染出文字的元素（比如
<p></p>或<button></button>），不是只看 CSS 文件里的变量声明 - 悬停在 Styles 面板中
color或background-color的色块上，才会弹出对比度比值和 ✅/❌ 图标 - 如果显示 “4.2:1 (fail)” 而你改了
color值却没刷新数值，试试右键色块 → “Edit color”，手动点一下确认
axe DevTools 扫整页，专盯高风险位置
人工逐个点太慢，尤其容易漏掉那些“看起来不重要”的地方：
- 按钮的
disabled态文字（常是opacity: 0.5+ 浅灰，实际对比度崩到 2.x） -
::placeholder文字（默认用浅灰，#999 在 #fff 上仅 4.06:1，不达标） - 图标按钮里的
svg文字或title提示色（常被当成装饰忽略） - 运行
npx axe-cli index.html --rules=color-contrast可导出全量报告，含具体选择器和像素级 RGB 值
命令行快速验算任意两个颜色
适合 CI 流程或开发中临时校验，避免打开浏览器：
-
npx color-contrast "#212529" "#f8f9fa"→ 输出4.52:1 (pass) -
npx contrast-cli "rgb(51, 51, 51)" "white"→ 输出4.48:1 (fail)（注意：#333 不达标） - 对半透明色必须先合成：比如
rgba(0,0,0,0.8)叠在#f0f0f0上，得先算出等效 RGB 再传入，不能直接喂 rgba 字符串 - 别信
lch(30% ...)的30%就是亮度值——它不是 WCAG 公式里的相对亮度 L，不能代入公式
深色模式下对比度失效的三个典型场景
切了 @media (prefers-color-scheme: dark) 不等于万事大吉：
- 背景从
#ffffff换成#121212，但文字仍用#212529→ 实际对比度飙升到 18:1，没问题；但如果文字是currentColor且父级没重置，可能继承亮色模式下的浅灰，直接崩 - 禁用态用
opacity: 0.6，在暗背景下会同时压低前景和背景亮度，必须重新验算，不能沿用亮色模式下的配色 - 系统级“高对比模式”（
@media (prefers-contrast: high)）会强制覆盖颜色，此时连color-mix()都无效，唯一解是预置两套经过验证的色值并用 JS 监听变更
最常被忽略的是：对比度不是静态属性，而是渲染结果。任何叠加（opacity、rgba()、filter）、任何主题切换、任何系统级辅助设置，都会让“写死的颜色值”失去意义。验证必须基于最终像素的相对亮度，而不是代码里的字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
