[css-color-6] Let's finally settle contrast-color() syntax
Nobody has claimed this yet.
- 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:
- Do we want to keep this syntax or change it?
- What should the keywords be?
- 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
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 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