w3c / w3c/csswg-drafts

[css-color-6] color-contrast() with automatic continuous lightness adjustment

Open
#5,153 4 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

a11y-tracker Closed Deferred css-color-6
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.