color-contrast() 不能直接提升文字可读性，仅在满足纯色背景、至少两个候选色、合法变量及浏览器支持等前提时生效，否则声明被静默丢弃；chrome 114+、edge 114+、safari 16.4+ 支持但需 @supports 检测和实验特性启用，背景非纯色或需多色适配时须用 js + wcag 亮度公式降级处理。
color-contrast() 目前不能直接提升文字可读性——它只在满足前提条件时才生效，否则整条声明会被浏览器静默丢弃，文字可能彻底不可读。
color-contrast() 为什么经常不生效
该函数对输入值极其敏感，不是“写了就起作用”。常见失效场景包括：
-
background-color源自var(--bg)，但--bg实际值是url(./bg.jpg)或linear-gradient(...)—— 这违反了 CSS Color Level 5 对第一个参数必须为<color></color>的硬性要求，浏览器直接忽略整条color声明 - 候选色列表少于两个：如写成
color-contrast(var(--bg) vs #000)，缺少备选，函数无解，回退到上一个有效颜色（常为inherit） - 目标对比度级别设为
AAA，但背景色太灰（如#888），所有候选色（#000/#fff）均不达标，函数返回未定义行为，部分浏览器按规范回退到列表第一个色，部分则放弃计算 - CSS 变量未在 :root 或作用域内正确定义，
var(--bg)展开为空或非法值，导致整个函数调用无效
Chrome / Edge / Safari 中启用 color-contrast() 的实操要点
截至 2026 年 9 月，Chrome 114+、Edge 114+、Safari 16.4+ 支持该函数，但 Safari 需手动开启实验特性（safari://experimental → 启用 “CSS Color Level 4”）。实际使用必须配合 @supports 检测：
body {
color: #333; /* fallback for unsupported */
}
@supports (color: color-contrast(#000 vs #000, #fff to WCAG21/AA)) {
body {
--bg-color: #f0f0f0;
background-color: var(--bg-color);
color: color-contrast(var(--bg-color) vs #000, #fff to WCAG21/AA);
}
}
注意：@supports 测试必须用字面量颜色（如 #000）而非变量，否则某些浏览器解析失败；to WCAG21/AA 是推荐写法，比省略更稳定；不要混用 vs 和逗号分隔——语法错误会导致整条规则失效。
替代方案：当 color-contrast() 不可用或背景非纯色时
遇到图片背景、渐变、多层叠加，或需支持 Firefox / 旧版 Safari 时，必须降级。可靠路径是 JS + WCAG 亮度公式：
- 提取背景主色：用
canvas+getImageData或第三方库如vibrant.js，但注意 DPR 缩放和图片加载时机 - 计算亮度：用公式
(0.2126 * R + 0.7152 * G + 0.0722 * B) / 255得到相对亮度 L；若 L > 0.5，文字用#000，否则用#fff - 绑定系统偏好：监听
prefers-color-scheme和prefers-reduced-motion，避免 JS 计算结果与系统设置冲突 - 兜底 CSS：始终设置
color初始值，并用!important避免被其他规则覆盖（仅在此类动态场景下合理）
真正容易被忽略的点是：即使 color-contrast() 生效，它也只解决“黑 or 白”的二选一；若设计系统要求使用品牌色（如 #007bff）作文字色，该函数无法智能适配——此时必须自己实现多色对比度排序逻辑，或接受 WCAG 合规性妥协。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
