color-contrast()函数目前不可用于生产环境——它仍是css color level 5草案，所有主流浏览器均未默认启用，写入css即被静默忽略；真正可用方案是js运行时获取真实背景色并计算对比度后动态设置文字色。
不能直接用——color-contrast() 函数目前不是可用的 CSS 功能，它仍是 CSS Color Level 5 草案，所有主流浏览器（Chrome、Firefox、Safari）均未默认启用，生产环境写上去等于没写。
为什么 color-contrast() 在 DevTools 里显示灰色删除线
你看到样式面板中该行被 strike-through，并非因为你写错了语法，而是浏览器根本没解析它。即使你在 Chrome 127+ 开启 chrome://flags/#css-color-contrast，也只对硬编码色值（如 #fff）和极简参数生效；一旦含 var(--bg)、hsl()、rgba() 或渐变背景，整条声明就会静默丢弃，不报错、不警告、不 fallback。
-
color: color-contrast(#333 against #fff, white, black);→ 可能渲染出 white -
color: color-contrast(var(--bg) against #fff);→ 直接忽略，回退到上一条color声明 -
@supports (color: color-contrast(#000 against #fff))→ 检测通过 ≠ 实际可用，无法覆盖变量/alpha/动态变化等真实场景
color-contrast() 的语法陷阱与实验性限制
就算你执意在实验环境下试，也必须严格按当前实现写法：只认 against 关键字，不支持 vs（旧草案语法）；候选色列表不能含函数调用或变量；不接受 to WCAG20/AA 这类后缀（Safari 18.0+ 才部分识别，Chrome 127+ 完全不认）。
- ✅ 正确：
color: color-contrast(#222 against #fff, #000, #333); - ❌ 错误：
color: color-contrast(#222 vs #fff, #000);（语法错误，整条失效） - ❌ 错误：
color: color-contrast(var(--bg) against #fff);（变量导致静默失败） - ❌ 错误：
color: color-contrast(rgba(0,0,0,0.8) against #fff);（alpha 不被支持，返回transparent或丢弃）
真正能跑通的运行时对比度适配方案
核心不是让 CSS “自动算”，而是让 JS 主动读、算、设：用 getComputedStyle(el).backgroundColor 获取最终渲染色（含 alpha 叠加），再借助 @deque/busybuddy 或 @ctrl/tinycolor 计算 WCAG 对比度，最后写入 el.style.color 或更新 document.documentElement.style.setProperty('--auto-text', '#fff')。
- 必须处理 alpha：半透明背景需先叠加到父级背景（或默认白底），再算最终亮度
- 监听变化：用
MutationObserver监听class、style或自定义属性变更，触发重算 - 降级友好：CSS 里仍写默认色（如
color: #333;），JS 成功时再覆盖 - 别信 PostCSS 插件：像
postcss-color-contrast只在构建时“猜”一次，无法响应深色模式切换或用户缩放
最易被忽略的点是：对比度计算依赖的是最终渲染色，不是 CSS 源码里的 var(--bg) 或 rgba() 值——哪怕你用了 relative-color() 或 color-mix()，只要没走 JS runtime 获取真实 computed color，就可能在半透明层叠、filter 叠加、iframe 嵌套等场景下出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
