color-contrast() 在 Chrome ≤113 中完全不可用且静默丢弃，@supports 检测失效；参数含变量、alpha、HSL或渐变时即使在支持版本中也静默失败；必须显式使用 against 关键字，候选色不能含函数或变量；纯 CSS 无法动态读取背景色，需 JS 主导计算并注入最优色。
color-contrast() 在低版本 Chrome（≤113）中完全不可用，不是降级，是整条声明被静默丢弃——连 fallback 都不会触发，文字直接继承父级颜色或变透明。
为什么 @supports 检测 color-contrast() 会失效
@supports (color: color-contrast(#000 against #fff)) 在 Chrome 114+ 返回 true，但在 Chrome 113 及更早版本中，该语法本身不被识别，整个 @supports 块会被浏览器跳过，里面的规则根本不会解析。更关键的是：color-contrast() 的参数若含变量（如 var(--bg)）、alpha、HSL 或渐变，即使在支持版本里也会静默失败，DevTools 中该行显示为 strike-through 灰色，但无任何提示。
-
color-contrast()必须显式带against关键字，漏掉就语法报错，不是降级 - 候选色列表不能含函数或变量：
color-contrast(#333 against var(--light), var(--dark))整条声明被忽略 - 旧版 Chrome 不支持
to WCAG21/AA后缀，写上反而导致检测失败
必须用 JS 主动计算并注入颜色
纯 CSS 没有运行时读取背景色的能力，color-contrast() 不是“自动适配”，而是“静态查表”。真正能落地的方案是 JS 主导：先读取最终计算出的背景色（含 alpha 叠加），再算对比度，最后设 color 或更新自定义属性。
- 用
getComputedStyle(el).backgroundColor获取真实背景值（不是background-color声明） - 借助
@ctrl/tinycolor或@deque/busybuddy计算各候选色与背景的 WCAG AA/AAA 对比度 - 将最优色写入
el.style.color或document.documentElement.style.setProperty('--auto-text', '#fff') - 用
MutationObserver监听style或class变化，避免漏掉动态样式更新
CSS 层面只做有限兜底
CSS 无法替代 JS 完成对比度判断，但可以配合提供基础 fallback 和响应式边界：
- 所有文字元素必须有默认
color，比如color: #333;，不能依赖color-contrast()单独存在 - 深色模式下可叠加一层
@media (prefers-color-scheme: dark) { :root { --text-on-dark: #eee; } }，供 JS 读取参考 - 避免在
color-contrast()外层套@supports块——IE11 和 Chrome ≤112 会直接跳过整个块，连外部 fallback 都看不到 - 不要用
mix-blend-mode: difference之类视觉 trick 替代，它在半透明背景、非纯色背景或缩放场景下极易失效
最容易被忽略的点是：JS 计算前必须确认背景色是否已完全合成。比如 background: linear-gradient(rgba(0,0,0,0.5), transparent), #fff;，getComputedStyle 返回的是 rgba(255, 255, 255, 1)，而非叠加后的真实灰度值——这种场景必须用 canvas 离屏合成或提前约定背景结构。没有银弹，只有分层控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
