color-contrast() 不是标准CSS函数且未被任何主流浏览器支持，其草案已被移除；当前需用 color-mix() + light-dark() 静态模拟或依赖JS运行时计算对比度以满足可访问性要求。
color-contrast() 目前（截至2024年）不是标准CSS函数，浏览器原生不支持——直接写 color-contrast() 会无效，所有“自动对比度按钮”方案都必须靠预处理器、构建时工具或运行时JS模拟。
为什么 color-contrast() 在CSS里根本不能用
它曾是 CSS Color Module Level 5 的草案提案，但已被移除；目前没有任何主流浏览器（Chrome/Firefox/Safari/Edge）实现该函数。你在 DevTools 里写 background-color: color-contrast(#333, white, black);，计算值会直接 fallback 到初始值或报错，样式不会生效。
- 查 Can I Use 或 MDN 都找不到
color-contrast()的兼容性表格——因为它不存在 - PostCSS 插件如
postcss-color-contrast只是静态替换，无法响应主题切换或用户偏好 - CSS 自定义属性 +
light-dark()或color-mix()是当前更可行的替代路径
用 color-mix() + light-dark() 模拟高对比按钮
color-mix()（已进入 Chrome 111+、Safari 16.4+）能按亮度混合颜色，配合 light-dark() 可适配系统主题，逼近“自动选文字色”的效果：
button {
--bg: #5a3e9c;
background-color: var(--bg);
color: color-mix(in srgb,
light-dark(white, black) 75%,
var(--bg) 25%
);
}
-
light-dark(white, black)提供基础文本色候选，但不是“根据背景算出最优色”，而是依赖系统主题 -
color-mix()的权重比例需手动调：太靠近背景色会导致对比不足；75% 白/黑通常比 50% 更安全 - 这个组合仍无法满足 WCAG AAA 级要求（比如 #5a3e9c 背景上用纯白文字实际对比度是 4.2:1，低于 AAA 的 7:1）
真正可访问的按钮需要运行时计算
只有 JS 能读取最终渲染的 background-color（含渐变、filter、继承值），再调用无障碍算法算出合规文字色：
- 用
window.getComputedStyle(el).backgroundColor获取真实背景色 - 用开源库如
@ctrl/tinycolor或原生chroma.js计算对比度，目标至少达到 WCAG AA（4.5:1） - 动态设置
el.style.color，并监听prefers-color-scheme和media query变化 - 注意：CSS 自定义属性更新后，JS 必须重新计算——不能只靠一次初始化
真正在生产环境做可访问按钮，绕不开 JS 层的实时校验。CSS 的“自动”只是幻觉，背后全是计算和 fallback 逻辑。最易被忽略的是：设计师给的“深蓝”色值在暗色模式下可能变成近黑，此时哪怕用了 light-dark()，也得靠 JS 重新测对比度——否则就挂了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
