color-contrast() 不是有效 css 函数，截至 2024 年中未被任何主流浏览器支持，仅是 css color level 5 草案；自动切换 logo 必须依赖 js 计算背景相对亮度并动态切换类名。
color-contrast() 不能用 —— 它目前（截至 2024 年中）**不是有效 CSS 函数**，未被任何主流浏览器实现，连实验性 flag 都没有。所有声称“用 color-contrast() 自动切换 logo”的方案，要么是混淆了提案名称，要么套用了错误的 Polyfill 名称，实际跑不通。
为什么搜到的 color-contrast() 示例都无效？
它只是 CSS Color Level 5 规范里的一个草案函数，语法形如 color-contrast(#333 vs white, black)，目标是返回对比度最高的备选色。但该函数尚未进入浏览器引擎，Chrome/Firefox/Safari 的 caniuse 数据均为 “No support”。你粘贴进 DevTools 会直接被忽略，控制台无报错，样式也不生效。
常见混淆来源：
- 把
color-mix()或relative-color()的实验性用法误标为color-contrast() - 把第三方 JS 库（如
get-contrast-ratio或chroma.js）封装的工具函数当成原生 CSS 函数 - 看到设计系统文档里“计划支持
color-contrast()”就当成已可用
真正能落地的背景亮度检测方案
想根据背景明暗自动切 logo（比如深色背景用白标、浅色背景用黑标），必须靠 JS 检测，CSS 无法独立完成。核心逻辑是：读取背景色 → 转 HSL/Luminance → 判定明暗 → 切换 logo class 或 src。
实操建议：
- 优先用
window.getComputedStyle(el).backgroundColor获取计算后颜色，避免依赖内联 style - 别用 RGB 简单求平均（
(r+g+b)/3），误差大；改用相对亮度公式：0.2126 * r + 0.7152 * g + 0.0722 * b（归一化到 0–1） - 阈值设 0.5～0.6 之间较稳妥；低于取白标，高于取黑标
- 监听
resize和scroll（如果背景随滚动变化），必要时加debounce
示例片段：
const bg = getComputedStyle(header).backgroundColor;
const lum = getLuminance(bg); // 自行实现 luminance 计算
logoEl.classList.toggle('light-logo', lum > 0.5);
logoEl.classList.toggle('dark-logo', lum <h3>更轻量、更可控的替代思路</h3><p>如果页面结构可控，根本不用实时检测亮度 —— 直接靠 CSS class 分离语义：</p>
- 给不同区域手动加语义类，如
<header class="theme-dark"></header>或<section class="bg-light"></section> - 用 CSS 层叠控制 logo：
.theme-dark .logo { filter: brightness(10) }或切换background-image - 搭配 prefers-color-scheme 做兜底：
@media (prefers-color-scheme: dark) { .logo { ... } }
这样既规避 JS 时机问题（比如 SSR 页面首屏闪动），又避免颜色解析失败（如 transparent、currentcolor、渐变色无法解析）。
真正卡住的点从来不是“怎么写函数”，而是“谁来读取背景色”——CSS 没有运行时读取能力，color-contrast() 还没出生，所以必须明确：检测归 JS，切换归 CSS/JS，别在伪代码里找答案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
