[css-color-6] Make color-contrast() candidates optional

[LeaVerou]

From https://www.w3.org/TR/css-color-5/#winner

If there is a target contrast, and the end of the list is reached without meeting that target, either white or black is returned, whichever has the higher contrast.

However, a lot of the time getting either black or white is exactly what you want. If this is the default behavior, people shouldn't have to do dummy things like color-contrast(var(--color) vs white, black) or even color-contrast(var(--color) vs var(--color), var(--color)) etc, they should just be able to do something like color-contrast(var(--color)) and get either white or black.

I.e. change the grammar from:

color-contrast() = color-contrast( <color> vs <color>#{2,}  [ to [<number> | AA | AA-large | AAA | AAA-large]]? )

to:

color-contrast() = color-contrast( <color> [ vs <color>#{2,}  [ to [<number> | AA | AA-large | AAA | AAA-large]]? ]? )

[svgeesus]

Adding the white|black came after target contrast which came after the initial design and grammar.

So yes, lets update the grammar.

Also, we don't say what is returned at the exact luminance where white and black have the same contrast.

[LeaVerou]

Agenda+ so we can resolve soon since this is part of Interop 2022.

[svgeesus]

Because the comma is a list separator

[LeaVerou]

@manuelmeister can you please open another issue about the general syntax of color-contrast()? This is about making the candidate colors optional when they are just white and black and the author has no preference between the two. We can bikeshed separators somewhere else. Thanks.

[svgeesus]

Why the 2 in the grammar: [ vs <color>#{2,}?

color-contrast(wheat to AA) gives white or black
color-contrast(wheat vs maroon to AA) gives maroon or white or black
color-contrast(wheat vs tan, maroon to AA) gives tan or maroon or white or black

[svgeesus]

So in other words, if there is a target contrast, the minimum list length is zero, and a list of one makes sense.
If there is no target contrast, the minimum list length of 2 continues to make sense (a list of one returns that one, always).

[css-meeting-bot]

The CSS Working Group just discussed candidates optional in contrast-color(), and agreed to the following:

• RESOLVED: Make candidates optional, use white / black if there's no available options that pass the contrast test

The full IRC log of that discussion

<emilio> Subtopic: candidates optional in contrast-color()
<fantasai> github: https://github.com//issues/7345
<emilio> fantasai: proposed resolution is that candidates are optional and default to white and black
<emilio> una: sounds good, it simplifies the function. We've talked about future-proofing and verbosity I think this is perfect, and I think "I just want good contrast" will be a large use case
<TabAtkins> emilio: wht happens if you have one candidate?
<TabAtkins> TabAtkins: you just get white/black if you fall off the list
<lea> emilio: if that passes, it's returned, otherwise you get white or black
<emilio> RESOLVED: Make candidates optional, use white / black if there's no available options that pass the contrast test

[LeaVerou]

Closed via f5a104b

[svgeesus]

"The candidate colors are tested sequentially, from left to right"

If there are no explicit candidates, are the candidate colors white, black or black, white? Usually one will be the clear winner but there will be a particular grey level where both give the same (poor) contrast and we want implementations to reliably interop for that color.

@LeaVerou