初探 color-contrast()

我在 Safari 技术预览版 122 的发行说明 中看到，它支持 CSS 中的 color-contrast() 函数。Safari 是第一个支持该功能的浏览器。据我所知，其他浏览器尚未支持此功能，我也不知道稳定版 Safari 何时会发布此功能，或者其他浏览器是否会发布此功能。但是！这是一个非常好的想法！任何能够帮助我们构建更易访问的界面（颜色对比是其中一部分）的原生工具都深得我心。所以让我们尝试让它工作起来。

任何人都可以下载 Safari 技术预览版，所以我下载了它。

我不得不就此询问一下，但仅仅因为这是一个预发布浏览器，并不意味着所有这些功能默认都是启用的。就像 Chrome Canary 有需要打开的功能标志一样，Safari 技术预览版也是如此。所以，我不得不像这样打开它

发行说明中没有关于如何实际使用 color-contrast() 的任何信息，但幸运的是，网络搜索找到了一份规范（它是颜色模块 5 的一部分），并且 MDN 有一个关于它的页面，其中包含非常基本的语法信息。

这是我理解的方式

上面那个例子有点傻，因为它总是返回 white——它与 black 的对比度最高。当一个或多个颜色值是动态的时，此函数实际上变得有用，这意味着它很可能是一个 CSS 自定义属性。

该函数返回一个颜色，所以我猜最常用的用例将是根据动态背景设置颜色。所以……

section {
  background: var(--bg);
  color: color-contrast(var(--bg) vs white, black);
}

现在我们可以向 --bg 中添加**任何颜色**，根据对比度，我们会得到白色或黑色的文本。

这非常酷，即使是最基本的用例也是如此。

这是 Dave 的一个演示，他不仅在父元素中设置文本颜色，还设置链接的颜色，并且链接有一组不同的颜色可供选择。使用 HSL 滑块（当然是在 Safari 技术预览版中）进行操作，查看其工作原理。

选择两种对比度足够高的颜色很容易（尽管你会惊讶地发现，即使是我们这些有良好意图的人，也会经常搞砸）。但哇，在不同的情况下，它会变得非常复杂，更不用说有大量的颜色变化，或者更糟糕的是，任意的组合了。

这是一个我使用 Dave 的测试程序的视频，您可以看到颜色如何在不同位置更新。