color-mix()不适合文字颜色自适应，因其仅支持静态插值、无法读取背景色、不支持条件判断，且无法保证wcag 2.1 ≥4.5:1对比度；color-contrast()是当前唯一原生可行方案，但需实验标志且仅chrome/edge支持。
color-mix() 目前不能用于自动对比度调整——它不支持条件判断，也不能读取背景色值，更无法满足 WCAG 2.1 对比度 ≥4.5:1 的可访问性要求。
为什么color-mix()不适合做文字颜色自适应
很多人看到 color-mix(in srgb, #000, #fff 70%) 这类写法，误以为能“按背景明暗动态混合”，但实际它只是静态插值：输入固定、输出固定，和背景色毫无关系。CSS 里没有任何机制让 color-mix() 自动感知 background-color 的值。
常见错误现象包括：
- 把
color-mix(in srgb, var(--bg-color), white)当成“反色”用——结果只是把文字染成背景+白的中间色，对比度往往跌破 3:1 - 试图嵌套
calc()或clamp()控制混合比例——CSS 不允许在color-mix()第二参数中使用计算值 - 依赖
color-mix(in hsl, ...)拉亮度——HSL 的 L 值不等于 WCAG 相对亮度，实测黄、青、品红区域大量翻车
color-contrast()才是当前唯一可行的原生方案
截至 Chrome 120+（2024 年起），color-contrast() 是唯一被实现、且语义明确的对比度自适应函数。它真正在浏览器内执行 WCAG 2.1 算法，并从候选色中选出首个达标者。
典型用法：
.card {
--bg-color: #4a6fa5;
}
.card p {
color: color-contrast(
var(--bg-color),
#000 #fff #222,
AA,
WCAG21
);
}
注意点：
- 必须开启实验性标志：
#enable-css-color-contrast（Chrome/Edge 地址栏输入） - Firefox 和 Safari 尚未实现，不能当作全平台方案
- 候选色顺序很重要：浏览器从左到右逐个试算，第一个达标的即生效，不是“最优”而是“首个”
- 不支持变量传入候选色列表，
color-contrast(var(--bg), var(--text-options))会直接失效
CSS变量 + JS fallback 是目前最稳的落地路径
纯 CSS 路线在 2026 年仍无法覆盖渐变、图片、动画背景等真实场景。可靠做法是：用 CSS 变量声明背景意图（如 --bg-tone: dark），再由 JS 校验真实渲染值并修正文字色。
关键步骤：
- 给容器加
data-bg-source="dynamic"标记，区分“约定色”与“不可读背景” - 用
getComputedStyle(el).backgroundColor读值；若返回rgba(0, 0, 0, 0)或initial，说明背景来自图片或渐变，需降级为预设色 - 对 RGB 值运行 WCAG 公式：
(r * 0.2126 + g * 0.7152 + b * 0.0722) / 255，结果 white，否则用black - 避免每帧重算：监听
resize、themechange和MutationObserver检测 class 或 style 变更即可
真正容易被忽略的，不是怎么写 color-mix()，而是忘了——只要背景不是纯色、不是由 CSS 变量明确定义的，所有纯 CSS 方案都只是“看起来像自动”，实际在滚动、缩放、高DPI设备上会悄悄失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
