color-contrast() 函数尚未标准化，所有主流浏览器均未默认支持，仅实验性旗标下有限可用；其不支持变量、alpha 通道、渐变或图片背景，实际应用须依赖 js 动态计算并注入结果。
别用。截至 2026 年 7 月，color-contrast() 仍不是可用的 CSS3 函数——它连正式标准都还没进入，只是 CSS Color Level 5 的编辑草案，所有主流浏览器（Chrome、Firefox、Safari、Edge）均未默认实现。
为什么写 color-contrast() 没反应
你写 color: color-contrast(#333 vs #000, #fff);，浏览器会直接忽略整条声明，既不报错也不渲染，回退到上一个有效的 color 值（可能是继承色或用户代理默认值）。这不是你语法写错，而是函数压根没被解析器识别。
- Chrome 127+ 和 Safari 17.4+ 需手动开启
chrome://flags/#css-color-contrast或对应实验 flag 才能有限支持，且仅对硬编码十六进制/rgb() 背景色生效 - 一旦背景来自
var(--bg)、hsl()、color-mix()、linear-gradient()或url()，整个声明静默失效，DevTools 中该行显示为 strike-through 灰色 -
@supports (color: color-contrast(#000 against #fff))检测通过 ≠ 实际可用：它只校验语法结构，不验证参数是否可计算；运行时遇到变量或 alpha 仍会丢弃
哪些写法看似合理但实际无效
这些常见尝试在生产环境全部失败：
-
color: color-contrast(var(--bg) against #000, #fff);—— 变量未展开前不是<color></color>类型，整条声明被丢弃 -
color: color-contrast(rgba(0,0,0,0.8) against #eee);—— 多数引擎拒绝含 alpha 的输入，返回 transparent 或 fallback -
color: color-contrast(#333 vs #000, #fff to wcag21/aa);——to wcag21/aa在 Chrome 127+ 不识别，Safari 18.0+ 才部分支持，混用即失效 -
background: url(./hero.jpg); color: color-contrast(#000 against #fff);—— 函数不感知背景图片，只认第一个参数是纯色，与实际渲染背景无关
真正能落地的替代方案
必须用 JS 主动读取、计算、写入。核心不是“让 CSS 自动算”，而是“让 JS 把结果喂给 CSS”：
- 用
getComputedStyle(el).backgroundColor获取最终渲染色（已合并 alpha、叠加层级） - 调用
@deque/busybuddy或@ctrl/tinycolor计算候选色与背景的 WCAG 对比度比值 - 将最优色写入
el.style.color或更新document.documentElement.style.setProperty('--auto-text', '#fff') - 监听
themechange、resize、MutationObserver（针对 class/style 变更），触发重算 - 对图片背景，用
canvas+getImageData()采样中心 3×3 区域均值，而非单点或 DOM 提取的 dominant color
最易被忽略的点：背景色获取时机。不要在 DOM 加载完就一次性计算，要等所有样式（包括外部 CSS、CSS-in-JS、动态 class 注入）完全应用后再取值；否则拿到的是未叠加的原始色，对比度判断全错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
