Gamut mapping

[romainmenke]

Description

CSS Color 4 describes how out of gamut colors must be mapped to an RGB destination.
However no browser currently implements this.

Browsers however do implement various features that give access to wide gamut and out of gamut colors.

Because the general syntax is supported, it is not possible to use feature detection. @supports (color: oklch(<some out of gamut color>)) {} only indicates if the syntax is supported, not if the browser fully and correctly supports the specific value.

The longer the delay to shipping gamut mapping the more problematic it will be for developers and end users.

If there was a way to do feature detection developers could use known fallback mechanics and use progressive enhancement. Without this developers will have to wait for usage of the affected browser versions to drop below specific thresholds. The longer browsers wait with implementation, the more versions are affected, the longer developers will have to wait.

Specification

https://www.w3.org/TR/css-color-4/#css-gamut-mapping

Open Issues

No response

Tests

https://wpt.fyi/results/css/css-color/parsing/relative-color-out-of-gamut.html?label=master&label=experimental&aligned&q=gamut

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No response

Browser bug reports

https://bugs.chromium.org/p/chromium/issues/detail?id=1439722&q=gamut%20mapping&can=2
https://bugzilla.mozilla.org/show_bug.cgi?id=1847503
https://bugs.webkit.org/show_bug.cgi?id=261603

there are more, but these are some I know of

Developer discussions

No response

Polls & Surveys

No response

Existing Usage

No response

Workarounds

postcss-preset-env can convert out of gamut colors with the correct gamut mapping method.

However this restricts these features to static values.
Any value coming from JavaScript, user input or var() can not be converted with build tools.

Accessibility Impact

Because clipping (the current flawed behavior) can produce much darker colors than intended it is highly likely that contrast of content is affected, making content less accessible.

Correctly implementing gamut mapping will also be needed for contrast-color() which is first and foremost an accessibility feature.

i.e. fixing this will fix some issues and will make future accessibility work easier.

Privacy Impact

none

Other

Technically this is part of css-color-4 which is already a focus area.
However given the nature of the issue I think it would be best to call specific attention to it.

[LeaVerou]

Related: https://twitter.com/LeaVerou/status/1711223584603901975

[dholbert]

Possibly just a subset of #426 (which includes the linked WPT test)

[romainmenke]

Possibly just a subset of #426 (which includes the linked WPT test)

Tests need to cover :

• any color function that can directly express wide gamut colors (e.g. color(), lch(), ...)
  • including relative color syntax
• any color function that can result in wide gamut colors (e.g. color-mix())
• any gradient function
• ...

challenges :

• gradients are tricky to test in general
• gamut mapping is supposed to kick in late, so there aren't many cases where the gamut mapped values are exposed and testable
• gamut mapping is supposed to be hardware specific, so even when gamut mapped values are exposed, it would still be flaky to compare them with static values

[svgeesus]

Possibly just a subset of #426 (which includes the linked WPT test)

Unrelated. The results of RCS are not gamut mapped at computed value time, only as used values.

[gsnedders]

We should probably have some discussion wrt our infrastructure here. Currently the macOS runs are running with sRGB colour space at the system level, I don't know what the status of our Ubuntu images are? @jgraham? (This clearly doesn't help with testing things that are expecting output on a wider-than-sRGB either way, but that would at least mean we can deterministically test the sRGB output subset.)

[svgeesus]

Perhaps we need a flag for any tests that assume a wide-gamut screen or that require an sRGB screen.

[svgeesus]

Maybe also add some authoring advice, for example when testing wide gamut color formats, start with an sRGB color then convert it for the test, so the displayed result does not need gamut mapping on an sRGB test screen.

[wpt-interop]

Thank you for proposing Gamut mapping for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

We are still missing test infrastructure for testing Gamut mapping. Please note this should not be taken as a comment on the technology as a whole, and once the test infrastructure issues are resolved, we would welcome this proposal being resubmitted for a future round of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.