color-contrast() 函数目前无法在 CSS 中使用，因未被任何主流浏览器实现且仍处于草案阶段；实际项目中需用 JavaScript 或预处理器结合 WCAG 对比度公式计算高对比前景色。
color-contrast() 函数目前**不能直接在 CSS 中使用**——它尚未被任何主流浏览器实现，也未进入 CSS Color Module Level 5 的正式推荐标准（截至 2024 年中，仍处于 Editor’s Draft 阶段）。
为什么你查不到 color-contrast() 的生效效果？
浏览器开发者工具里输入 color-contrast(black, white, red) 不会计算，控制台也不会报错，而是直接忽略该声明（表现为属性值无效，回退到初始值或继承值）。这是因为：
- Chrome、Firefox、Safari 均未实现该函数，
@supports (color: color-contrast(black, white))永远为false - MDN 和 Can I Use 上均无兼容性表格，仅在草案文档中定义语义
- 它依赖运行时色彩可访问性计算（需知道背景色、候选色列表、对比度阈值），CSS 引擎当前不支持此类动态评估
实际项目中怎么实现“自动选高对比前景色”？
必须借助 JavaScript 或预处理器逻辑，在样式生成前完成计算。常见可靠路径有：
- 用
getComputedStyle(el).backgroundColor读取真实背景色（注意：需确保元素已渲染、非transparent或渐变） - 调用 WCAG 对比度公式（
(L1 + 0.05) / (L2 + 0.05)，其中L1、L2是相对亮度）比对候选色（如#000和#fff） - 使用成熟库简化计算，例如
tinycolor2的.getBrightness()或chroma.js的.contrast()方法 - 服务端/构建时处理：若背景色固定（如主题色变量），可用 Sass/Less 函数预判——但注意
lightness()不等于可访问性对比度，需手动加阈值校验
示例（轻量 JS）：
function getHighContrastColor(bg) {
const blackContrast = chroma(bg).contrast('black');
const whiteContrast = chroma(bg).contrast('white');
return blackContrast >= 4.5 ? 'black' : 'white'; // AA 标准阈值
}
el.style.color = getHighContrastColor(getComputedStyle(el).backgroundColor);
别踩坑：这些“看似自动”的方案其实不达标
很多团队误以为以下做法能替代 color-contrast()，但存在明显缺陷：
- 仅靠
lightness()判断（如 Sass 中if(lightness($bg) > 50%) { color: black; }）：黄色#ff0lightness 为 50%，但对黑字对比度仅 1.05，完全不可读 - 硬编码暗色主题用白字、亮色主题用黑字：遇到
#555（灰）或#eed（浅紫）时，两种都可能不满足 WCAG AA（4.5:1） - 用 CSS 自定义属性 +
hsl()动态调整：无法感知背景色变化，且 HSL 亮度 ≠ 相对亮度，计算结果不可靠
真正可靠的对比度决策必须基于 WCAG 定义的相对亮度和对比度公式，且发生在颜色值确定之后——这意味着它天然不适合纯 CSS 声明式流程。现在能做的，是把计算逻辑收口到可控的 JS 层或构建环节，并始终用真实对比度数值验证，而不是凭经验或色相直觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
