CSS变量无法自动反色，因其仅存储值而无运行时计算能力；color-contrast()是唯一原生方案，需配合候选色使用；不支持时可用mix-blend-mode: difference降级；动态场景必须依赖JS实时计算明度并注入变量。
为什么直接用 CSS 变量无法自动反色
因为 --bg-color 这类变量只是存储值的容器，CSS 本身不提供“读取变量值 → 计算亮度 → 切换文字色”的运行时逻辑。你写 color: var(--bg-color) 或 color: invert(var(--bg-color)) 都会报错或被忽略——invert() 不接受颜色变量，color 也不支持条件表达式。
color-contrast() 是目前唯一原生支持的方案
Chrome 111+、Safari 16.4+ 和 Firefox 117+ 已支持 color-contrast() 函数，它能基于背景色自动选出满足 WCAG 2.1 对比度要求的最优文字色：
- 必须配合自定义属性使用，例如：
color: color-contrast(var(--bg) vs #000, #fff wcaag21); -
vs后列出候选色，函数从中挑一个与--bg对比度 ≥ 4.5:1 的最深/最浅色 - 若所有候选都不达标（比如
--bg是#888），浏览器会退回到第一个候选色（#000），不会报错但可能可读性差 - 注意：该函数只在
color属性中生效，不能用于background-color或border-color
mix-blend-mode: difference + CSS 变量是兼容 fallback 方案
当目标浏览器不支持 color-contrast() 时，可用 mix-blend-mode: difference 搭配变量做视觉级反色，但需严格控制结构：
- 文字必须设为纯白：
color: white;（不能用var(--text-light)） - 背景必须由文字**直系父容器**提供，且不能有
opacity、filter、transform或isolation: isolate - 若背景来自变量（如
background-color: var(--bg);），确保该变量解析后是不透明纯色（rgb(30, 30, 30)可行，rgba(0,0,0,0.9)易失效） - 加降级声明：
color: color-contrast(var(--bg) vs #000, #fff); color: white; mix-blend-mode: difference;，现代浏览器用前者，旧版回退到后者
JS 注入变量才是动态场景下真正可靠的路径
遇到图片背景、滚动视差、主题切换等 JS 驱动的场景，纯 CSS 方案必然失效。此时必须用 JS 实时计算背景明度并更新 CSS 变量：
- 用
getComputedStyle(el).backgroundColor获取当前背景色，再解析为 RGB 值 - 套用 WCAG 公式：
luma = 0.2126 * r + 0.7152 * g + 0.0722 * b（归一化到 0–1） - 注入变量：
el.style.setProperty('--luma', luma.toFixed(3)); - CSS 中用：
color: color-mix(in srgb, #000, #fff calc(var(--luma) * 100%));实现平滑黑白渐变 - 关键点：监听
resize、scroll、load（图片加载完）、themechange等事件，否则变量不会自动刷新
真正难的不是写对一行 color-contrast()，而是判断什么时候它根本起不了作用——比如背景是 linear-gradient(to bottom, #000, transparent)，或者页面用了服务端渲染，DOM 尚未挂载，getComputedStyle 就拿不到任何值。这些地方不补 JS，光靠 CSS 变量只会留下一堆不可访问的灰蒙蒙文字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
