不能。截至2026年9月，color-contrast()仍属CSS Color Level 5草案，所有主流浏览器均未默认启用；Chrome 127+、Safari 18.0+仅支持硬编码色值和极简参数，涉及变量、rgba()、渐变等即静默丢弃。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

color-contrast() 函数现在能直接用吗？ 不能。截至 2026 年 9 月，color-contrast() 仍处于 CSS Color Level 5 草案阶段，**所有主流浏览器均未默认启用**。Chrome 127+、Safari 18.0+ 虽提供实验性支持，但仅对硬编码色值（如 #fff）和极简参数有效；一旦涉及 var(--bg)、rgba()、渐变或任何运行时计算色，整条声明会被静默丢弃——DevTools 里显示删除线，控制台不报错、不警告、不 fallback。

为什么 @supports (color: color-contrast(#000 against #fff)) 检测通过却无效？ @supports 只检测语法是否被识别，不验证实际执行能力。它返回 true，只说明浏览器“见过这个函数”，不代表它能处理变量、alpha 通道或动态背景。真实场景中：

• color: color-contrast(var(--bg) against #fff) → 直接忽略，回退到上一条 color 声明
• color: color-contrast(rgba(0,0,0,0.8) against #fff) → alpha 不被支持，可能返回 transparent 或丢弃整条
• color: color-contrast(#222 vs #fff) → 旧草案语法 vs 已废弃，必须用 against，否则整条失效

真正能跑通的纯 CSS 替代方案有哪些？ 目前唯一稳定可用的原生 CSS 方案是组合使用 relative-color() + color-mix() + @property，但要求严格：

• 必须用 @property 显式声明自定义属性为 color 类型，否则 relative-color() 无法解析变量
• relative-color() 提取背景亮度后，只能用于插值（比如深背景倾向白，浅背景倾向黑），不能生成新色
• color-mix(in srgb, white 70%, var(--bg) 30%) 这类写法需确保 --bg 是合法颜色值，且浏览器支持 Level 4（Chrome 111+、Safari 16.4+）
• 降级必须存在：color: #333; 写在前面，后续声明才可能覆盖

JS 运行时方案为什么仍是生产首选？ 因为只有 JS 能准确读取最终渲染色（含透明叠加、父级背景、filter 影响），并按 WCAG 2.1 公式实时计算。关键点在于：

• 用 getComputedStyle(el).backgroundColor 获取真实色，而非依赖 CSS 变量原始值
• 半透明背景必须先叠加到默认底色（如白色）再算亮度，不能直接解析 rgba()
• 监听变化推荐用 CSS custom property change（Chrome 115+）或 MutationObserver 监听 style / class 变更
• 避免冲突：JS 设置 el.style.color 时，CSS 中的 color-contrast() 若意外生效，会覆盖 JS 结果——需统一入口，禁用冗余 CSS 声明

真正难的不是选哪个函数，而是让不同层（CSS 原生、CSS Polyfill、JS 计算）之间不互相覆盖。变量命名、降级顺序、监听粒度，任何一个环节松动，都会导致文字颜色在部分设备上突然不可读。