Skip to content

Commit 89a98ec

Browse files
committed
[css-color-5] Clarify calculating contrast, based on D65 luminance
1 parent c35b988 commit 89a98ec

1 file changed

Lines changed: 21 additions & 9 deletions

File tree

css-color-5/Overview.bs

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -598,8 +598,20 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
598598
(typically a background, but not necessarily),
599599
secondly, a list of two or more colors,
600600
and thirdly, an optional target <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">luminance contrast</a> [[!WCAG21]].
601-
It selects from that list
602-
the first color color to meet or exceed the target contrast.
601+
602+
For each color in the list,
603+
the CIE Luminance (Y) is calculated,
604+
relative to a [=D65 whitepoint=].
605+
606+
For each pair of colors,
607+
the WCAG 2.1 contrast is calculated:
608+
contrast = (Y<sub>l</sub> + 0.05) / (Y<sub>d</sub> + 0.05)
609+
where Y<sub>d</sub> is the luminance of the darker color in the pair
610+
and Y<sub>l</sub> is the luminance of the lighter color.
611+
612+
613+
It then selects from that list
614+
the first color to meet or exceed the target contrast.
603615
If no target is specified,
604616
it selects the first color with the highest contrast
605617
to the single color.
@@ -1002,11 +1014,11 @@ The grammar of the ''oklab()'' function is extended as follows:
10021014
Within a [=relative color=] syntax ''oklab()'' function,
10031015
the allowed [=channel keywords=] are:
10041016

1005-
* <dfn value for="lab()">l</dfn> is a <<percentage>>
1017+
* <dfn value for="oklab()">l</dfn> is a <<percentage>>
10061018
that corresponds to the [=origin color's=] OKLab Lightness
1007-
* <dfn value for="lab()">a</dfn> and <dfn value for="lab()">b</dfn> are <<number>>s
1019+
* <dfn value for="oklab()">a</dfn> and <dfn value for="oklab()">b</dfn> are <<number>>s
10081020
that correspond to the [=origin color's=] OKLab a and b axes
1009-
* <dfn value for="lab()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
1021+
* <dfn value for="oklab()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
10101022

10111023
<h3 id="relative-LCH">Relative LCH colors</h3>
10121024

@@ -1104,14 +1116,14 @@ The grammar of the ''oklch()'' function is extended as follows:
11041116
Within a [=relative color=] syntax ''oklch()'' function,
11051117
the allowed [=channel keywords=] are:
11061118

1107-
* <dfn value for="lch()">l</dfn> is a <<percentage>>
1119+
* <dfn value for="oklch()">l</dfn> is a <<percentage>>
11081120
that corresponds to the [=origin color's=] OKLab Lightness
1109-
* <dfn value for="lch()">c</dfn> is a <<number>>
1121+
* <dfn value for="oklch()">c</dfn> is a <<number>>
11101122
that corresponds to the [=origin color's=] OKLCH chroma
1111-
* <dfn value for="lch()">h</dfn> is an <<angle>>
1123+
* <dfn value for="oklch()">h</dfn> is an <<angle>>
11121124
that corresponds to the [=origin color's=] OKLCH hue,
11131125
normalized to a [0deg, 360deg) range.
1114-
* <dfn value for="lch()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
1126+
* <dfn value for="oklch()">alpha</dfn> is a <<percentage>> that corresponds to the [=origin color's=] alpha transparency
11151127

11161128

11171129
<h3 id="relative-color-function">Relative color-function colors</h3>

0 commit comments

Comments
 (0)