[csswg-drafts] [css-color-6] `contrast-color()` syntax proposal (#7954)

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

== [css-color-6] `contrast-color()` syntax proposal ==
```
contrast-color() = contrast-color(<color-role>? <color> / <contrast-target> <contrast-algorithm> <color>#{2,})

<color-role> = background | foreground
<contrast-algorithm> = auto | wcag | lstar | apca | weber | michelson
<contrast-target> = auto | max | more | less | <custom-contrast-target>
<custom-contrast-target> = wcag21 ratio | APCA ratio | Lstar ratio | Weber ratio | Michelson ratio | <percentage>]
```

This proposal intends to empower the [prefers-contrast](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-contrast) media query by creating a function that implements the options of the media query, is simple to get started with, but can scale to advanced needs of authors and users. I feel, and others have provided feedback, that the current proposal is becoming unwieldy for the average developer and is lacking an automatic choice feature.

Since contrast is such a visual thing, I needed to build an interactive syntax so I could see and feel out the syntax results. I chose ObservableHQ as it allows creating transparent and inspectable logic and documentation, plus the ability to make things interactive and real time.

**Interact with the syntax, read finer details about the implementation, all here:**
https://observablehq.com/@argyleink/contrast-color

Demo usage of the interactive proposal:

https://user-images.githubusercontent.com/1134620/197878368-1b30e1f2-b7de-496b-83b4-3692cb81cec3.mp4

### Some notable things to observe in the proposal and video are:
1. auto discovery of nearest in hue color match (no color list required) `contrast-color(#eee)`
1. background is assumed but foreground can be specified `contrast-color(foreground #eee)`
1. browsers choose the default algorithm when one isnt specified `contrast-color(#eee)`
1. authors can specify the algorithm, but it's a request, and the browser can fallback to it's default if not equipped with the request algorithm `contrast-color(#eee / apca)`
1. the contrast target accepts `prefers-contrast` media query keywords like `more` and `less` and maps them to the algorithm's equivalent of contrast, but if left out of the function (`auto`) the browser uses the users current contrast preference from the OS `contrast-color(#eee / more wcag21)` same as `contrast-color(#eee / 7 wcag21)`
1. the contrast target accepts `max` as a keyword, simplifying the request for `white` or `black` depending on which contrasts more `contrast-color(#eee / max)`

The goal is to encourage usage of `auto` so users preferences are respected and remain dynamic. This means most usage of the function will be short and sweet. 

```css
.icon {
  background: #23c9c8;
  color: contrast-color(#23c9c8);
}
```

But, if experts want to, they can grab the reigns and really specify what they want like:

```css
.icon {
  background: #23c9c8;
  color: contrast-color(background #23c9c8 / 4.5 wcag21 bisque, var(--accent-color), olive, sienna, color(display-p3 0 1 0), maroon);
}
```

From presenting the previous syntax a few times to groups of devs, staying current with the current issues logged against this contrast function, and wanting the previous WG resolutions on contrast preference handling, this spec proposal attempts to sum as much of it up as it can, while being terse and approachable. 

There's plenty of details to talk about, but this proposal feels closest to the desirable developer experience I acquired in feedback. It also aligns functionality more with existing contrast resolutions made by the CSSWG. I'd like to present the proposal and accept questions about details. 

The Observable document has a section called [Explanations and Reasoning](https://observablehq.com/@argyleink/contrast-color) that should help answer a few of the common questions:

![Screen Shot 2022-10-25 at 2 10 51 PM](https://user-images.githubusercontent.com/1134620/197882710-276d481c-ee5e-48ae-b6d4-f89f89a60370.png)

Have fun! I feel like it's quite nice having something visual and playful to work with instead of just reading theoretical syntax over and over. You can go try it out, see results, and discover the syntax you'll want in your project.

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


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

Received on Tuesday, 25 October 2022 21:14:05 UTC