color-contrast()在实际项目中基本不可用，因其仅chrome127+/safari17.4+实验性支持、不响应动态变量、不支持渐变/混合模式、无fallback机制且主流浏览器普遍不兼容。
color-contrast() 目前不能在生产环境里“自动选色”——它不是实时响应的，也不处理动态背景、深色模式切换或渐变，更不被主流浏览器默认支持。
为什么color-contrast()在实际项目中基本不可用
这个函数写起来很诱人，比如 color: color-contrast(var(--bg) vs white, black);，但它的行为和预期差距很大：
- Chrome 127+ 和 Safari 17.4+ 仅提供实验性支持，且必须手动开启
chrome://flags/#css-color-contrast或对应 Safari 实验选项 - Firefox、Edge（非 Chromium 内核）、绝大多数移动端 WebView 完全无视该函数，
color会直接回退到初始值或继承值 - 它只在声明时静态求值：哪怕你用 JS 动态改了
--bg变量，文字色也不会更新 - 遇到
linear-gradient、hsl(…)、rgb(from …)或带 alpha 的背景色，多数实现直接失败或返回错误结果
你在 CSS 里写color-contrast()时的真实效果
即使开了 flag，也只在非常受限的条件下“看起来有效”：
- 基准色必须是纯色十六进制（如
#333），不能是var(--bg)指向一个计算后的 HSL 值 - 候选色列表里不能混用自定义属性（
var(--text-light)）或函数（oklch(…)） - 指定对比度标准（如
to WCAG21/AA）在部分实验版本中被忽略，函数退化为“挑最亮/最暗”而非“达标最优” - 没有 fallback 机制：如果所有候选色都不满足 AA（≥4.5:1），它不会报错，也不会降级，而是静默返回第一个候选色
真正能上线的替代方案：JS + 自定义属性 + @supports 渐进增强
别指望 CSS 单独搞定。可靠路径是：
- 用 JS 调用
window.getComputedStyle(el).backgroundColor获取真实背景色 - 转成 sRGB，套 WCAG 2.1 对比度公式计算每个候选色得分
- 把最优色写入
style.setProperty('--auto-text-color', '#fff') - CSS 中用
color: var(--auto-text-color);，并用@supports (color: color-contrast(#000 vs #fff))包一层未来可删的原生逻辑 - 监听
prefers-color-scheme和resize（防字体缩放影响可读性），触发重算
最容易被忽略的细节：渐变背景和混合模式根本不在color-contrast()考虑范围内
如果你的背景是 background: linear-gradient(45deg, #ff6b6b, #4ecdc4)，或者用了 mix-blend-mode: difference，那 color-contrast() 的输入就完全失真——它拿不到渲染后的最终像素色。这种场景下，连 JS 的 getComputedStyle 都拿不到等效值，必须用 canvas 截图采样，或提前约定“主色调”变量供 JS 读取。这才是真实项目里卡住 80% 团队的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
