Description
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?
- [css-color-4] Channel clipping breaks author expectations, especially when using 'perceptually uniform' spaces w3c/csswg-drafts#9449
- https://bugs.webkit.org/show_bug.cgi?id=255939
- https://bugzilla.mozilla.org/show_bug.cgi?id=1847421
- https://issues.chromium.org/issues/40909194
- [css-color-4] Disagreements over gamut mapping w3c/csswg-drafts#7610
- [css-color-4] CSS gamut mapping algorithm clarifications w3c/csswg-drafts#7653
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