Color Spaces & CSS Color Functions

[una]

Description
Functions that enable more dynamic color theming on the web platform. They also rely on expanded color spaces (LAB, LCH, P3).

• color-mix: This function takes two <color> specifications and returns the result of mixing them, in a given <color-space>, by a specified amount.
• color-contrast: This function takes, firstly, a single color (typically a background, but not necessarily), secondly, a list of two or more colors, and thirdly, an optional target luminance contrast [WCAG21]. It selects from that list the first color color to meet or exceed the target contrast. If no target is specified, it selects the first color with the highest contrast to the single color.

Specification
CSS Color 5

Tests
TBD

Rationale
Web developers, design tools and design system developers often use color functions to assist in scaling the design of their component color relationships. With the increasing usage of design systems that support multiple platforms, and increased need to support user preferences like dark themes, dynamic color theming and automated accessibility functions become really handy.

Currently Sass, calc() on HSL values, or PostCSS is used to do this. Preprocessors are unable to work on dynamically adjusted colors, all current solutions are restricted to the sRGB gamut and to the perceptual limitations of HSL (colors are bunched up in the color wheel, and two colors with visually different lightness, like yellow and blue, can have the same HSL lightness).

The perceptually uniform lch() colorspace is used for mixing by default, as this has no gamut restrictions and colors are evenly distributed. However, other colorspaces can be specified, including hsl() or srgb if desired.

[jensimmons]

Tests:

• Color mix tests
• LAB
• LCH
• need tests for color-contrast
• need tests for P3

[gsnedders]

need tests for P3

grep is finding a bunch:

https://wpt.fyi/results/css/css-color?label=master&label=experimental&aligned&q=predefined-005.html%20or%20color-function-parsing.html%20or%20xyz-005.html%20or%20lab-008.html%20or%20prophoto-rgb-005.html%20or%20greensquare-display-p3-ref.html%20or%20rec2020-005.html%20or%20lch-008.html%20or%20predefined-006.html

[foolip]

It looks like color-contrast() is the only bit with no tests at all in WPT yet, then.

BCD gave a clue about WebKit support, and I found this test:
https://github.com/WebKit/WebKit/blob/b56dc7b9643ad44de6f6194df3cb06336e879ca1/LayoutTests/fast/css/parsing-color-contrast.html

Any chance that could be converted and upstreamed to WPT, if this proposal is accepted?

[foolip]

cc @fserb, who I serendipitously learned has some interest in this for next year.

[nt1m]

https://webkit-search.igalia.com/webkit/search?q=color-mix&path=LayoutTests&case=false&regexp=false
https://webkit-search.igalia.com/webkit/search?q=color-contrast&path=LayoutTests&case=false&regexp=false

[weinig]

PRs up for a number of these:

• color-mix() - Add tests for CSS Color 5 color-mix() wpt#31902
• color-contrast() - Add tests for CSS Color 5 color-contrast() wpt#31903

Also a few CSS Color 4 ones:

• relative colors - Add tests for CSS Color 5 relative color syntax wpt#31904
• reference tests for new colors - Update tests for new color spaces in CSS Color 4 wpt#31901
• parsing and serialization for new colors - Update basic color parsing and serialization tests to cover the CSS Color 4 color grammar wpt#31905

[foolip]

Can someone look over w3c/csswg-drafts#6824 and see how that impacts Interop 2022? @weinig has been upstreaming tests to WPT (web-platform-tests/wpt#31901 + web-platform-tests/wpt#31902 + web-platform-tests/wpt#31903 + web-platform-tests/wpt#31904) but are there more tests that need to be added for Interop 2022?

[svgeesus]

need tests for P3

There are several. Some are -predefined- because P3 is one of the predefined colorspaces.
Also some of the tests are testing P3 to Lab, P3 to OKLab, OKLab to P3, or Lab to P3 conversions.

[svgeesus]

Is this area a problem for web developers?

Yes. Modern displays on laptops, cellphones are all wide gamut and are converging on the Display-P3 colorspace (originally from Apple, a derivative of DCI P3 colorspace used in digital cinema projection). Modern TVs are also wide gamut, again using the P3 colorspace, as required by the Ultra HD Alliance and VESA DisplayHDR specifications. Modern gaming consoles are also wide gamut.

So, consumer electronics and native applications are using wide gamut while the Web is trapped into an sRGB-only world. How bad is that problem? Well, the display-p3 colorspace is 50% larger (by cubic Lab units) than sRGB. That means that one-third of all colors that modern displays can produce (the most vivid and saturated colors) can't be used on the Web.

