CSS 的contrast-color()真的很好用。background: var(--bg-color); color: contrast-color(var(--bg-color));背景色一变文字颜色跟着在黑白之间切省得你再去写一堆判断。但是问题也正出在这里它默认只会给你黑色或白色。如果你的设计系统里有品牌色、主题色或者你根本不想页面最后长成深底白字 / 浅底黑字的标准答案那就得再往前走一步。方案一拿color-mix()做微调最省事的做法是把contrast-color()的结果当成基准再和品牌色混一点。color: color-mix( in srgb, var(--brand-color), contrast-color(var(--bg-color)) 20% );这个思路的好处很直接浏览器只负责帮你判断该偏亮还是偏暗品牌味道还是你自己来控。比例没有绝对标准但可以先这么试浅色背景混 10% 到 25%深色背景混 30% 到 40%优点是接入成本低现有样式也好改。缺点同样明显这个比例需要你自己调而且调完别忘了验一下最终对比度不然容易看着顺眼实际不够可读。方案二用 style queries 切不同调色板如果你不满足于黑白基础上再掺一点颜色那可以用 style queries 走另一条路。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 分还是得你自己来处理。