3

I'm currently trying to build a feature in typescript that automatically generates a text color that works on top of a background that follows the AA WCAG 2 or APCA standards. The problem is that I can can find lots of examples that show this by changing the text to either white or black. The issue is that I want to actually still preserve the color in the text. For example on the coolors.co site:

coolors.co palette generator

I've tried using HSL and modifying the lightness value, but I still have issue getting it reliably generating good text colors. Any help or leads on this would be much appreciated!

Here's what I'm trying to use it for:

anime card with auto generated text colors

Entropy
  • 31
  • 3
  • 1
    You could try blending the original text color with some degree of a dark color (or black) or a light color (or white). If you're open to using a library, this [mix](https://docs.thi.ng/umbrella/color/functions/mix.html) function might be helpful. – gnerkus Jul 18 '23 at 08:25

0 Answers0