Skip to content

Commit 160e621

Browse files
authored
Merge pull request w3c#6560 from andruud/color_contrast_resolved
[css-color-5] Resolving color-contrast()
2 parents ea34234 + 60219c6 commit 160e621

1 file changed

Lines changed: 33 additions & 0 deletions

File tree

css-color-5/Overview.bs

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -682,6 +682,38 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
682682
<!-- great example to use in WPT -->
683683
</div>
684684

685+
<h3 id="resolving-contrast">Resolving ''color-contrast()'' values</h3>
686+
687+
The computed value is the specified ''color-contrast()'' function
688+
with each <<color>> parameter resolved according to [[css-color-4#resolving-color-values]],
689+
and the keywords ''AA'', ''AA-large'', ''AAA'', ''AAA-large'' replaced with their corresponding numeric value.
690+
691+
The used value is the winning color
692+
resolved according to [[css-color-4#resolving-color-values]].
693+
694+
<div class="example">
695+
696+
For example, given a current color value of
697+
<span class="swatch" style="--color: rgb(179 213 230)"></span> rgb(179 213 230),
698+
the value
699+
700+
<pre class="lang-css">
701+
color-contrast(currentColor vs hsl(200 83% 23%), purple to AA)
702+
</pre>
703+
704+
has the computed value
705+
706+
<pre class="lang-css">
707+
color-contrast(currentColor vs rgb(10 75 107), rgb(128 0 128) to 4.5)
708+
</pre>
709+
710+
and the used value
711+
712+
<pre class="lang-css">
713+
rgb(128 0 128)
714+
</pre>
715+
716+
</div>
685717

686718

687719
<!-- old color-adjust wording might be useful, on choice of color space for adjustment -->
@@ -1318,4 +1350,5 @@ Changes {#changes}
13181350
<li>allowed mix percent to default to 50%</li>
13191351
<li>added worked examples and diagrams</li>
13201352
<li>corrected minor spelling, syntax and formatting issues</li>
1353+
<li>Added section on resolving color-contrast() values</li>
13211354
</ul>

0 commit comments

Comments
 (0)