[css-color-6] color-contrast() should take transparency into account

[LeaVerou]

In the current draft, transparency is ignored when calculating contrast, because it was ignored in WCAG 2.1 as there were no non-opaque colors then.

However, this could result in completely incorrect results.

Consider this example: color-contrast(white vs rgb(0 0 0 / .1), gray). Because transparency is ignored, it would pick rgb(0 0 0 / .1) as most contrasting, which produces this result:

whereas picking gray would have produced this much more legible result:

At the very least, UAs should perform alpha blending of background and foreground (see #7359 ). This would be sufficient when the background is opaque, but it does not solve the problem when the background is also semi-transparent. Ideally, UAs would calculate a range of contrasts and a color would be deemed a winner IFF the minimum possible contrast also passes the desired level (I did some work on calculating said range in WCAG 2.1 10 years ago, not sure if there's a better method these days)

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

---

Resolutions

Aug 2, 2022

• RESOLVED: When calculating color contrast between pairs of semi transparent colors, if the background is opaque, UAs should alpha blend the foreground on the background and use that as the foreground color. If the background is also semi-transparent, it would be alpha blended first with an opaque version of the foreground
• RESOLVED: Amend previous resolution, the canvas color in previous resolution is TBD
• RESOLVED: (rather than opaque version of foreground)

[argyleink]

this is such a good point and really nice example of the problem space.

the browser is uniquely positioned to alpha blend, but you're right that how far can that really go? if the 1st parameter was considered the "background", the UA could play out a subtree layout (hopefully a short as it can be) that finds the nearest opaque color for use in alpha blending insomuch to compare the list of colors to. transparent foreground colors are then alpha blended against that subtree composited opaque color result. but just because the browser can, maybe it's too much to ask? there's gotta be a better way.

[tabatkins]

I suspect the most reliable answer is indeed to assume the first color is a bg and the list is choosing a fg color, do alpha blending if the fg colors are transparent, and do a range if the bg color is transparent. If our assumptions about fg/bg are opposite the actual usage the numbers would end up being different, but not too much iiuc.

[svgeesus]

assume the first color is a bg and the list is choosing a fg color

We need to provide both - select a bg for a given fg color, and select a fg for a given bg color. Unlike WCAG 2.1, these are not mathematically the same when calculating contrast.

[LeaVerou]

Note that while "use the range for semi-transparent colors" is scary, what you actually need is to use the min contrast. If the min contrast passes, the entire range passes.

[css-meeting-bot]

The CSS Working Group just discussed transparency, and agreed to the following:

• RESOLVED: When calculating color contrast between pairs of semi transparent colors, if the background is opaque, UAs should alpha blend the foreground on the background and use that as the foreground color. If the background is also semi-transparent, it would be alpha blended first with an opaque version of the foreground
• RESOLVED: Amend previous resolution, the canvas color in previous resolution is TBD
• RESOLVED: (rather than opaque version of foreground)

The full IRC log of that discussion

<fantasai> Subtopic: transparency
<fantasai> github: https://github.com//issues/7358
<emilio> lea: current draft doesn't mention transparency
<emilio> ... most contrast arguments ignore it
<emilio> ... if fg is semi-transparent some algorithms make it work, otherwise ignore it
<emilio> ... when you have a range of contrasts there's no answer
<emilio> ... one option would be using the minimum contrast
<emilio> ... for wcag there's work to compute min/max contrast
<florian> q+
<astearns> ack florian
<emilio> ... if foreground is transparent but bg is opaque you can alphablend but in the bg case it's not so clear cut...
<lea> q+
<chris> q+ to wonder about mixed domain backgrounds
<astearns> ack dbaron
<emilio> florian: for fg there's an answer, for background... it's trickier, it's not terribly convenient to find the whole color, but if you're trying what's the best contrasting color against transparent this is not answerable
<emilio> dbaron: first intuition is that having a bg that's not opaque should be a syntax error
<emilio> ... wrt contrast ranges, maybe alpha-compositing bg with alpha over foreground with no alpha might give you the minimum contrast, but might vary per algo
<astearns> ack fantasai
<emilio> fantasai: was gonna suggest the same, composite semi-transparent bg over foreground color would give you the worst case scenario
<emilio> ... if both semi-transparent it gets extra-exciting, maybe composite against black?
<astearns> ack lea
<emilio> lea: not sure how we'd specify this so that colors are semi-transparent
<emilio> q+
<emilio> lea: compositing on black might give you the max contrast
<astearns> ack chris
<Zakim> chris, you wanted to wonder about mixed domain backgrounds
<fantasai> s/so that colors are semi-transparent/so that semi-transparent is invalid
<emilio> chris: if you have stuff like iframes that are transparent, does that allow you to find the background behind the iframe
<fantasai> i/lea: compositing/TabAtkins: in prose/
<astearns> ack em
<emilio> TabAtkins: not doing that, there's no way to know what the color will be used on
<fantasai> emilio: Making it invalid at syntax time sounds nice, but not possible in current impl
<dbaron> s/current impl/the presence of currentColor/
<fantasai> emilio: Offhand, I don't expect this to be a super common thing to hapen
<florian_irc> s/for background... it's trickier, it's not terribly convenient to find the whole color, but if you're trying what's the best contrasting color against transparent this is not answerable/For background, what authors should be supplying is not the possibly semi-transparent background color of the element, but rather the composited background against which the foreground will be seen. It's not necessarily easy for authors to figure
<florian_irc> what that is, but that's the only thing that makes sense. The color-mix function might help./
<fantasai> emilio: doing what fantasai and dbaron suggested seems a reasonable compromise to me
<astearns> ack dbaron
<lea> q+
<emilio> dbaron: what I was suggesting if they are both not opaque was to take the foreground, modify alpha to be 1, then composite the bg on top
<florian> s_what that is, but that's the only thing that makes sense. The color-mix function might help./__
<emilio> ... then compare fg composited against that
<emilio> ... that was my intuition for the worst case
<emilio> fantasai: [sanity-checks that]
<florian> s_to figure_to figure what that is, but that's the only thing that makes sense. The color-mix function might help._
<TabAtkins> composite fg over bg over (fg with alpha set to 1)
<lea> no need for color-mix(), relative color syntax can do that: lab(from foreground l a b / 1)
<emilio> dbaron: new_bg = alpha(fg, 1.0); bg = composite(bg, new_bg);
<fantasai> emilio: the goal is to make both opaque
<fantasai> emilio: so you need to composit on top of the new background that's opaque
<emilio> dbaron: this is sort of speculative, we should work it out in an issue
<emilio> astearns: well this would be the issue
<emilio> dbaron: underlying question is "does this give you the worst case?"
<emilio> lea: intuitively it seems like it might
<emilio> fantasai: so generically, we have a canvas that is the foreground with alpha 1, then we draw the background, then the foreground
<TabAtkins> fg compared against (bg on top of opaque fg)
<emilio> ... if everything is opaque then it all works out
<florian> q?
<fantasai> s/works out works out easily, otherwise you need to do some compositing/
<emilio> florian: sounds like it gives a clear answer
<emilio> TabAtkins: how can you get a less contrasting color with the foreground than the foreground itself
<astearns> ack lea
<emilio> q+
<florian> s/clear answer/, not sure it's a great answer/
<dbaron> It's probably not the absolute minimum for all algorithms, but it's probably close.
<astearns> ack emilio
<florian> q+
<fantasai> emilio: I'm not sure it'll be the least contrasting color
<fantasai> emilio: the least contrasting option would be the compositing the background with the foreground maxed out
<fantasai> TabAtkins: that's the suggestion
<fantasai> emilio: but that's not quite the same
<fantasai> emilio: the least conrasting option with the foreground is the foreground itself
<fantasai> emilio: okay, yeah
<fantasai> emilio: if you apply the background, then, yes, that should give you the worst. Nevermind
<emilio> dbaron: I'm not sure it's the least contrasting. if you state it like fantasai where you have three layers
<lea> FWIW this was the research I had done 10+ years ago on min/max WCAG contrast: https://lists.w3.org/Archives/Public/w3c-wai-ig/2012OctDec/0011.html
<lea> I can't at a glance tell if the formula for min contrast is what dbaron is proposing
<emilio> dbaron: the contrast aren't uniform with blending
<astearns> ack florian
<emilio> ... so I think there's variations where this might not work
<lea> +1 fantasai
<emilio> florian: other concern is that if we manage to find the least contrasting situation, we might fall back to black / white unnecessarily
<emilio> fantasai: I think dbaron's proposal is the best option, I propose to spec it and let people tell us why we're wrong
<fantasai> emilio: I think what I was thinking is along the lines of what dbaron thought earlier
<florian> s/unnecessarily/unnecessarily, as what's behind the semi-transparent background might not at all be that worse case scenario/
<fantasai> emilio: the worst contrast is when the blend of the color and the color below it is exactly the foreground
<fantasai> emilio: using the foreground color itself doesn't give you the worst one
<fantasai> emilio: suppose you have a red foreground, opaque red
<fantasai> emilio: and you have semitransparent white bg
<dbaron> s/of the color/of the background color/
<fantasai> emilio: can you get a way such that compositing semitransparent white will end up red?
<lea> RESOLVED: When calculating color contrast between pairs of semi transparent colors, if the background is opaque, UAs should alpha blend the foreground on the background and use that as the foreground color. If the background is also semi-transparent, it would be alpha blended first with an opaque version of the foreground
<fantasai> TabAtkins: a medium gray foreground, half-transparent black background, clearly the worst contrast is putting it over white
<fantasai> TabAtkins: putting over medium gray is not as bad
<fantasai> emilio: it's probably good enough
<fantasai> florian: could also just put white or black as the backdrop, depending on color scheme
<fantasai> emilio: [missed]
<fantasai> emilio: Gecko does have some contrast checks for selection
<fantasai> emilio: what we do in the case of semintransparent backgrounds is using the default background
<TabAtkins> Notably the worst case here is 50% transparent bg. as it gets more or less transparent, the answer becomes easier
<fantasai> emilio: basically composit with canvas, can guarantee it's opaque
<fantasai> emilio: simpler answer, maybe more correct
<fantasai> TabAtkins: how about we resolve for now that we'll adopt this approach with a color TBD
<fantasai> TabAtkins: could still use examples and thought
<fantasai> RESOLVED: Amend previous resolution, the canvas color in previous resolution is TBD
<dbaron> (rather than opaque version of foreground)
<TabAtkins> RESOLVED: (rather than opaque version of foreground)