纯 CSS 无法智能感知背景色并自动切换文字颜色；mix-blend-mode: difference 仅通过像素级 |R₁−R₂| 运算实现视觉反色，需文字为纯黑/白、背景为直系父容器不透明纯色、无 opacity/filter/transform 干扰，且 Safari 15.4+ 才稳定支持；JS + CSS 变量方案（WCAG 亮度公式计算 + --luma + color-mix）才是当前唯一兼顾准确性、可访问性与动态场景的可靠路径。
纯 CSS 没法“智能”感知背景色并自动切换文字颜色——color 不支持基于 background-color 的条件计算，所谓“自动反色”都是预设规则 + 有限适配。
mix-blend-mode: difference 只在严格条件下“看起来像自动”
它不是检测深浅，而是对每个像素做 |R₁−R₂| 运算。效果依赖结构而非逻辑：
- 文字必须用
color: #000000或color: #ffffff（其他值会糊成灰） - 背景必须是文字**直系父容器**的不透明纯色——
rgba(0,0,0,0.9)都可能失效 - 父容器不能有
opacity、transform、filter或isolation: isolate，否则隐式创建 stacking context，切断混合链路 - Safari 15.4+ 才稳定支持；iOS 15.2 及更早版本完全忽略
- 滚动或动画中可能出现短暂错色，因重绘不同步
JS + CSS 变量才是目前唯一兼顾准确性与可访问性的路径
把亮度计算交给 JS，样式控制留给 CSS：
- 用 WCAG 公式算亮度：
0.2126 * r + 0.7152 * g + 0.0722 * b（归一化到 0–1），别用平均值或lightness() - JS 获取背景色必须用
getComputedStyle(el).backgroundColor，再解析rgb()或 hex - CSS 中声明
@property --luma { syntax: "<number>"; inherits: false; initial-value: 0.5; }</number>，否则color-mix()无法将变量当数值参与计算 - 文字色写成：
color: color-mix(in srgb, #000, #fff calc(var(--luma) * 100%))——实现黑白渐变过渡，而非硬切 - 监听主题切换、图片加载完成等事件，及时重算并更新
--luma
动态背景下最容易被忽略的坑
用户上传图、CSS 动画渐变这类场景，JS 必须重新触发计算；而 mix-blend-mode 方案在此类场景中结果不可控，甚至会生成肉眼难辨的中间灰。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的是：服务端渲染（如 Next.js）里没有 getComputedStyle，也没 DOM，硬在 SSR 阶段解析 CSS 文件找背景色会掉进无限套娃陷阱——CSS 可能来自 CDN、含媒体查询、带变量、甚至被 JS 动态注入。
