[css-color-6] color-contrast() should distinguish foreground and background

[LeaVerou]

As we move towards a color-contrast() function that is more flexible and allows specifying the algorithm used (see #7356), we run into the issue that many (most?) contrast algorithms are not commutative operations; it makes a difference which of the two colors is background and which one is foreground. Currently, color-contrast() does not distinguish between the two, but we think the syntax should make it clear which one is which.

While the most common case is to provide a fixed background color and multiple candidates for the foreground color, we think the reverse should be possible as well (fixed foreground, variable background). We do not think there are enough use cases that warrant the complexity of providing multiple candidates for both.

@fantasai suggested the following syntax, which also addresses the syntax concerns raised in #7354: color-contrast([over | under] <color>, <color>#) (target level omitted from this grammar for simplicity)

(Issue filed following breakout discussions between @svgeesus, @fantasai, @argyleink and myself)

[dbaron]

I think this will be the first time that CSS is using keywords to describe relative positions in the paint order. (If it isn't, we probably want to be consistent with the other cases.) I think over and under are a reasonable pair of keywords, but we probably want to think it through carefully, because there's a decent chance we'll want to use the same pair elsewhere. I think the main question is whether it's confusing to use them both for positions in paint order and positions in geometry.

(Perhaps the closest thing in CSS to this that I can think of is the Porter-Duff mode source-over which Compositing and Blending Level 1 specifies for usage in canvas but not in CSS, and whose opposite (destination-over) isn't useful for our purposes here. But this is consistent with that usage.)

[argyleink]

most common case is to provide a fixed background color and multiple candidates for the foreground color

so what if it defaulted to over and could be flipped with the under keyword?

foo {
  color: color-contrast(var(--_bg) vs var(--text-color-list));
}

bar {
  background: color-contrast(under var(--_text) vs var(--brand-bg-list));
}

[JoshTumath]

Could under and over be the joining word instead of vs? So color-contrast(<color> [over | under] <color>#)

foo {
  background: var(--brand-bg);
  color: color-contrast(var(--brand-bg) under black white);
}

[LeaVerou]

I'd prefer we keep the list comma-separated, which allows things like the ideas proposed in #7360.

Also note that the semantics of what you are proposing are flipped:

• color-contrast(over white, red, black) = white background, red/black foreground candidates
• color-contrast(white over red black) = white foreground, red/black background candidates

This means that for the most common use case (fixed background, foreground candidates) one would have to use under rather than over, which is suboptimal as it's a less understandable keyword.

[tabatkins]

I'm not sure what you mean by "under is less understandable than over".