css.types.color.{oklab,oklch} - Browsers are not spec compliant, support is only partial
Nobody has claimed this yet.
- Dominant language
- JSON
- Stars
- 5.8k
- Forks
- 2.6k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 186
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?
- https://github.com/w3c/csswg-drafts/issues/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
- https://github.com/w3c/csswg-drafts/issues/7610
- https://github.com/w3c/csswg-drafts/issues/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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the CSS Color specification with the linked CSSWG discussions and browser bug reports, then inspect the OKLab and OKLch compatibility records identified by the query. Verify whether the existing data should be partial and whether an accessibility warning fits the project’s data conventions; done means the records accurately reflect browser behavior and the documented concern.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- accessibility, documentation
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100