纯css无法真正感知父元素背景色自动切换文字颜色；color-contrast()是唯一符合wcag标准的原生方案但兼容性有限，mix-blend-mode: difference仅视觉反色且限制多，js+getcomputedstyle才是全环境可靠解法。
纯 CSS 无法真正“感知”父元素背景色并自动切换文字颜色，所有所谓“自动”都依赖特定前提或 JS 驱动；目前唯一接近“开箱即用”的方案是 color-contrast()，但它只在 Chrome 114+、Edge 114+、Safari 16.4+（需开启实验特性）中可用，旧版本必须降级处理。
mix-blend-mode: difference 是最简但限制极多的纯 CSS 方案
它不改变真实 color 值，而是靠混合算法视觉上“反色”，适合快速原型，但实际落地要绕过一堆坑：
- 文字必须设为纯黑（
color: #000）或纯白（color: #fff），中间色会出不可控灰阶 - 父容器不能有
isolation: isolate，否则混合被隔离失效 - 背景不能是半透明（如
rgba(0,0,0,0.1)），否则混合后文字可能完全不可见 - 移动端 iOS 13.4 之前、所有 IE 版本、部分旧版 Safari 均不支持
- 打印样式、屏幕阅读器、DevTools 的“计算样式”里看到的仍是原始色值，不是真实可读色
color-contrast() 是 W3C 标准方案，但兼容性仍需兜底
这是目前唯一按 WCAG 对比度标准（AA/AAA）自动选色的原生 CSS 函数，写法简洁：
.text-auto {
color: color-contrast(var(--bg-color) vs #000, #fff to WCAG20/AA);
}
但必须加 @supports 检测，否则老浏览器会直接忽略整条规则：
@supports (color: color-contrast(#000 vs #fff to WCAG20/AA)) {
.text-auto { color: color-contrast(var(--bg-color) vs #000, #fff to WCAG20/AA); }
}
@supports not (color: color-contrast(#000 vs #fff to WCAG20/AA)) {
.text-auto { color: #000; } /* 或接 JS 注入的 fallback */
}
注意：var(--bg-color) 必须是已计算的合法颜色值（如 #222、rgb(34, 34, 34)），不能是未解析的变量链（如 var(--theme, var(--base))）。
JS + getComputedStyle 是唯一可靠、全环境通用的路径
当背景色来自图片、渐变、CSS 变量动态更新、或用户上传时，必须用 JS 读取最终渲染值再决策：
- 用
getComputedStyle(el).backgroundColor获取计算后颜色（返回rgb(r, g, b)或rgba(r, g, b, a)字符串） - 正则提取 r/g/b 值，代入亮度公式：
(r * 0.299 + g * 0.587 + b * 0.114) / 255 - 明度 el.style.color = '#fff'；否则设
'#000' - 监听变化不能只靠
style属性变更——要用MutationObserver监听 class 切换，或用requestAnimationFrame节流轮询 - 避免在
input、scroll中直接调用，否则高频重绘卡顿
真正容易被忽略的是：没有“一次设置永久生效”的纯 CSS 解法。只要背景色来源不可静态预知（比如来自 background-image、linear-gradient、或用户上传），JS 就绕不开——color-contrast() 看似完美，但它不处理图片主色提取，也不响应 CSS 变量 runtime 更新，这些边界场景仍得靠 JS 补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
