W3C home > Mailing lists > Public > public-css-archive@w3.org > June 2020

[csswg-drafts] [css-color-5] color-contrast() with automatic continuous lightness adjustment (#5153)

From: Lea Verou via GitHub <sysbot+gh@w3.org>
Date: Tue, 02 Jun 2020 23:11:00 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-629572945-1591139459-sysbot+gh@w3.org>
LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color-5] color-contrast() with automatic continuous lightness adjustment ==
Definition: https://drafts.csswg.org/css-color-5/#colorcontrast

While providing a list of colors and picking the one that satisfies a certain contrast constraint is useful for some use cases, it is quite a hassle for others. In virtually every case I've used a contrast calculator, I had a fairly good idea of what colors I wanted, and I just adjusted the lightness of one of the two until it passed WCAG. To use the `color-contrast()` in its current form would basically mean precomputing a list of various lightnesses, which is suboptimal.

I would find it far more useful if instead of a list of colors, I could provide just a background and foreground color, optionally a min contrast ratio (would default to 4.5), and optionally a direction to adjust the foreground color (would default to closest).

I.e. something like this:

color-contrast() = color-contrast([lighten | darken]? <color> on <color> [to <number>:1]? )


color-contrast(lighten rebeccapurple on wheat to 3:1);

If `lighten` or `darken` are provided and white/black respectively don't pass the minimum contrast, we could either go the other direction, or just return white/black.

Of course lightness would be LCH lightness, not HSL lightness. And before you point out that contrast is relative luminance (Y) based and not lightness based: Yes, I'm aware, but:

- Two colors with the same RL also have the same L
- Y and L increase/decrease together, albeit at different rates. I.e. For any colors C1, C2, if Y1 > Y2 then L1 > L2 and vice versa.

So, if there is a lighter/darker color that will pass a given contrast ratio, increasing/decreasing LCH lightness will find it.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5153 using your GitHub account
Received on Tuesday, 2 June 2020 23:11:02 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:09 UTC