Propose a clamp option for CSS contrast-color()

[ghurlbot]

Opened by matatk via IRC channel #apa on irc.w3.org

Due: 2024-04-03 (Wednesday 3 April)

Relevant issues:

• w3c/csswg-drafts#9166 (The big thread, with lots of details, diagrams, and discussion; closed)
• w3c/csswg-drafts#9970 (The thread specifically about tolerances/requirements of contrast ratios)

Minutes on this from the APA WG call today

[matatk]

Hi @AutoSponge, here are some notes I took about these issues, which I hope will be helpful for us to come to an issue we could post.

• You listed use cases for different min max values
• You noted, re algorithm - can choose in Chrome DevTools
• The question came up 'how do we know it's text' - as we discussed, this is a wider issue than just text, but that's why ensuring authors are aware of the constraints - or allowing them to specify the constraints - is important.
• Changing background colors (examples)
  • swatches - this would work well
  • pictures/gradients - this wouldn't work well?
• Override options for users/alternatives to specifying a clamp function (we need to be able to say what each of these doesn't do that requires a change to CSS)...
  • Media queries?
  • Forced colours?
  • UA-specific high-contrast mode accommodations (e.g. does Firefox still put a dark background behind text, such that it is immune to gradient/photo background contras issues)?
  • User styles
  • ...?

Here's what I see as next steps...

• [ ] We should search for 'clamp' in the 'relevant issues' threads above.
• [ ] We should decide what we're proposing...
• [ ] ...then craft an issue, and show it to APA WG

What do you think on the above? If I've captured it well, could you enumerate the use cases, and maybe we workshop a comment from there?

[AutoSponge]

In relation to https://github.com/w3c/csswg-drafts/issues/9970

It may be helpful to have a "sticky" feature and a "greater contrast" algorithm.

For example, if I have #6161FF as a background color white (4.5:1) and black (4.66:1) both conform to current specs. The author may have a preference:

• sticky: keep the specified color (white) unless it's no longer within spec
• greater: switch to black since it has a higher ratio based on the WCAG luminance calculation

IMO, max should restrict the color to the max requested. For example, on a black background, white text reaches 21:1 luminance ratio. But if I requested a 15:1 max (with a base of white on black background) for people with migraines and astigmatism, then I should get something like #D9D9D9. Maybe this works more like a clamp? But this only works in terms of the WCAG calculations. It means nothing to APCA calculations.

[AutoSponge]

Also, since fillColor, color, and icons are a thing, we need to have ways of clamping at 3:1 on the min side and preferring that over a more aggressive 4.5:1. This is useful for a secondary call to action element.