CSS 全新函数 contrast-color() 上线，让配色设计前所未有的简单！

你有没有经历过这样一幕：费尽心思选出的文字颜色，放到背景上一看，竟然惨不忍睹？

然后你无奈地打开搜索引擎，开始查找“对比度计算方法”或“XX颜色的搭配方案”，结果却意外跌进 WCAG 的文档深坑，最后顺便拿了个色彩学学位。

但坦率地讲，我们是开发者，而不是设计师。

我们真正需要的是，快速且无脑地搭配出易读、舒适、好看的UI，而非绞尽脑汁研究 #1a73e8 和 whitesmoke 是否搭配。

幸运的是，CSS 终于给出了终极解决方案：全新函数 contrast-color()。

它的使命只有一个：以最简单的方式，保证文本与背景的高对比度，再也不用靠猜。

我们赶紧来看一下它究竟怎么用！

什么是 contrast-color()？

一句话概括：它是 CSS 新增的一个函数，接收一个颜色作为参数，然后返回黑色或白色中与背景色对比度更高的一个。

对，就是这么简单。

基本语法：

contrast-color(<color>);

其中，<color> 可以是：

• 颜色名称，如 red、blue
• 十六进制值，如 #333、#ffcc00
• CSS变量，如 var(--someColor)

看几个简单例子：

color: contrast-color(#0055cc);   /* 返回白色 */
color: contrast-color(#f5f5f5);   /* 返回黑色 */

结合 CSS 变量使用：

:root {
  --bg: #fafafa;
  --text: contrast-color(var(--bg));
}

body {
  background-color: var(--bg);
  color: var(--text);
}

终于告别了人工配色的烦恼，再也不用担心文本难以阅读。

它如何决定黑色还是白色？

它的判断依据非常简单：contrast-color() 内置了 WCAG 对比度算法，分别计算输入的颜色与白色、黑色之间的对比度，自动选择对比度较高的颜色。

如果两者对比度恰好相等（仅在纯灰色背景这种极端情况出现），它默认返回白色。

现实一点：它不是万能药水

• 它只返回黑色或白色，不会自动选择其他色彩；
• 它不是色彩搭配生成器，无法提供更多样的颜色组合；
• 它不会帮你自动生成漂亮的色彩主题；

但它的确适合许多场景，比如：

• 动态主题：允许用户自由选择背景颜色，而文本颜色自动保持清晰可读；
• 组件库：开发适应更多情景变化的组件，灵活应对背景色变化；
• 设计 Token：与CSS变量结合，实现智能化设计模式。

现在可以直接使用吗？

直接答案是：还不能，至少在生产环境还不行。

截至2025年7月，各大浏览器支持情况如下：

• Chrome ❌ 未支持
• Firefox ❌ 不支持
• Safari ❌ 尚未支持
• Edge ❌ 也没有支持

contrast-color() 已被列入 CSS Color Module Level 5 标准规范，但目前尚未被主流浏览器原生支持。Safari 实验性开启 flags 后可进行尝试，但正式项目暂不推荐直接使用。

当前如何实现类似效果？

在等待原生支持期间，你可以这样实现：

方案1：使用 JavaScript

虽然并非理想，但下面这个快速函数可以暂时帮你解决：

function getContrastColor(hex) {
  const r = parseInt(hex.substr(1, 2), 16);
  const g = parseInt(hex.substr(3, 2), 16);
  const b = parseInt(hex.substr(5, 2), 16);
  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
  return luminance > 0.5 ? '#000000' : '#ffffff';
}

方案2：使用 Sass

如果你习惯用 Sass，可以用这个方法：

@function contrast-color($color) {
  @if (lightness($color) > 50%) {
    @return black;
  } @else {
    @return white;
  }
}

虽然这个方案并不完美（色相的亮度 ≠ 实际感知的对比度），但在原生 CSS 正式提供前，这样用暂时够了。

总结

• contrast-color() 函数接收颜色，自动返回黑色或白色以确保最佳对比度；
• 非常适合实现动态主题，轻松保持界面可读性；
• 目前尚无主流浏览器原生支持，但该功能已在路上；
• 在此之前，可用 JavaScript 或 Sass 临时代替；

希望这个函数能尽快进入正式支持，让前端设计更简单、更友好。