👇 今日要闻
打破信息壁垒，走近全球前端。Hello World 大家好，我是林语冰。
谷歌每年都会举行 Google I/O 技术大会，今年的大会又上线了一大波 Web 开发圈的前沿技术，其中一个就是 CSS 新函数 contrast-color()。
在开发网页的亮暗主题时，你是否觉得分别为不同背景手动定义文本颜色稍显麻烦？
这就是 contrast-color() 的用途，它能让浏览器动态生成对比色，降低维护成本。本期我们就一起来了解一下这个 CSS 新函数的具体用法。
👉 技术背景
人性化的 Web 开发需要遵循 W3C 的无障碍标准，比如 UI 对比度良好，确保文本清晰可见。
举个栗子，这是两种背景上的文本显示情况：
不难发现，有的背景使用白色文本对比度更好，而有的背景使用黑色文本更清晰可见。
现实开发中，不同颜色的按钮、亮暗主题的文本、调色板等场景，都有动态主题或多颜色适配的需求。
痛点在于，你需要支持几种主题，就必须手动维护对应数量的前景和背景颜色。此外，你还要用一些在线设计工具测试色彩对比度，确保视觉效果合规，这不仅硬编码的模板代码多，而且手动维护成本高。
实际开发中，我们能借助 SASS 等预处理器的特殊语法或 JS 工具库，自定义一些复杂的色彩算法来弹性维护，但代价是第三方库集成或运行时开销。
👉 contrast-color() 函数
如果 CSS 原生就能支持生成对比度合规颜色的函数，岂不妙哉？
为此，谷歌开发专家 Una 早年在使用 SASS 生态的扩展插件之后，就尝试制定 contrast-color() 提案，这个新的 CSS 函数现在终于正式落地了。
contrast-color() 函数接受一个颜色值作为输入，并返回 black 或 white，具体取决于哪种颜色与输入颜色的对比度更高。
它的基本语法如下：
注意，如果黑白与输入颜色的对比度刚好相等，算法会返回 white。
举个栗子，根据网页的亮暗主题生成对应的黑白文本：
可以看到，在黑色背景下会显示白色文本，而在白色背景下会自动显示黑色文本。
这里的天才之处在于，你不需要单独为了某种主题到处设置文本颜色，而是通过 contrast-color() 一行代码搞定，文本颜色是根据背景自动生成的。
contrast-color() 函数常用于指定文本颜色并自动生成对比鲜明的背景色，反之亦然，它既避免了手动维护前景/背景这种色彩组合的需要，又能确保输入与输出的颜色符合 WCAG 2（网页内容无障碍指南）的最低对比度标准。
👉 进阶示例
我们继续深入一个更复杂的示例，假设有一个按钮或超链接，当我们的鼠标悬浮在按钮上方时，按钮颜色高亮，同时我们希望文本也能自动根据高亮颜色变色，代码如下：
可以看到，按钮的颜色是 rebeccapurple（蕾贝卡紫色，CSS logo 的品牌色），文本颜色是对应的 white；当鼠标悬浮时，按钮的高亮颜色基于 rebeccapurple 的相对颜色调整亮度生成，是一种亮紫色，文本颜色也会按需自动变色为 black，确保文本清晰可见。
这个高级示例使用了“后 CSS3 时代“的嵌套语法、oklch() 色彩函数和相对颜色语法，有一定的技术难度。其实现代 CSS 光是色彩相关领域就上线了一大波新功能，需要对色彩设计有一定了解才能双向奔赴，我们以后再通过不同使用场景慢慢解锁 CSS 新功能。
👉 局限性
目前，contrast-color() 函数已经成为 baseline newly available（基线全新可用）功能，所有最新版本的主流浏览器均已支持。
个人推荐在博客等现代网站渐进式使用该功能，减少手动维护色彩的样板代码，因为博客面向的开发者一般会使用较新的浏览器。而在旧网站上，也可以使用纯 CSS 来模拟或 SASS 语法来自定义算法，但不推荐 JS 工具库。
就开发体验而言，contrast-color() 不存在明显的兼容性问题，只是维护成本略有不同。诚实地讲，虽然兼容性不是 contrast-color() 的最大痛点，但它确实存在几个设计缺陷。
首先，contrast-color() 目前只能返回 black 或 white，这使得它的使用场景有所受限，当然，如果你熟悉 color-mix() 或 if() 等新功能，这个缺点可以被弥补，但对开发者有一定的技术要求。
还有，contrast-color() 的对比度算法遵循 WCAG 2 标准，这和它诞生的时代背景有关，但也成为了它的历史包袱，存在一些已知的无障碍问题，比如对于中性色的的处理结果并不理想。这是旧标准的固有问题，后续或许会采用 WCAG 3 或其他更好的算法标准继续改良。
👇 重点总结
CSS 新函数 contrast-color() 上市，今年正式成为基线全新可用功能，所有新版主流浏览器均已支持。
contrast-color() 函数接受一个颜色值，根据 WCAG 2 标准计算对比度，返回 black 或 white。该函数适用于根据动态主题自动生成对比色的场景，可以消除手动维护的色彩模板，降低维护成本。
以上就是今日《前端快讯》的全部内容了，希望对你有所帮助。
👍 感谢大家按赞跟转发分享本文，你的手动支持是我坚持创作的不竭动力喔。
🙏 已经关注我的粉丝们，我们下期再见啦，掰掰~~
👇 参考文献：
- 🔗 MDN 文档：developer.mozilla.org/en-US/docs/…
- 🔗 对比度在线测试工具：webaim.org/resources/c…
