I recently had a need to generate contrasting text colors for data visualization from user selected backgrounds that also looked somewhat decent. WCAG 2 doesn't have any advice for doing this algorithmically, and as far as I could tell no one had come up with a fast way to process colors to satisfy luminance and hue constraints, so I made one.
I took the HSL color space and swapped the lightness coordinate out with WCAG's perceived luminance formula, and derived a new color space, HSWL, from it. You can check out the changes in my fork: https://github.com/dabassett/TinyColor/tree/hswl . The getReadable function takes an input color and a contrast ratio and gives you back a new color (if one exists) that has the same hue and saturation and satisfies the contrast constraint. I also added the same kind of transformation methods that the other color spaces have to get the most utility out of it. Check out hswlToRgb if you want to see how it works under the hood.
In the demo there's a text sample box with some results from getReadable, and the main color stats box now updates the interior field and text to be shades of the input color. I think HSWL will be be particularly useful for designers, who can feed in colors and instantly get back high contrast tones without any guesswork or fiddling with calculators, as well as for people like me who need dynamic color design at runtime. Let me know if you're interested and I can make any changes you need and send a pull request.
Hey bgrins,
I recently had a need to generate contrasting text colors for data visualization from user selected backgrounds that also looked somewhat decent. WCAG 2 doesn't have any advice for doing this algorithmically, and as far as I could tell no one had come up with a fast way to process colors to satisfy luminance and hue constraints, so I made one.
I took the HSL color space and swapped the lightness coordinate out with WCAG's perceived luminance formula, and derived a new color space, HSWL, from it. You can check out the changes in my fork: https://github.com/dabassett/TinyColor/tree/hswl . The getReadable function takes an input color and a contrast ratio and gives you back a new color (if one exists) that has the same hue and saturation and satisfies the contrast constraint. I also added the same kind of transformation methods that the other color spaces have to get the most utility out of it. Check out hswlToRgb if you want to see how it works under the hood.
In the demo there's a text sample box with some results from getReadable, and the main color stats box now updates the interior field and text to be shades of the input color. I think HSWL will be be particularly useful for designers, who can feed in colors and instantly get back high contrast tones without any guesswork or fiddling with calculators, as well as for people like me who need dynamic color design at runtime. Let me know if you're interested and I can make any changes you need and send a pull request.