color-contrast() 仅支持纯色参数，无法处理背景图片或渐变；替代方案是 JS 结合 WCAG 亮度公式动态计算文字颜色，并需适配系统级偏好设置。
color-contrast() 无法处理背景图片上的文字清晰度——它只接受纯色（rgb()、hex、hsl() 等）作为基准色，对 url()、linear-gradient() 或任何含图像/渐变的背景值完全无效。
为什么 background-image 会让 color-contrast() 失效
该函数在 CSS 解析阶段就要求 var(--bg) 展开后必须是合法单色值。一旦变量指向 url(./bg.jpg) 或 linear-gradient(to br, #222, #444)，整个 color: color-contrast(...) 声明会被浏览器静默丢弃，回退到前一个有效颜色（可能为 inherit 或浏览器默认，导致文字不可读）。
这不是兼容性问题，而是规范层面的限制：CSS Color Level 5 明确将 color-contrast() 的第一个参数定义为 <color> 类型，不包含图像或渐变。
- 常见错误现象：
background: url(...)；color: color-contrast(var(--bg) vs #000, #fff)在 Chrome 120+ 中也不生效，DevTools 里该属性直接不显示 - 即使你用 JS 把图片 dominant color 提取出来并赋给
--bg，只要图片本身没变、用户缩放或 DPR 变化，提取值就可能失准 - 多图层叠加（如
background: url(a.jpg), radial-gradient(...)）会让“主背景色”概念彻底失效
真正能用的替代方案：JS + WCAG 亮度判断
对带图片背景的容器，唯一可靠路径是用 JS 获取渲染后的实际背景色近似值，并动态设置文字颜色。关键不是“取图中心点”，而是模拟人眼感知：
立即学习“前端免费学习笔记（深入）”；
- 用
getComputedStyle(el).backgroundImage判断是否含url(或gradient，触发降级逻辑 - 若为图片背景，优先采用 canvas + getImageData() 采样中心 3×3 区域均值（比单点抗噪）
- 若为渐变，取起始色和终止色的加权平均（按渐变方向与容器尺寸比例估算视觉占比）
- 统一转为归一化 RGB 后，套 WCAG 公式：
0.2126 * r + 0.7152 * g + 0.0722 * b，阈值设 0.5～0.55（避免中性灰误判） - 设置
el.style.color = luminance > 0.52 ? '#000' : '#fff'，同时加el.classList.toggle('text-dark', luminance > 0.52)便于 CSS 扩展
mix-blend-mode: difference 的适用边界
这个技巧仅在你**能控制底层色块**时才可用，比如：卡片容器有固定深色背景，内容区域叠一层半透明白色遮罩，再让文字用 mix-blend-mode: difference。
- 它不依赖背景“是什么”，只依赖当前层与下层的像素差值运算
- 但遇到真实图片背景时，
difference会把文字变成噪点状边缘（尤其在纹理丰富区域），可读性反而下降 - 必须确保文字父容器有明确的、非透明的背景层，否则混合模式无参考基准
- 慎用在小字号或细字体上——反色计算会导致边缘发虚，实测 12px 以下基本不可读
最易被忽略的一点：无论用 JS 还是混合模式，都必须配合 @media (prefers-contrast: high) 和 @media (prefers-color-scheme: dark) 做二次校准。因为用户系统级对比度增强或暗色模式开启后，原生亮度判断会失效——这时得跳过所有自动逻辑，强制走高对比度配色表。
