如何增加图像产生的颜色之间的对比度？

Question

一些细节：

我在用Framer做一个小原型，一个壁纸应用程序。我使用vibrant.js自动从图像中挑选颜色，为我的界面添加一点色调。我使用两个生机勃勃的颜色配置文件："DarkMuted“--用于背景和”生机勃勃“--用于活动控件/口音等。

不幸的是，颜色组合有时看起来很枯燥和不稳定，活性元素没有我想要的那么突出。所以我的第一个决定是

盲目地编辑颜色。

我将它们转换为hsl，并显式地设置s和l值。

s: .2, l: .2  #  DarkMuted

s: .6, l: .8  #  Vibrant

这个在两者之间创建了足够的对比度，但也有一个缺点:有时颜色看起来有点过饱和和扭曲的(与输入相比)。

通过这个链接，您可以找到一对屏幕截图，以显示"vibrant.js“返回的”原始“颜色对与调整后的s和l值的颜色之间的区别。

我已经在另一个论坛上已询问，如果可以应用自动调整的颜色，以规范化一些颜色范围的偏见。答案是“几乎不可能”。

我认为主观上的可接受色率是65%，但结果是太不可预测的。因为这是一个自动的解决方案，所以不能太依赖。

所以我决定换一种方法：

生成一堆颜色并过滤一种颜色

这里的问题是：

我还没有找到如何用生成每个配置文件的多个颜色

此外，我还尝试了color-thief.js库来生成一个主要颜色的调色板，然后过滤我所称的“充满活力的”颜色。

# Threshold values I used 
thr = {minL: .4, maxL: .8, minS: .6, maxS: .8}

但是这里出现了另一个问题--并不是每一幅图像都有一组低于我阈值的颜色。有些图像有淡色伽玛或b/w，而不返回任何。

所以,

• 我能克服的vibrant.js限制，每个配置文件的1颜色有一堆“充满活力”的颜色，然后选择一种适合我的需求吗？
• 或者，也许还有--另一个/更好的解决方案--？

Answer 1

关于颜色之间的最小对比度(WCAG)有一个规范，您可以找到它的这里。因此，一个可能的策略是使用vibrant.js提取颜色，然后您可以检查与函数的对比。您可以找到一个指南来构建一个函数来检查颜色解析这里。最后一步可能是根据颜色对比函数的结果生成具有良好对比度的颜色变化。您可以使用这个库生成变体。