logoalt Hacker News

seanwilsonyesterday at 11:10 AM1 replyview on HN

> This process means that there is some error. For example, ideally, a color with L=50 looks twice as bright as a color with L=25. Except, with very strongly saturated colors like red, this isn’t actually the case in any of these color spaces.

A benefit of doing it this way is you account for color blindness and accessibility e.g. all colors at L=50 will have the same WCAG contrast ratio against all colors at L=25. This helps when finding colors with the contrast you want.

Related, I'm working on a color palette editor based around creating accessible palettes where I use the HSLuv color space which has the above property:

https://www.inclusivecolors.com/

You can try things like maxing out the saturation of each swatch to see how some some hues get more bold looking at the same lightness (the Helmholtz-Kohlrausch effect mentioned in the article I think). You can also explore examples of open source palettes (Tailwind, IBM Carbon, USWDS), where it's interesting to compare how they vary their saturation and lightness curves per swatch e.g. red-700 and green-700 in Tailwind v3 have different lightnesses but are the same in IBM Carbon (the "Contrast > View colors by luminance only" option is interesting to see this).


Replies

mark-ryesterday at 1:00 PM

I've found the WCAG contrast ratio to be almost worthless. Unless you have a legal requirement to use it, I'd stay away.

show 1 reply