别再手写 if-else 选字体颜色了，CSS contrast-color() 来帮你处理

CSS 的 contrast-color() 真的很好用。

css 复制代码

background: var(--bg-color);
color: contrast-color(var(--bg-color));

背景色一变，文字颜色跟着在黑白之间切，省得你再去写一堆判断。但是，问题也正出在这里：它默认只会给你黑色或白色。

如果你的设计系统里有品牌色、主题色，或者你根本不想页面最后长成"深底白字 / 浅底黑字"的标准答案，那就得再往前走一步。

方案一：拿 `color-mix()` 做微调

最省事的做法，是把 contrast-color() 的结果当成基准，再和品牌色混一点。

css 复制代码

color: color-mix(
  in srgb,
  var(--brand-color),
  contrast-color(var(--bg-color)) 20%
);

这个思路的好处很直接：浏览器只负责帮你判断"该偏亮还是偏暗"，品牌味道还是你自己来控。

比例没有绝对标准，但可以先这么试：

浅色背景：混 10% 到 25%
深色背景：混 30% 到 40%

优点是接入成本低，现有样式也好改。缺点同样明显：这个比例需要你自己调，而且调完别忘了验一下最终对比度，不然容易看着顺眼，实际不够可读。

方案二：用 style queries 切不同调色板

如果你不满足于"黑白基础上再掺一点颜色"，那可以用 style queries 走另一条路。

css 复制代码

@property --contrast {
  syntax: '<color>';
  inherits: true;
  initial-value: #000;
}

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

@container style(--contrast: #000) {
  .card { --text-color: #0066cc; }
}

@container style(--contrast: #fff) {
  .card { --text-color: #4da6ff; }
}

这种方式更像"根据明暗结果切换整组设计 token"。也就是说，返回值虽然还是黑或白，但你可以借这个信号去选完全不同的一套文字色、边框色、强调色。

它的优势是控制力高，比较适合组件库或者设计系统。缺点也很现实：Firefox 这边暂时还不支持 style queries，所以你得接受它现在更像一招渐进增强，而不是全平台保底方案。

怎么选呢？

如果你只是想让文字别那么死板，先上 color-mix() 就够了，改动小，收益也快。

如果你在做的是一套主题系统，或者你真的想根据背景状态切整组配色，那 style queries 更像正路。

不过不管走哪条路，有一件事都得考虑：最后拿真实颜色去测对比度。自动化帮你走到 80 分可以，剩下 20 分还是得你自己来处理。

相关链接：

una.im/advanced-co...

别再手写 if-else 选字体颜色了，CSS contrast-color() 来帮你处理

方案一：拿 color-mix() 做微调

方案二：用 style queries 切不同调色板

怎么选呢？

方案一：拿 `color-mix()` 做微调