根据背景计算文本颜色（不仅限于黑色或白色）

Question

我目前正在尝试使用TypeScript构建一个功能，它可以自动生成符合AA WCAG 2或APCA标准的背景上的文本颜色。问题是，我能找到很多示例，通过将文本更改为白色或黑色来展示这一点。但问题是，我实际上希望保留文本中的颜色。例如，在coolors.co网站上：

coolors.co调色板生成器

我尝试过使用HSL并修改亮度值，但仍然无法可靠地生成良好的文本颜色。对此的任何帮助或线索将不胜感激！

以下是我想要使用它的示例：

带有自动生成文本颜色的动画卡片

- Entropy

---

你可以尝试将原始文本颜色与一定程度的深色（或黑色）或浅色（或白色）混合。如果你愿意使用一个库，这个mix函数可能会有帮助。 - gnerkus

你可以尝试将原始文本颜色与一定程度的深色（或黑色）或浅色（或白色）混合。如果你愿意使用一个库，这个mix函数可能会有帮助。 - undefined

Answer 1

简短回答

Munawwar Firoz开发了一个工具，可以实现这个功能，GitHub仓库。

较长回答

在apca-w3软件包（在npm和GitHub上）中，有一个reverseAPCA(Lc,Ys,'bg','Y')函数，它接受对比度和估计的屏幕亮度作为参数。在这个例子中，从BG中获取Ys值，然后返回一个灰度值或者与所需对比度匹配的Ys值。

通过使用HSLuv，您可以从Ys值中重新添加色调，并添加一定程度的饱和度或色度。

过程

1. 确定起始颜色或目标颜色的色调和饱和度。

2. 计算已知颜色的Ys值。例如，我们的BG是0.85 Ys。

3. 将目标所需的Lc对比度值与前一步骤中的已知Ys一起发送给reverseAPCA()，同时还包括Ys所代表的颜色（背景或文本）以及所需的返回类型（'hex'、'color'、'Y'）。

  let textYs = reverseAPCA(60,0.85,'bg','Y');

// expected: textYs is 16.71

4. 将Ys (16.71) 转换为LCh_UV的L* (48)。 5. 使用此L*值和所需的色调来设置颜色。 6. 调整饱和度以保持颜色在“sRGB合法”范围内，即在sRGB范围内。请注意，可以根据apca-w3软件包中的输入模块，使用P3或Adobe替代sRGB。 我们正在开发一个新的reverseAPCA()函数，以返回多个可选的色彩方案。

- Myndex