我是如何实现网页颜色自适应的 点击关注公众号，“技术干货”及时达！前言不知大家有没有留意过，当前大部分 App 或网页中，很少存在允许用户完全自定义要展示信息的颜色的功能。 例如在钉钉的自定义表情中，只允许用户从一组预设的配色中随机切换： 再比如笔记应用 Notion 虽然允许用户改变文本颜色，但也只允许在一组预设色值中选取： 图片文件原因无它，配色，不是一件容易事。 对于大众用户而言，没什么颜色理论知识，很可能挑出来的颜色在应用中很难看、看不清，这会极大的影响用户的使用体验（即使是用户自己造成的）。 因此大部分产品选择的做法是提供一组预先检验过的、不会对用户阅读造成困扰的颜色，放在应用中供用户挑选。 今天我来斗胆挑战一下这个业界难题。 在这篇文章中将会探讨两个具体问题： 如何让文本颜色自适应背景色如何允许用户完全自定义主题色，同时保证可阅读性文本颜色自适应背景色在下面这张图中，文本的颜色默认都是黑色的，背景色设置了多个明暗不同的颜色。可以看到对于暗色的背景色，此时文本可阅读性特别差（不太明显，想看清楚会很累）。 image.png转存失败，建议直接上传图片文件如果能够自动根据背景色的明暗，决定使用白色还是黑色的文本，那便是实现了文本颜色的自适应了。 首先介绍下借助第三方库实现的方案。 第三方库实现color 是 JavaScript 生态中在颜色处理方面最流行的库，它有诸多功能：颜色空间转换、颜色通道分解、获取对比度、颜色混合…… 在文本颜色自适应这个场景中，最为方便的两个 API 是 isDark() 和 isLight() ，它们分别用来表示一个颜色是否为深色、是否为浅色。 实际应用： importColorfrom'color' constBgColors=['#f87171','#fef08a','#042f2e',...] exportdefaultfunctionPage(){ return( main {BgColors.map((bg)=( div style={{ background:bg, //根据背景是否为深色决定文本用白色还是黑色 color:Color(bg).isDark()?'white':'black' }} 恍恍惚惚 /div ))} /main ) } 实际效果： image.png转存失败，建议直接上传图片文件mix-blend-mode: differencemix-blend-mode: difference 用于指定一个元素的颜色与背景色进行「差值」混合，可以使用如下公式表达： # || 表示取绝对值 # 最终元素显示的颜色 = |元素原有的颜色 - 背景色| result_color = | element_color - background_color | 例如： 文本颜色为白色 rgb(255 255 255) 背景色为蓝色 rgb(0 0 255) ，最终文本颜色为黄色 rgb(255 255 0)文本颜色为黑色 rgb(0 0 0) ，此时无论背景色是什么颜色，最终文本的颜色一定和背景色完全相同，因为 | 0 - x | = x下面来看个实际的 demo，这里我们让文本颜色为白色，背景色动态调整： 屏幕录制2024-08-31 14.22.02-3.gif可以看到这个方案会有如下问题： 当背景色为灰色时，文本的颜色和背景色很相似，对比度低，可阅读性差当背景色为彩色时，混合出来的颜色也是彩色，而且颜色比较脏，不太美观CSS 相对颜色以 CSS 颜色函数 rgb() 举例，相对颜色的语法是通过 from 关键词扩展了该函数的能力： color:rgb(fromredrgb); 由于 red 的 RGB 是 (255, 0, 0) ，因此后面的 r g b 值分别为 255 0 0 。对于 r g b 还可以调用 calc() 或其他 CSS 函数进一步处理。 除了 rgb() ， rgba() hsl() hwb() lch() 等等 CSS 颜色函数都是支持相对颜色语法的。 CSS 相对颜色语法带来的能力有调节亮度、调节饱和度、获取反转色、获取补充色……其中反转色就可以用于文本颜色自适应的场景中。 在上面 Demo 上，使用如下规则使文本的颜色为背景色的反转色： color:rgb(fromvar(--bg)calc(255-r)calc(255-g)calc(255-b)); 实际效果： image.png转存失败，建议直接上传图片文件可以看到虽然能一定程度上提升可阅读性，但是有些反转色奇奇怪怪的，和背景色搭配起来实在不美观，并不是特别推荐使用。 color-constractcolor-constract() 可以说是最适合文本颜色自适应场景的 CSS 函数了，用法简单，效果好！ color:color-constract(var(--bg)vscolor1,color2,...); 它的作用即从 vs 右边的一堆色值中，挑选一个和 vs 左边的色值对比度最大的返回。 如 color-constract(#ccc vs #000, #fff) ，由于 #ccc 是个浅灰色，色值和 #000 对比度更大，因此这个函数会返回 #000 。 很美好。 但是！这个函数现在几乎不能用！ image.png转存失败，建议直接上传图片文件目前只有 Safari 中能使用，而且必须开启相关的实验性功能 Flag 。 完全允许用户自定义主题色让文本的颜色根据背景色自适应，本质是在背景色（background）未知、前景色（foreground）有限的情况下，选择一个合适的前景色，使页面的可读性得到保障。 在上面的 Demo 中，背景色有淡紫色、淡黄色、深绿色、深棕色……前景色即文本的颜色只会有白色、黑色两种情况，依据背景色的明暗决定使用白色还是黑色。 相反的，我们讨论下前景色未知、背景色有限的情况。 看下这个实际应用场景： image.png转存失败，建议直接上传图片文件在这款应用中，支持明、暗两种主题，明亮主题为左边的白色（#FFFFFF），暗夜主题为右边的深蓝色（#020617），这是两个背景色；标签主题色（即前景色）支持用户自己设定，图中以红色（#FF0000）为例。 通过截图可以看到，红色在这两种背景色上展示效果都还不错，主要是因为他们的对比度足够。 红色 vs 白色，对比度：3.998红色 vs 深蓝色，对比度：5.045「要使页面的可读性得到保障，对比度至少要 3。」 如果允许用户完全自定义前景色，就不可避免的出现用户选择的颜色和背景色的对比度 3，这时页面阅读起来会很费力，影响用户体验。 下面给出两种解决方案。 及时给出提示允许用户完全自定义，意味着用户可以从色盘上选取任意颜色。当用户选取的颜色和背景色对比度 3 时，界面上可以给出适当提示，让用户自己决定用一个「难看的颜色」还是遵从应用的建议，选择一个对比度合理，在当前应用中可以和背景色合理搭配的颜色。 实际效果： 相关代码并没有太多难点，主要还是借助 color 库，通过 color.contrast(color2) 获取两个颜色之间的对比度实现，这里就不放代码了。 自动计算对比度安全的颜色另一种解决方案，就有点「强制」的意思了：在用户从色盘选色时，实时计算色值和背景色的对比度，如果 3 了，就使用 color.lightness() API 逐步的调整颜色的明暗，确保最后界面上使用的是安全对比度的色值。 核心代码： function calcLightColor(originColor: string) { const white = Color('#fff') let c = Color(originColor) // 对比度 3，循环迭代使颜色越来越暗 while (c.contrast(white) 3) { // lightness() 可以读取/赋值颜色的 HSL 中的亮度值 // 如果是计算暗夜模式下的安全前景色，这里应该是 + 1，即让颜色越来越亮 c = c.lightness(c.lightness() - 1) } return c.hex() } function calcDarkColor(originColor: string() { // ... } 实际效果： 可以看到当用户选择了偏白的颜色时，明亮主题中实际使用的是灰色作为前景色，当用户选了择偏黑的颜色时，也有同样的自适应处理。 总结在 2024 年的今天，CSS 看似已经足够强大，但是在颜色自适应类似的需求中还是略显不足，还好有 color 这个方便的 JavaScript 库帮助我们实现类似的需求。 无论背景色未知，还是前景色未知，只要设计界面时通过各种手段能保证前景色和背景色的对比度 3，那就可以保证界面的可阅读性。当然了，这里的安全对比度阈值是可以调整的，设为 3.5、3.75 都是可以的，但也非常不建议低于 3。 点击关注公众号，“技术干货”及时达！ 阅读原文