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 分还是得你自己来处理。
相关链接：