color-contrast()函数目前不可用于生产环境，仅chrome 127+/safari 17.4+提供实验性支持且需开启flag，不支持动态响应、深色模式切换及复杂背景，应结合js运行时计算对比度并用自定义属性与@supports渐进增强。
color-contrast() 函数目前不能用于生产环境的自动对比度调整——它不是已落地的功能，而是 CSS Color Level 5 的编辑草案，Chrome、Firefox、Safari 均未默认启用，开启实验 flag 后也仅支持极简场景（如纯色背景 + 十六进制候选色），遇到变量、HSL、渐变、alpha 或深色模式切换就会失效。
color-contrast() 在 Chrome/Safari 中开启 flag 后仍不生效的常见原因
-
color-contrast()必须显式写against关键字，漏掉会直接语法报错：color: color-contrast(#333, white, black against #fff); - 候选颜色列表不能含 CSS 变量或函数调用，
color-contrast(var(--text), #000, #fff against var(--bg))会被整个声明忽略 -
vs是旧语法（CSS Color 4 草案），当前主流实现只认against；混用to WCAG20/AA等后缀在 Safari 18.0+ 才部分支持，Chrome 127+ 不识别 - 开启
chrome://flags/#css-color-contrast后，仍需确保背景是硬编码色值（如#eee），若来自background: color-mix(in srgb, #000, white 10%)，函数返回transparent或回退到前一声明
为什么用 @supports 检测 color-contrast() 很容易误判
-
@supports (color: color-contrast(#000 against #fff))在 Chrome 127+ 和 Safari 18.0+ 中返回true，但实际渲染时仍可能因参数非法而静默失败 - 它无法检测“是否支持变量传参”或“是否支持 HSL 输入”，只校验语法结构合法
- 更糟的是：即使检测通过，
color-contrast(var(--bg) against #fff)在运行时仍被丢弃，DevTools Styles 面板里该行显示为 strike-through 灰色，但无任何警告
真正能跑通的运行时对比度适配方案（JS + CSS 双驱动）
核心不是让 CSS “自动算”，而是让 JS 主动读、算、设：
- 用
getComputedStyle(el).backgroundColor获取最终计算后的背景色（含 alpha 叠加） - 借助
@ctrl/tinycolor或@deque/busybuddy计算各候选色与背景的对比度比值 - 将最优色写入
el.style.color或更新document.documentElement.style.setProperty('--auto-text', '#fff') - 配合
MutationObserver监听style或class变化，重算触发时机
示例关键逻辑：
const bg = getComputedStyle(card).backgroundColor;
const candidates = ['#000', '#fff', '#333'];
const best = candidates.reduce((a, c) => {
const ratio = getContrastRatio(bg, c);
return ratio > (getContrastRatio(bg, a) || 0) ? c : a;
});
card.style.color = best;
注意：半透明背景必须先合成到预期底色（如 body 背景）再算，否则结果偏差极大。
浏览器对 color-contrast() 的支持仍是碎片化的实验状态，真正影响可访问性的不是“能不能写”，而是“写了之后用户看到的到底是什么”。最易被忽略的点在于：对比度合规性必须覆盖所有运行时状态（深色模式、缩放、用户样式表覆盖），而草案函数连静态变量都处理不了，更别说动态上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
