color-contrast() 不能直接用于生产环境的无障碍高对比度保障——仅chrome 114+、edge 114+和safari 16.4+（需手动开启实验特性）支持，且属w3c草案函数，firefox及安卓webview等主流环境不支持，盲目使用将导致文字不可读。
color-contrast() 目前不能直接用于生产环境的无障碍高对比度保障——它只在 Chrome 114+、Edge 114+ 和 Safari 16.4+（需手动开启实验特性）中可用，且仍属 W3C Color Module Level 5 草案函数。盲目依赖会导致大量用户看到不可读文字。
为什么 color-contrast() 不能当“开关”直接用
该函数语法看似简洁，但实际运行受三重限制：
- 浏览器支持率低：Firefox 完全未实现；安卓 WebView、旧版 iOS Safari、微信内置浏览器等主流场景均不识别，
color-contrast()会被静默忽略，降级为color: unset或继承值，极易变透明或黑底黑字 - 参数容错性差：若
var(--bg-color)未定义、值非法（如transparent、currentColor），整个声明失效，无 fallback 机制 - WCAG 级别参数是字符串字面量，不是变量：
to WCAG21/AA必须原样书写，不能拼接或计算；写成to "WCAG21/AA"或to var(--level)均无效
@supports 检测必须带完整语法且外置 fallback
安卓 WebView 对 @supports not 会整条规则丢弃，Chrome/Safari 则拒绝解析无单位的检测值（如 @supports (color: color-contrast(#000 vs #fff))）。正确写法只有这一种结构：
/* 外部 fallback —— 所有浏览器都生效 */
.text {
color: #1e293b;
}
<p>@supports (color: color-contrast(#000 vs #fff to WCAG20/AA)) {
.text {
color: color-contrast(var(--bg-color) vs #000, #fff to WCAG20/AA);
}
}</p>
注意三点：
- fallback
color必须写在@supports块外部且上方，不能嵌套 - 检测语句中
vs前后必须有空格，to后必须跟完整标准标识符（WCAG20/AA或WCAG21/AAA），缺一不可 - 禁止使用
@supports not (color: ...)，改用正向检测 + 外部降级
候选色列表不是“越多越好”，而是要可控可测
color-contrast() 按顺序逐个比对候选色，返回第一个满足对比度要求的颜色。这意味着：
- 顺序即优先级：把最常用、最安全的色放前面，比如
#000, #fff比#333, #666, #000, #fff更可靠——后者可能因#333在浅灰背景上刚好卡线达标，就跳过更优的#000 - 禁用态、悬停态必须单独声明：不能只靠一个全局
color-contrast()覆盖所有状态，因为背景色变化后对比度阈值可能失效。例如禁用按钮背景是oklch(85% 0.005 210)，#000可能只剩 2.1:1，此时需提供oklch(22% 0.02 55)这类专色 - 避免用 CSS 变量做候选色：如
var(--primary), var(--secondary)，一旦变量值本身对比度不足（比如--primary: #666），函数不会跳过它继续试下一个，而是直接返回不合规结果
真正动态背景（Canvas、渐变、滤镜叠加）必须用 JS 补位
color-contrast() 只能解析静态颜色值，对以下场景完全无效：
- Canvas 绘制的背景图
- 多层
background: linear-gradient(...), url(...)叠加后的合成色 - 带
backdrop-filter: blur(4px)的毛玻璃效果 - 通过
mix-blend-mode与底层混合出的实际前景色
这些情况必须用 JS 获取最终渲染色：
const el = document.querySelector('.dynamic-text');
const computed = getComputedStyle(el);
const bgColor = computed.backgroundColor; // 注意：这里拿到的是 resolved rgb() 值
// 再调用 luminance 计算函数判断选黑还是白
const textColor = getContrastColor(bgColor) === 'dark' ? '#000' : '#fff';
el.style.color = textColor;
关键点：不能读 background-color 原始声明值，必须用 getComputedStyle().backgroundColor 获取浏览器最终计算出的 RGB 值，否则在渐变、滤镜等场景下结果为 rgba(0, 0, 0, 0) 或 initial。
最易被忽略的是：Windows 高对比度主题或 macOS「增加对比度」开关开启后，系统会强制覆盖所有 CSS 颜色，包括 color-contrast() 的输出结果。此时唯一可靠的方式是监听 prefers-contrast: high 媒体查询，并用固定高对比色组合（如纯黑/纯白）覆盖一切动态逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
