[css-color-6] color-contrast() with automatic continuous lightness adjustment
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
Current 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 for my use cases, if in addition to 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]? )
E.g.
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 Y also have the same L
- Y and L are comonotone (they 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the current color-contrast() definition at the linked CSS Color 5 specification section, then compare it with the proposed syntax and continuous lightness-adjustment behavior in this issue. Done requires an agreed specification change covering the adjustment direction, minimum contrast, and fallback behavior.
Written by the indexing model from the issue text.
Assessment
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100