Skip to content

css.types.color.oklab and css.types.color.oklab: Browsers are not spec compliant, support is only partial. #26838

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pygy opened this issue May 19, 2025 · 5 comments · May be fixed by #26841
Labels
data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS info needed This needs more information to review or act on.

Comments

@pygy
Copy link

pygy commented May 19, 2025

What type of issue is this?

Incorrect support data (see below)

What information was incorrect, unhelpful, or incomplete?

The way browsers currently implement OKL* color spaces is not spec compliant and detrimental to accessibility.

The OKLab and OKLch color spaces have been designed with wide gamut and accessibility in mind, but the implementors skipped the accessibility aspects of the spec.

OKL* color spaces let users specify colors that are beyond what current displays are able to render.

In these situations, the spec says that the colors should be mapped using a specific algorithm that preserves the luminance and does its best to approach the saturation and chroma.

With a proper implementation, this lets authors design pages with a contrast between the text and the background that remains the same, no matter what display their users use.

With the current implementation, bad surprises are bound to happen.

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch is also concerned by this issue.

What browsers does this problem apply to, if applicable?

Chromium (Chrome, Edge 79+, Opera, Samsung Internet), Firefox, Safari

What did you expect to see?

I expect to see the current implementations marked as partially compatible, as they didn't implement OKL*, but a ShittyL* color space that is not accessible, but squats the name of the accessible one.

I expect to see a warning about these accessibility issues that discourages authors from using these color spaces or tells them to thread carefully when using them (staying in the sRGB gamut).

Did you test this? If so, how?

Visit https://vasilis.nl/dingen/bugs/oklch.html

The squares should be white and black per spec, they aren't in any browser.

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

Do you have anything more you want to share?

This is such a perfect example of systemic discrimination at work.

A system designed to be accessible ends up being implemented with poor accessibility and usability by one big actor, and everyone follows suit because it's easier.

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklab

MDN metadata

MDN page report details
  • Query: css.types.color.oklab
  • Report started: 2025-05-19T17:17:28.100Z
@pygy pygy added the needs triage This issue needs to be confirmed label May 19, 2025
@github-actions github-actions bot added the data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS label May 19, 2025
@caugner
Copy link
Contributor

caugner commented May 20, 2025

Thanks for reporting, and please make sure to follow our Community Participation Guidelines to ensure respectful collaboration.

We're currently in the process of adding general BCD guidelines for partial_implementation, and the reported issue does not meet the proposed criteria for marking the features with partial_implementation, because all implementing browsers appear to implement the feature in the same way, so their behavior is consistent, and the implementations can be considered de facto complete, even if they diverge from the spec.

We can capture spec changes (or aspects) in a behavioral subfeature though.

@pygy Would you suggest to capture support for "Gamut mapping" as a subfeature, or specific behaviors like "Maps lightness of 0% or 100% to black and white"?

@caugner caugner added info needed This needs more information to review or act on. and removed needs triage This issue needs to be confirmed labels May 20, 2025
@pygy
Copy link
Author

pygy commented May 20, 2025

I hope that denouncing ablism (systemic or otherwise) doesn't break the guidelines. Apologies if I crossed a line.

The proposed criteria are exactly part of what I was thinking about when mentioning the systemic aspects of the issue. They make sense in isolation, but combined with other factors, they perpetuate the problem. I'll chime in over there. Flouting accessibility should IMO be a deal breaker when it comes to considering a technology supported. Edit: also please note that the respective issues in the trackers are still open, meaning that implementors don't consider the issue as settled.

I don't think splitting (e.g. black/white, and other colors) this would make sense, as this goes beyond white/black.

Per spec, browsers should do with out of gamut colors, to preserve the contrast:

Schema showing a triangular slice of the RGB space with a triagular black/white/red gradient. The space around the triangle, on the red side, is filled with lines perpendicular to the black/white axis, showing how the transform should preserve the luminosity.

Currently they do this (clamp(RGBChannel, 0.0, 1.0)) roughly this, visually:

Shema shoing the same slice of the RGB color space, with lines perpendicular to the red-white and red-black axis, showing how browser currently map colors.

OKLab is future-proof, in that it supports all possible future display technologies better gamut that we have now, but it lets authors specify colors that are wildly out of the supported range. The current algo leads to contrast compression.

We end up with this (imagine this is a Web page with text, note that the flowers are ~uniform):

Photograph of flowers with highly saturated colors and little contrast

When we could have this with proper mapping:

The same photograph with proper contrast

Images source : https://bottosson.github.io/posts/gamutclipping/ , except for the schema that illustrates RGB clipping, which is mine.

@caugner
Copy link
Contributor

caugner commented May 21, 2025

Thanks for sharing the visualisation.

Per spec, browsers should do with out of gamut colors, to preserve the contrast:

Can you link and cite the relevant extract from the spec that describes the clamping as you expect it?

@ddbeck
Copy link
Contributor

ddbeck commented May 22, 2025

Issues around gamut mapping came up in the process of combining these keys into a feature for web-features. There's a rather long discussion on it, but the interesting part for BCD starts with web-platform-dx/web-features#674 (comment) through the end of that PR.

At the time the oklab feature shipped in browsers, implementers disagreed about what the spec required and so implemented clamping behavior as a substitute (at the time there was debate about whether this was allowed by the spec, so Philip and I couldn't even say that the clamping behavior was non-standard or not).

Today, it's a little more clear cut: the clamping behavior is compatible but non-standard. Resolving #22646, with notes or by creating a non-standard behavioral subfeature, would cover some of the matters described here in this issue. As far as I can tell, there are no implementers of the latest specification text that actually calls for full gamut mapping, so there's probably nowhere to describe anything as partially implemented (until one browser does implement the new text, at which point the other implementers would become retroactively partial).

Notes would be nice though!

@caugner
Copy link
Contributor

caugner commented May 23, 2025

Thanks, Daniel.

@pygy Would you like to update your PR to use either a non-standard behavioral subfeature for "Gamut clamping", or notes describing the limitation without the partial_implementation flag? I would strongly recommend using a non-standard behavioral subfeature, because it will be more visible (a separate row in the BCD tables on MDN). 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS info needed This needs more information to review or act on.
Projects
None yet
3 participants