color-contrast() 函数目前未被任何主流浏览器支持，仅是 css color module level 5 草案，实际使用会被忽略并回退到前一声明；真实项目中需借助 js 和 wcag 算法或成熟库（如 @deque/busybuddy）动态计算对比度，注意处理 alpha 叠加与运行时变化。
color-contrast() 函数根本不能直接用在主流浏览器里
它目前只是 CSS Color Module Level 5 的草案函数，color-contrast() 在 Chrome、Firefox、Safari 全系都不支持（截至 2024 年中）。你写上去不会报错，但也不会生效——计算被忽略，样式回退到前一个声明。
常见错误现象：color: color-contrast(#333 vs #fff, #000); 看起来很理想，实际渲染出来还是默认文本色或继承色。
- 别把它当真实可用的 CSS 函数去调试布局
- 构建工具（如 PostCSS）也没有成熟插件能安全转译它
- MDN 和 Can I Use 都明确标为 “No support”
真正在项目里做无障碍配色，得靠 JS + WCAG 算法
核心是算出前景色和背景色之间的对比度比值（contrast ratio），再判断是否 ≥ 4.5（普通文本）或 ≥ 3.0（大号文本）。浏览器不提供原生函数，就得自己算或借力成熟库。
使用场景：按钮悬停自动换文字色、主题切换时动态校验、CMS 后台让用户选色时实时提示是否合规。
- 手动实现太容易出错——RGB 转相对亮度（luminance）有固定公式，
Math.pow指数、归一化、四舍五入顺序都影响结果 - 推荐用
@deque/busybuddy或color-contrast（npm 包名，和 CSS 函数同名但无关）这类已验证 WCAG 2.1/2.2 的库 - 注意 alpha 通道：半透明色必须先叠加到预期背景上，再算最终对比度，不能直接对 rgba 值运算
PostCSS 插件不是银弹，慎用于生产环境
确实有插件（比如 postcss-color-contrast）试图把 color-contrast() 编译成静态色值，但它只在编译时“猜”一次，无法响应运行时变化。
性能 / 兼容性影响：
- 如果背景色是 CSS 变量（
--bg），插件完全无法解析，直接留空或报错 - 主题切换、暗色模式切换、用户自定义色板等场景下，预编译结果立刻失效
- 生成的 fallback 色可能不符合设计意图（比如总选最深灰而不是品牌蓝）
最稳妥的落地方式：约束输入 + 运行时校验 + 明确降级策略
与其依赖未来函数，不如控制变量。设计师提供有限色板，前端限制可选组合，并在关键节点做校验提示。
实操建议：
- 用
CSS custom properties定义色板，搭配@property（带syntax: "<color>"</color>）启用类型检查（仅 Chromium 支持，但至少开发期能 catch 错误值） - 在 React/Vue 组件中，对
props.color和props.bg调用对比度函数，console.warn不合规组合，或加data-contrast-fail属性供 QA 工具扫描 - 降级不是“随便选个灰”，而是明确定义：比如所有不合规的浅背景，文字强制用
#1a1a1a（非纯黑，避免视觉过重）
真正难的不是算对比度，是让颜色决策链路（设计 → 组件 API → 用户输入 → 渲染结果）全程可追踪、可验证。一旦中间某环脱离控制，比如 CMS 允许填任意 hex 值，自动化就只剩报警这一个作用了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
