Re: [csswg-drafts] [mediaqueries-5] `prefers-contrast: high` media feature doesn't account for macOS and iOS (#2943)

Summary of where I think we're at.

# Syntax 1 (spec today):

```
prefers-contrast: no-preference | low | high | forced
```

* MacOS's + iOS's “increase contrast” options map to `high`
* Microsoft's forced colors maps to `forced` (not `high`), and possibly, in addition, depending on the actual colors used, may map to `low` or `high` as well.

Authors should write `@media (prefers-contrast: high) { }` when writing high contrast styles.
`@media (prefers-contrast) { }` (without a specified value) only denotes that the author has some preference about contrast, but not which. An appropriate way to respond to this is to decrease visual complexity (replace background images with plain colors,  turn off decorative gradients, or replace border images or box shadows with simple solid borders…)

# Syntax 2

```
prefers-contrast: no-preference | low | increase | forced
```

Same as 1, just renaming `high` to `increase`, to avoid suggesting it is necessarily very high.
Downside: It's a tiny little bit longer.

# Syntax 3 [interpretation A]:

```
prefers-contrast: no-preference | low |  increase | high | forced
```


Distinguishes between high and increase.
MacOS/iOS would map to `increase`.
Microsoft Windows's forced colors still maps to `forced`, but now may map to `low`, `high`, **or `increase`** depending on the actual colors chosen?

Upside: This lets authors capture the difference between “somewhat high” and “very high”.
Downside: Writing `@media (prefers-contrast: increase) or (prefers-contrast:high) { }` is tedious.

# Syntax 3 [interpretation B]:

Same syntax as above, but inspired by how the `color-gamut` media feature works, any UA that matches `high` must also match `increase`, since high is higher than increase.
Authors can just write: `@media (prefers-contrast: increase)` when they don't want to distinguish.

# Syntax 4
```
prefers-low-contrast: no-preference | low
prefers-high-contrast: no-preference | increase | high
[forced-colors remains a separate query]
```


These are defined so that only one of `prefers-low-contrast` and `prefers-high-contrast` can be truthy at the same time.


Upside: `@media (prefers-high-contrast) {}` is less verbose than `@media (prefers-contrast: increase) or (prefers-contrast:high) { }`.
Downside: It's not actually less verbose than syntaxes 1, 2, or 3[B].
Downside: There's no succint way to detect all the preferred contrast modes.

# Key question

Syntaxes 3 and 4 allow distinguishing between `increase` and `high`, but syntaxes 3[B] and 4 provide shortcuts because usually you don't actually want to distinguish and it's annoying to make common case verbose. Do we actually really need to distinguish between “somewhat high” and “very high but not forced colors”? If not, I see no downside to syntax 1 or 2.

-- 
GitHub Notification of comment by frivoal
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2943#issuecomment-665453076 using your GitHub account

Received on Wednesday, 29 July 2020 06:08:49 UTC