Image processing 如何增加图像生成的颜色之间的对比度？ 一些细节：

我正在Framer中制作一个小型原型，某种壁纸应用程序。我使用vibrant.js自动从图像中选择颜色，为我的界面添加一点色彩。我使用两种鲜艳的颜色配置：“暗色调”作为背景，而“鲜艳色调”用于活动控件/重音等

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

盲目编辑颜色。 我将它们转换为

hsl

，并显式设置

s

和

l

值

s: .2, l: .2  #  DarkMuted

s: .6, l: .8  #  Vibrant

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

您可以找到成对的屏幕截图来显示“vibrant.js”返回的“原始”颜色对与调整了s和l值的颜色之间的差异

我已经在另一个论坛上讨论过，如果可以对颜色进行自动调整，对某些颜色范围的感知偏差进行规范化。答案是“几乎不可能”

我想说主观上可接受的上色率约为65%，但结果太不可预测了。由于这是一个自动解决方案，我不能太依赖它

所以我决定用另一种方式来处理：

生成一组颜色并过滤一个 这里的问题是：

我还没有发现如何使用vibrant.js为每个配置文件生成一种以上的颜色

此外，我还尝试了color小偷.js库来生成主色调的调色板，然后过滤我称之为“鲜艳”的颜色

但这里又出现了另一个问题——不是每个图像都有一组低于我的阈值的颜色。有些图像有彩色伽马或黑白，并且不返回任何内容

所以

• 我能否克服vibrant.js对每个配置文件1种颜色的限制获得一组“vibrant”颜色，然后选择一种符合我要求的颜色

• 或者，也许有另一个更好的解决办法

---

有一个关于颜色间最小对比度（WCAG）的规范，您可以找到它。因此，一个可能的策略是使用vibrant.js提取颜色，然后可以使用函数检查对比度。您可以找到一个指南来构建一个函数来检查颜色对比。最后一步可能是基于颜色对比度函数的结果生成具有良好对比度的颜色变化。您可以使用生成变体。
您找到解决方案了吗？

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