Skip to content

Commit

Permalink
[css-color-6] Rename color-contrast() to contrast-color(), closes #7557
Browse files Browse the repository at this point in the history
  • Loading branch information
@LeaVerou
LeaVerou committed Oct 19, 2022
1 parent 4bdf6a1 commit 36594e9
Showing 1 changed file with 23 additions and 23 deletions.
46 changes: 23 additions & 23 deletions css-color-6/Overview.bs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ Introduction {#intro}
<em>This section is not normative.</em>

This module adds two one function:
''color-contrast()''.
''contrast-color()''.



Expand All @@ -52,7 +52,7 @@ Introduction {#intro}
https://caniuse.com/mdn-css_types_color_color-contrast
-->

Selecting the most contrasting color: the ''color-contrast()'' function {#colorcontrast}
Selecting the most contrasting color: the ''contrast-color()'' function {#colorcontrast}
========================================================================================

This function takes, firstly, a single color
Expand All @@ -71,13 +71,13 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
with the keyword <css>to</css>.

<pre class='prod'>
<dfn>color-contrast()</dfn> = color-contrast( <<color>> vs <<color>>#{2,} [ to [<<number>> | AA | AA-large | AAA | AAA-large]]? )
<dfn>contrast-color()</dfn> = contrast-color( <<color>> vs <<color>>#{2,} [ to [<<number>> | AA | AA-large | AAA | AAA-large]]? )
</pre>

The keyword <dfn value for="color-contrast()">AA</dfn> is equivalent to ''4.5'',
<dfn value for="color-contrast()">AA-large</dfn> is equivalent to ''3'',
<dfn value for="color-contrast()">AAA</dfn> is equivalent to ''7'', and
<dfn value for="color-contrast()">AAA-large</dfn> is equivalent to ''4.5'' .
The keyword <dfn value for="contrast-color()">AA</dfn> is equivalent to ''4.5'',
<dfn value for="contrast-color()">AA-large</dfn> is equivalent to ''3'',
<dfn value for="contrast-color()">AAA</dfn> is equivalent to ''7'', and
<dfn value for="contrast-color()">AAA-large</dfn> is equivalent to ''4.5'' .

<h3 id="luminance-contrast">
Calculating luminance and WCAG 2.1 contrast
Expand Down Expand Up @@ -129,7 +129,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
-->

<div class="example">
<pre class="lang-css">color-contrast(wheat vs tan, sienna, var(--myAccent), #d2691e)</pre>
<pre class="lang-css">contrast-color(wheat vs tan, sienna, var(--myAccent), #d2691e)</pre>

The calculation is as follows:
* <span class="swatch" style="--color: wheat"></span> wheat (#f5deb3), the background, has relative luminance 0.749
Expand All @@ -147,7 +147,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2Fec249f376fcecbaa8794f75dbfc1dacf
-->
<div class="example">
<pre class="lang-css">color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)</pre>
<pre class="lang-css">contrast-color(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)</pre>

The calculation is as follows:
* <span class="swatch" style="--color: wheat"></span> wheat (#f5deb3), the background, has relative luminance 0.749
Expand All @@ -164,7 +164,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
</div>

<div class="example">
<pre class="lang-css">color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)</pre>
<pre class="lang-css">contrast-color(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)</pre>

The calculation is as follows:
* the relative luminances and contrast ratios are the same as the previous example.
Expand Down Expand Up @@ -192,7 +192,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
whichever has the higher contrast.

<div class="example">
<pre class="lang-css">color-contrast(wheat vs bisque, darkgoldenrod, olive to AA)</pre>
<pre class="lang-css">contrast-color(wheat vs bisque, darkgoldenrod, olive to AA)</pre>

The calculation is as follows:
* the relative luminances and contrast ratios are the same as the previous example.
Expand All @@ -209,7 +209,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
foo {
--bg: hsl(200 50% 80%);
--purple-in-hsl: hsl(300 100% 25%);
color: color-contrast(var(--bg) vs hsl(200 83% 23%), purple, var(--purple-in-hsl));
color: contrast-color(var(--bg) vs hsl(200 83% 23%), purple, var(--purple-in-hsl));
}
</pre>

Expand Down Expand Up @@ -239,14 +239,14 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
<h2 id='resolving-color-values'>
Resolving <<color>> Values</h2>

<h3 id="resolving-contrast">Resolving ''color-contrast()'' values</h3>
<h3 id="resolving-contrast">Resolving ''contrast-color()'' values</h3>

If all <<color>> parameters resolve
to the corresponding colors in their respective color spaces,
the computed value is the winning color
resolved according to [[css-color-4#resolving-color-values]].
Otherwise (if ''currentColor'' was used in the function),
the computed value is the ''color-contrast()'' function
the computed value is the ''contrast-color()'' function
with each <<color>> parameter resolved according to [[css-color-4#resolving-color-values]],
and the keywords ''AA'', ''AA-large'', ''AAA'', ''AAA-large'' replaced with their corresponding numeric value,
thus preserving inheritance into child elements.
Expand All @@ -255,7 +255,7 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
For example, given the value

<pre class="lang-css">
color-contrast(rgb(179 213 230) vs cadetblue, hsl(200 83% 23%) to AA)
contrast-color(rgb(179 213 230) vs cadetblue, hsl(200 83% 23%) to AA)
</pre>

the contrast with cadetblue is <strong>1.97</strong>
Expand All @@ -276,13 +276,13 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
the value

<pre class="lang-css">
color-contrast(currentColor vs hsl(200 83% 23%), purple to AA)
contrast-color(currentColor vs hsl(200 83% 23%), purple to AA)
</pre>

has the computed value

<pre class="lang-css">
color-contrast(currentColor vs rgb(10 75 107), rgb(128 0 128) to 4.5)
contrast-color(currentColor vs rgb(10 75 107), rgb(128 0 128) to 4.5)
</pre>

</div>
Expand All @@ -304,7 +304,7 @@ Serialization {#serial}
This section extends [[css-color-4#serializing-color-values]]
to add serialization of the
results of the
''color-contrast()'' function.
''contrast-color()'' function.

In this section, the strings used in the specification and the corresponding characters are as follows.

Expand Down Expand Up @@ -344,10 +344,10 @@ if the alpha of the result is exactly 1,
it is omitted from the serialization;
an implicit value of 1 (fully opaque) is the default.

Serializing color-contrast() {#serial-color-contrast}
Serializing contrast-color() {#serial-contrast-color}
-----------------------------------------------------

The serialization of the result of a ''color-contrast()'' function
The serialization of the result of a ''contrast-color()'' function
is a <<color>>,
as defined in [[css-color-4#serializing-color-values]].
The form used
Expand All @@ -366,14 +366,14 @@ is the same as that specified in

<div class="example">
The winner of this contrast choice
<pre>color-contrast(wheat vs olive, sienna, maroon)</pre>
<pre>contrast-color(wheat vs olive, sienna, maroon)</pre>
is maroon,
so the result is serialized as
<span class="swatch" style="--color: maroon"></span>
"rgb(128 0 0)".

While the winner of
<pre>color-contrast(wheat vs color(prophoto-rgb 0.4 0.4 0.2), color(display-p3 0.45 0.08 0.05))</pre>
<pre>contrast-color(wheat vs color(prophoto-rgb 0.4 0.4 0.2), color(display-p3 0.45 0.08 0.05))</pre>
is color(display-p3 0.45 0.08 0.05),
so the result is serialized as
<span class="swatch" style="--color: rgb(49.277% 0.414% 0.524%)"></span>
Expand Down Expand Up @@ -425,7 +425,7 @@ Changes {#changes}
<h3 id='changes-from-5'>
Changes from Colors 5</h3>

The new ''color-contrast()'' function allows one of a list of colors to be chosen,
The new ''contrast-color()'' function allows one of a list of colors to be chosen,
based on the WCAG 2.1 contrast with a specified color.

<!--
Expand Down

0 comments on commit 36594e9

Please sign in to comment.