Skip to content

Commit be4cc30

Browse files
LeaVeroufantasai
andcommitted
[css-color-6] Add handling for non-opaque colors in contrast-color()
Relates to w3c#7358 Co-Authored-By: fantasai <725717+fantasai@users.noreply.github.com>
1 parent 14a10b8 commit be4cc30

1 file changed

Lines changed: 18 additions & 4 deletions

File tree

css-color-6/Overview.bs

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Editor: Lea Verou, Invited Expert, http://lea.verou.me/about, w3cid 52258
1616
Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669
1717
Abstract: This module extends CSS Color [[css-color-5]] to add contrast calculation.
1818
Repository: w3c/csswg-drafts
19-
Inline Github Issues: title
19+
Inline Github Issues: false
2020
</pre>
2121

2222
<pre class='ignored-specs'>
@@ -86,7 +86,7 @@ Computing a Contrasting Color: the ''contrast-color()'' function {#colorcontrast
8686
or as a background against a list of [=color candidate|candidate=] text colors.
8787
(The effective contrast of a pair of colors depends on their usage.)
8888

89-
ISSUE(#7359): The keywords to specify whether the [=base color=] is a foreground or background are <abbr title="to be decided">TBD</abbr>.
89+
ISSUE(7359): The keywords to specify whether the [=base color=] is a foreground or background are <abbr title="to be decided">TBD</abbr>.
9090

9191
The <dfn><<target-contrast>></dfn> argument specifies the contrast algorithm(s) to use.
9292
If no [=color candidates=] have been provided,
@@ -272,13 +272,27 @@ If no target contrast is specified</h4>
272272
* the contrast is (0.92781 + 0.05) / (0.03568 + 0.05) = <b>11.4123</b>
273273
</div>
274274

275+
<h4 id="contrast-transparency">
276+
Contrasting Semi-transparent Colors</h4>
275277

278+
This section applies only to contrast algorithms that require their inputs to be opaque colors.
276279

280+
When calculating the contrast of a pair of colors:
277281

282+
1. The background color is first blended over an opaque canvas color
283+
using simple alpha compositing (see [[compositing-1#simplealphacompositing]])
284+
to find an opaque background color.
278285

286+
<div class="issue">
287+
<a href="https://github.com/w3c/csswg-drafts/issues/7358">#7358</a> Find a good opaque canvas color for this computation.
288+
Candidates are:
289+
- the foreground color with alpha = 1
290+
- the ''canvas'' system color
291+
- some other color calculated to minimize the contrast for the algorithm used
292+
</div>
279293

280-
281-
294+
2. The foreground color is then blended over this opaque background color
295+
to find an opaque foreground color.
282296

283297

284298

0 commit comments

Comments
 (0)