color-contrast()函数目前不可用，因截至2026年6月仅chrome114+、edge114+和safari16.4+（需手动开启实验特性）部分支持，且不支持to wcag21/aa等完整校验语法，旧版浏览器直接忽略声明。
纯 CSS 无法在运行时读取 background-color 并据此自动切换文字为黑或白——所有声称“纯 CSS 实现”的方案，要么依赖编译期已知颜色（如 Less/Sass），要么是视觉 trick（如 mix-blend-mode），要么尚未被浏览器支持（如 color-contrast()）。
为什么 color-contrast() 还不能用
该函数虽已进入 CSS Color Level 5 候选推荐标准，但截至 2026 年 6 月，仅 Chrome 114+、Edge 114+ 和 Safari 16.4+（需手动开启实验特性）部分支持。你在 DevTools 中写 color: color-contrast(var(--bg) vs #000, #fff)，旧版浏览器会直接忽略整条声明，不报错也不生效。更关键的是：color-contrast() 仍不支持 to wcag21/aa 等完整校验语法，实际对比度可能不达标。
mix-blend-mode: difference 的真实适用边界
它不是“检测深浅”，而是对每个像素做 |R₁−R₂| 运算。效果看似自动反色，但只在严格条件下可靠：
- 文字必须用
color: #000000或#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 方案在此类场景中结果不可控，甚至会生成肉眼难辨的中间灰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
