CSS contrast-color()函数简介

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12109
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、无障碍访问专用颜色函数

CSS contrast-color()函数是专为无障碍访问设计的。

WCAG – Web Content Accessibility Guidelines（Web 内容无障碍指南）中有个概念叫做最小对比度（minimum contrast），意思是前景色和背景色的对比度一定不能小，否则色弱的用户会看不清楚文字，造成阅读障碍。

比方说很常见的，白底背景上千万不要是要颜色比较淡的灰色字。

实际上，由于淡灰色文字比较有设计感，广大的视觉设计师乐此不疲使用特别淡的灰色文字，实际上，这种设计是不友好的，我就遇到过公司老板级别的人反馈怎么文字都不见了，实际上是由于对比度太低，显示器没能很好渲染出来。

contrast-color()颜色函数可以根据提供的颜色，自动返回对比度最友好的颜色。

注意，说的是对比度最友好的颜色，而不是反相，这是有根本区别的。

contrast-color()返回的色值只能是白色white或者黑色black。

语法使用示意：

contrast-color(red)
contrast-color(var(--backgroundColor))

二、效果示意

眼见为实，下面的demo是实时渲染的，RSS订阅的文章应该是看不到效果的，可以访问原文体验：

其中，按钮背景色和文字颜色代码如下：

button {
  background-color: var(--button-color, black);
  color: contrast-color(var(--button-color, black));
}

可以看到，随着颜色的选择，文字颜色会自动匹配白色或者黑色，保证对比度都在一个合适的范围内。

而在之前，相关的实现需要大量的代码，已经巧妙使用颜色的边界特性才能实现。

详见此文：CSS文字和背景color自动配色技术简介

看了下日期，啧啧，已经是8年前的文章了。

兼容性

目前所有主流浏览器都已经支持了这个函数，如下截图所示：

可以麻溜的用起来啦，点个赞！

三、小兔子结语哗啦啦

在中国，只要是与无障碍访问相关的前端特性，一定是无人问津的，contrast-color()也不例外，因为缺少强制的法律约束，全靠自觉，也就是所谓的工程师的追求。

追求？这东西早些年还很看重，如今已经很少听到这个词了。

就比方说抖音Web端的视频上传页面，里面的问题多如牛毛，改动是很勤快，没几个星期就能看到一些变化，结果呢，越改越差，无力吐槽，有时候真想自己上去帮忙搞定。

那个封面制作，一开始套用模板，文字可以自定义，现在完全不行，文字内容数量一旦不一致，丑死了；那渲染，还有AI书封生成，从来没成功过，一直在loading，然后下面的缩略图也无法拖动，生成速度也一言难尽。

这种水平，莫不是代码都是AI生成的？看不到一点追求！

扯远了，回到这里。

contrast-color()还是需要传递色值才能返回黑白，还是弱了点，如果就这种程度，我觉得以后很少会有前端人员使用它。

要是它可以自动识别背景，不仅是颜色，也可以是图片这些，然后自动配色，那倒是值得称赞一番。

比方说字幕颜色使用白色还是黑色，对吧，要是可以自动识别，这个函数就实用了。

眼下么，我觉得只能当做玩具使用了。

好了，懒得多扯淡了，感谢阅读，欢迎分享，么么哒。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12109

（本篇完）