So what? Well, it increases the pressure for app developers to go native rather than making a PWA. And a multi-country survey of online returns by Narvar found that the most common reason for a return (34% of returns to Amazon, and 46% of returns to other online retailers, was “The size, fit or color was wrong”. Because the color of real-world items often doesn't fit in the sRGB gamut.

But now, CSS Color 4 defines how to use those colors, and is implemented right now in Safari 15. And 2D Canvas defines how to use those colors, (same way as in CSS Color 4) and is implemented right now in Chrome 94. So we have specifications and we have implementer interest.

And we also need to be able to do things with those colors. CSS Images 4 now lets authors specify the color space for gradients. CSS Color 5 defines color mixing and relative color syntax, which lets authors do things dynamically that they used to have to hack in pre-processors like Sass (with a static result because computation was on the server).

Which means the Web is starting to catch up to native in this important area, which makes it ideal for a 2022 Interop push.

[jensimmons]

2D Canvas defines how to use those colors, (same way as in CSS Color 4) and is implemented right now in Chrome 94.

Wide gamut color, including Display-P3, for Canvas shipped yesterday in Safari 15.2.

[jensimmons]

Could someone pull in the PRs & label these tests?

[nt1m]

@jensimmons I just labeled the ones I thought that were relevant in the css/css-color directory: https://wpt.fyi/results/?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&q=label%3Ainterop-2022-color

(Note that you can label yourself on wpt.fyi using "Triage Mode" with an user-friendly UI).

Here are the PRs that need reviewing: https://github.com/web-platform-tests/wpt/pulls?q=is%3Aopen+is%3Apr+label%3Acss-color (I did pull a few trivial ones in fwiw, but I feel like the remainder should be up for @svgeesus or @weinig to review)

Some thoughts that came to mind while tagging the tests:

• We're missing animation/interpolation tests (what happens when you animate from a color space to another with different gamuts, etc.)
• Tests for CSS gradient interpolation in different color-spaces (which I believe @weinig was working on in WebKit), e.g. linear-gradient(in srgb, red, blue), not sure that's part of this issue though.
• Tests exercising CSS variables (though maybe that's not too useful)

[svgeesus]

We're missing animation/interpolation tests (what happens when you animate from a color space to another with different gamuts, etc.)

Interpolation is well defined but Transitions and Animations have not yet been updated to use this. So interpolation is in gamma-encoded sRGB, and handling of non-legacy colors is currently undefined. This needs spec work to define a syntax, before tests can be written.

(Whether two color spaces have different gamuts does not matter, btw)

Tests for CSS gradient interpolation in different color-spaces (which I believe @weinig was working on in WebKit), e.g. linear-gradient(in srgb, red, blue), not sure that's part of this issue though.

This was a relatively recent addition to CSS Images 4: they now use the color-interpolation syntax:

• linear gradients
• radial gradients
• conic gradients

So the spec is clear, although the usual problem with writing pixel-accurate reftests for gradients remains. We already had that problem with srgb-only gradients.

Tests exercising CSS variables (though maybe that's not too useful)

We definitely need those. It is now common to get a bunch of css variables that define colors, which may well be imported from another stylesheet so you don't know what syntax they use. Testing that they do the same as specifying the color directly is useful.

[nt1m]

Tests for CSS gradient interpolation in different color-spaces (which I believe @weinig was working on in WebKit), e.g. linear-gradient(in srgb, red, blue), not sure that's part of this issue though.
[...]
So the spec is clear, although the usual problem with writing pixel-accurate reftests for gradients remains. We already had that problem with srgb-only gradients.

I guess the question for that specific item was more: Is this part of the interop 2022 effort? and should any potential tests be tagged? The issue specifically mentions the "CSS color 5" spec, while the gradient interpolation stuff is part of "CSS images 4". Maybe @una, @jensimmons or @foolip can answer this.

We definitely need those. It is now common to get a bunch of css variables that define colors, which may well be imported from another stylesheet so you don't know what syntax they use. Testing that they do the same as specifying the color directly is useful.

I was also thinking edge cases like using variables within color functions like color-mix()/color-contrast() or even color(). Seeing if invalidation works properly in these cases when you switch variable values for instance. I suspect usages within color-mix/color-contrast wouldn't be uncommon either.

[foolip]

@nt1m is the fuzzy reftest feature enough to deal with the differences in gradient interpolation?

Also, the PRs linked in #20 (comment) are all merged now, are all of those tests already labeled?

[nt1m]

is the fuzzy reftest feature enough to deal with the differences in gradient interpolation?

I guess so.

Also, the PRs linked in #20 (comment) are all merged now, are all of those tests already labeled?

@weinig or @svgeesus would be a better person to look/label the relevant tests.

[svgeesus]

I have enabled the inlined WPT feature on CSS Color 4 and CSS Color 5 so now each tested section makes clear what tests exist, the pass status, and allows the tests to be run.

See for example the color property

In addition, if a new test is added tagged to Color 4 or Color 5, then I get a Bikeshed build failure to alert me to add it to the spec.

[argyleink]

#6168 inquires about use-time vs parse-time for currentColor, which would make great tests for interop efforts.

There's been chats too that interpolation and inheritance tests could help a lot as well.

[foolip]

There's been chats too that interpolation and inheritance tests could help a lot as well.

@argyleink can you elaborate on what is needed here? Is interpolation between colors in different color spaces possible, or should this just test within color spaces? And what about inheritance, what kinds of tests are needed?

[svgeesus]

Is interpolation between colors in different color spaces possible

Yes, certainly it is possible, and fully described in CSS Color 4.

[svgeesus]

But it is mostly other specifications (like CSS Images 4, for gradients) that actually apply the color interpolation.

[svgeesus]

The CSS Color 5 color-contrast() function is part of Interop 2022, and there was recently a formal objection on it because it uses the flawed WCAG2.1 luminance contrast algorithm as the only option. Thus, CSS WG discussed this are resolved to move color-contrast() to CSS Color 6, which has been done, and to rework it to use better, more reliable color-contrast algorithms.

Thus, the WPT tests for color-contrast() should be un-tagged from Interop 2022.

color-contrast-001.html
parsing/color-contrast-computed.html
parsing/color-contrast-invalid.html
parsing/color-contrast-valid.html

(I am about to do a PR for that)

However, not to be the bearer of solely bad news, in that same discussion CSS WG resolved to add color-mix() and interpolation of non-sRGB colors in gradients, both of which are in Interop 2022, to the Snapshot 2022 safe-to-ship pre-CR list

[svgeesus]

(I am about to do a PR for that)

The Interop2022 tag doesn't seem to be in the test itself, where is the tagging info stored?

[svgeesus]

@foolip help please on (un)tagging color-contrast() tests?

[foolip]

@svgeesus sorry I missed this, I look for new issues ahead of every meeting but not notifications on existing issues. I've filed #92 for the next meeting.