color-contrast() 目前不可用于生产环境，因仅chrome 127+/safari 17.4+提供实验性支持且需开启flag，不支持动态响应、深色模式切换及复杂背景，应结合js运行时计算对比度并用自定义属性与@supports渐进增强。
目前绝大多数浏览器还不支持 color-contrast() 函数，它仍处于 CSS Color Level 5 草案阶段，Chrome 127+ 和 Safari 17.4+ 仅提供实验性支持（需开启 flag），实际项目中无法直接用它做“自动选色”。
为什么 color-contrast() 现在不能当真用
这个函数本意是让 CSS 自动从一组候选颜色里挑出与背景对比度最高的那个，写法像这样：color: color-contrast(#333 vs white, black, #ff6b6b);。但它不是“动态计算”，也不触发重排重绘——它只是声明时静态求值，且只在支持它的 UA 中生效。
常见错误现象：
- 在 Firefox 或旧版 Chrome 里完全无效，
color直接回退到初始值或继承值 - 即使开启
chrome://flags/#css-color-contrast，也仅对部分基础颜色有效，遇到 HSL、自定义属性或渐变背景就失败 - 无法响应系统深色模式切换或用户修改字体大小等可访问性变化
真正能落地的对比度选色方案
靠纯 CSS 不现实，得结合 JS 做运行时判断。核心逻辑是：用 getComputedStyle 拿到背景色 → 转成 sRGB → 计算与各候选色的对比度（按 WCAG 2.1 公式）→ 取最高值对应的颜色。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 优先用现成库，比如
tinycolor2的readability()方法，或contraster这类轻量工具，别自己实现对比度公式（容易漏掉 alpha 处理或 gamma 校正） - 把计算逻辑放在
matchMedia('(prefers-contrast: high)')或window.addEventListener('themechange')后，而不是只在页面加载时跑一次 - 避免在
scroll或resize里高频调用；如果背景色来自滚动视差或动画，改用节流 +requestIdleCallback
CSS 里能做的有限但关键的事
虽然不能自动选色，但可以为 JS 方案铺好路：用自定义属性暴露颜色变量，用 @supports 做渐进增强，用 forced-colors 媒体查询兜底。
示例结构：
body {
--bg: #fff;
--text-primary: #1a1a1a;
--text-fallback: #000;
}
@media (prefers-color-scheme: dark) {
body { --bg: #121212; --text-primary: #e0e0e0; }
}
@supports (color: color-contrast(black vs white)) {
body { color: color-contrast(var(--bg) vs var(--text-primary), var(--text-fallback)); }
}
@media (forced-colors: active) {
body { color: CanvasText; }
}
注意点：
-
@supports检测必须写全函数签名，只写@supports (color-contrast)是无效的 - 自定义属性值不能带单位或函数（如
--bg: linear-gradient(...)），否则color-contrast()解析失败 -
forced-colors模式下，所有颜色函数都会被忽略，必须单独写媒体查询覆盖
真正难的不是算对比度，而是确定“谁是背景”——CSS 里一个元素的可视背景可能是 background-image、backdrop-filter、父级 opacity 叠加，甚至 canvas 绘制内容。这种场景下，JS 也没法准确读取，只能靠设计约束提前约定可测区域。
