[css-color-6] Meta-issue: `contrast-color()` issues

[LeaVerou]

This is a meta-issue for the various color-contrast() issues. Last updated Feb 16th, 2024.

Level 5 contrast-color() (MVP)

• [css-color-6] contrast-color() MVP in Level 5 #9166
• [css-color-5] Requirements for light and dark colors returned by contrast-color(<color>) #9970
• [css-color-6] contrast-color() and gamut mapping #8539

Level 6 contrast-color()

A summary of the current situation is as follows:

• Biggest roadblock: There is currently no problem-free contrast algorithm we could use as a default.
  • WCAG 2.1 algorithm, despite very wide usage, is severely flawed, even for only grayscale colors, or only picking between black and white. False positives/negatives up to 40% (!).
  • APCA which has been advertised as a successor has issues too, including a patent disclosure (not an exclusion), which makes baking it in CSS tricky.
  • There are other contrast algorithms (Weber, Michelson etc) but do not generally produce good results.
  • Relevant issues:
    • [css-color-6] It should be possible to specify the contrast algorithm for color-contrast() #7356
    • [css-color] color-contrast() default algorithm #7361
    • [css-color-6] color-contrast() should allow specifying multiple contrast algorithms that need to be satisfied #7357
• Satisfy more of designers' use cases
  • [css-color-6] color-contrast() with automatic continuous lightness adjustment #5153
  • [css-color] color-contrast() should support ranges of candidate colors, not just discrete color candidates #7360
  • [css-color-6] color-contrast() should take transparency into account #7358
  • [css-color-6] Does color-contrast() need to support three color contrast comparisons? #8457
• Syntax
  • [css-color-6] color-contrast() syntax is confusing #7354
  • [css-color-6] color-contrast() should distinguish foreground and background #7359
  • [css-color-6] Behavior of color-contrast() when no level is specified  #7556
  • [css-color-6] Rename color-contrast()? #7557
  • [css-color-6] Let's finally settle contrast-color() syntax #7937
  • [css-color-6] contrast-color() syntax proposal #7954
• Shortcuts and improvements over syntax
  • [css-color-6] Make color-contrast() candidates optional #7345
  • [css-color-6] Parameter for font size in contrast-color()? #6319

(Please refrain from discussing the sub-issues here, but in the relevant linked issues.)

[Myndex]

Regarding APCA and the patent disclosure: the version labeled as apca-w3 is intended for use in w3 (or other) standards including CSS. There's really nothing "tricky" here, the wording is such due to some concerns that developed relating to "patent trolls", some crude attempts at reverse engineering, and some "bad implementations" that had caused some problems. But the underlying intent is that apca-w3 becomes available per the W3 cooperative license.

I am open to discussing this and clarifying any concerns herein.

[Myndex]

Hi @LeaVerou

I just want to mention also that I am open to discuss how or what I need to modify to eliminate any concerns and/or to make using APCA a "problem-free contrast algorithm" for use herein. Whatever needed modifications in terms of license, code, or documentation. I am concerned that there are some unwarranted rumors that have raised issues, and I do want to proactively clear up any such misunderstandings, and also, to respond to any actual issues.

None have been brought forth in the SAPC-APCA repo as discussions or issues—nevertheless, I am aware there is a rumor mill (what would the internet be without rumor mill, after all) and I'd like to address any of that resultant nonsense...

[argyleink]

CSS color-contrast() Proposal Explorer:
https://observablehq.com/@argyleink/contrast-color

An interactive explainer/proposal; try out the syntax and algorithm to feel out and see the results and developer experience. It wants to make simpler tasks simple, but leave it open for more specific contrast tasks to be possible. It also wants to integrate tightly with prefers-contrast by putting the user in the center.

This is my WIP proposal as I understand all the updated requirements and features. Embedded within it are answers to many of the meta questions summarized by this issue. It's incomplete, but does have a todo list at the bottom for where I believe it needs more attention for completion. If the direction seems OK, I'll continue hacking on it and rounding out the edges.

I believe it's in a good state for sharing and feedback. Interested to hear thoughts!

[argyleink]

CSS color-contrast() Proposal Explorer: https://observablehq.com/@argyleink/contrast-color

would like to discuss / present this proposal to the WG in a meeting, adding agenda+ label

[LeaVerou]

CSS color-contrast() Proposal Explorer: observablehq.com/@argyleink/contrast-color

would like to discuss / present this proposal to the WG in a meeting, adding agenda+ label

This is a meta-issue, we are just using it to track actual issues. Please file an independent issue for discussing your specific proposal. When you file the issue, please explain the proposal clearly.