[csswg-drafts] [css-color-6] Let's finally settle contrast-color() syntax (#7937)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color-6] Let's finally settle contrast-color() syntax ==
@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](https://github.com/w3c/csswg-drafts/issues/7361).

For background, the previous, [confusing](https://github.com/w3c/csswg-drafts/issues/7354) syntax was like:

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

The [current syntax](https://drafts.csswg.org/css-color-6/#colorcontrast) is (keywords ridiculous on purpose, as we [resolved](https://github.com/w3c/csswg-drafts/issues/7359#issuecomment-1203072807) to have them undefined):

```css
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:

```css
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](https://almanac.httparchive.org/en/2021/css#fig-23), so maybe this is not a valid concern. Regardless, another syntaxe that @fantasai and I explored was:

```css
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](https://w3ctag.github.io/design-principles/#:~:text=Abbreviations%20are%20generally%20avoided) |
| `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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7937 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 21 October 2022 14:48:21 UTC