w3c / w3c/csswg-drafts

[css-color-6] Let's finally settle contrast-color() syntax

Open
#7,937 14 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-color-6 Needs Naming (Request to Bikeshed)
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

@fantasai and I did a fair bit of work on css-color-6 these past couple of days, but until the WG settles on syntax, we cannot have something shippable for contrast-color(), not even for the restricted version we agreed to pull into css-color-5.

For background, the previous, confusing syntax was like:

contrast-color(wheat vs bisque, var(--accent-color), olive, sienna, color(display-p3 0 1 0), maroon to wcag(4.5))

The current syntax is (keywords ridiculous on purpose, as we resolved to have them undefined):

contrast-color(wheat tbd-bg wcag(4.5), bisque, var(--accent-color), olive, sienna, color(display-p3 0 1 0), maroon)

We should a) resolve on three, largely (but not entirely) orthogonal things:

  1. Do we want to keep this syntax or change it?
  2. What should the keywords be?
  3. Do we allow authors to omit the keyword to specify a default (background)?

Problems with current syntax and alternative syntaxes

If <target-contrast> is just an algorithm, the current syntax is a bit hard to parse for humans as there are a lot of sequential keywords:

contrast-color(wheat tbd-bg wcag2, bisque, var(--accent-color), olive, sienna, color(display-p3 0 1 0), maroon)

OTOH how often are colors specified in keywords? Usually authors use hex or functional notations, so maybe this is not a valid concern. Regardless, another syntaxe that @fantasai and I explored was:

contrast-color(wheat tbd-bg wcag2 / bisque var(--accent-color) olive sienna color(display-p3 0 1 0) maroon)

Foreground/background keyword options

One thing to keep in mind for this is that the base color being the background will be far more common.

Foreground Background Pros Cons
foreground background Descriptive and unambiguous Too long
fg bg Concise Abbreviations
text base Concise without being abbreviated foreground is not always text, base is too vague
under over Concise, reads naturally "x over y, z" has entirely opposite meaning to "over x, y, z" so order needs to matter and we cannot use commas because "over x, y, z" looks like a single list

Should we have a default (background)?

In the majority of cases, the base color will be a background, rather than a foreground. Which brings us to the question: should the syntax allow for neither keyword to be specified?

The advantage of having a default is that the syntax becomes concise regardless of which keyword pair we go with, in which case we can just go for a long descriptive keyword for foreground (like foreground) and be done with it. Having sensible defaults is a tenet of good usability.
The problem with having a default is that authors do not learn to think about the distinction, so in practice they may not specify it even when they have a foreground.

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 CSS Color 6 #colorcontrast section and review the linked issues 7361, 7354, and 7359 for the prior syntax and resolutions. This issue is done only when the Working Group settles the syntax, keyword names, and whether the background keyword may be omitted.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.