Overview.bs

<pre class='metadata'>
Title: CSS Color Module Level 6
Shortname: css-color
Level: 6
Status: ED
Prepare for TR: no
Warning: Not Ready
Group: csswg
TR: https://www.w3.org/TR/css-color-6/
ED: https://drafts.csswg.org/css-color-6/
Work Status: exploring
!Delta Spec: yes
Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
Editor: Una Kravets, Google, https://una.im, w3cid 115525
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about, w3cid 52258
Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669
Abstract: This module extends CSS Color [[css-color-5]] to add automatic selection of contrasting colors.
Repository: w3c/csswg-drafts
Inline Github Issues: false
WPT Path Prefix: css/css-color/
WPT Display: open
</pre>

<pre class='ignored-specs'>
spec:css-color-3
</pre>

<pre class="link-defaults">
spec:css-color-5; type:dfn; text:color
spec:compositing-1; type:value; text:normal
</pre>
<link rel="stylesheet" href="style.css" />


Introduction {#intro}
=====================

	<em>This section is not normative.</em>

	This module adds a\two new <<color>> functions:
	''contrast-color()'' and ''color-layers()''.



<!--
 ██████   ███████  ██    ██ ████████ ████████     ███     ██████  ████████
██    ██ ██     ██ ███   ██    ██    ██     ██   ██ ██   ██    ██    ██
██       ██     ██ ████  ██    ██    ██     ██  ██   ██  ██          ██
██       ██     ██ ██ ██ ██    ██    ████████  ██     ██  ██████     ██
██       ██     ██ ██  ████    ██    ██   ██   █████████       ██    ██
██    ██ ██     ██ ██   ███    ██    ██    ██  ██     ██ ██    ██    ██
 ██████   ███████  ██    ██    ██    ██     ██ ██     ██  ██████     ██
-->
<!--
	https://caniuse.com/mdn-css_types_color_color-contrast
-->

Computing a Contrasting Color: the ''contrast-color()'' function {#colorcontrast}
========================================================================================

	The <dfn>contrast-color()</dfn> [=functional notation=]
	identifies a sufficiently contrasting color
	against a specified background or foreground color
	without requiring manual computation.

	Its syntax is:

	<pre class='prod'>
		<<contrast-color()>> = contrast-color(
		  [ [ <<color>> && [ tbd-fg | tbd-bg ] && <<target-contrast>>? ] |
		    [ <<color>> && [ tbd-fg | tbd-bg ] && <<target-contrast>>, <<color>># ] ] )
		<<target-contrast>> = <<wcag2>>
		<!-- Allow multiple algorithms in the future by using && operator instead of | for <<target-contrast>> additions.
		See resolution in #7357 -->
	</pre>


	The only mandatory argument is the <dfn lt="contrast base color" local-lt="base color">base color</dfn>
	against which the contrast is computed.
	This is typically (but not necessarily) a background color.

	The optional list of <<color>> values represents
	the <dfn lt="contrast color candidates" local-lt="color candidates">color candidates</dfn>.
	If no candidates are provided, the default candidates are used: ''white, black''.

	The ''tbd-fg'' and ''tbd-bg'' keywords
	indicate the role of the [=base color=] in calculating the contrast:
	as text against a list of [=color candidate|candidate=] background colors (<dfn for="contrast-color()" value>text</dfn>)
	or as a background against a list of [=color candidate|candidate=] text colors.
	(The effective contrast of a pair of colors depends on their usage.)

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

	The <dfn><<target-contrast>></dfn> argument specifies the contrast algorithm(s) to use.
	If no [=color candidates=] have been provided,
	<<target-contrast>> may be omitted,
	in which case a UA-chosen algorithm is used.

	Arguments to a <<target-contrast>> [=functional notation=]
	indicate the <dfn>target contrast level</dfn>.
	Multiple contrast algorithms with [=target contrast levels=] may be specified,
	in which case all their requirements are simultaneously applied.
	A ''contrast-color()'' function specifying multiple algorithms
	must specify a [=target contrast level=] for each algorithm,
	and is otherwise [=invalid=].

	If the [=target contrast level=] is omitted,
	the color candidate with the greatest contrast is returned.
	Otherwise,
	the returned color is the first color candidate that meets or exceeds that level,
	defaulting to ''white'' or ''black'' if none qualify.


<h3 id="contrast-color-winner">
Finding the Winning Color</h3>

<!--
	<wpt>
		color-contrast-001.html
		parsing/color-contrast-computed.html
		parsing/color-contrast-invalid.html
		parsing/color-contrast-valid.html
	</wpt>
	-->

<h4 id="contrast-color-target-winner">
If there is a target contrast</h4>

	Candidate colors are tested sequentially,
	starting with the first color in the list,
	and ending with an automatically appended ''white, black''.
	The first color to pass the specified level(s) of contrast
	against the [=base color=] wins.

	If no candidate color passes, then whichever of ''white'' or ''black'' has the highest contrast
	according to the first specified algorithm wins.
	If they both have the same contrast, ''white'' wins.

	<!-- live example
		https://colorjs.io/notebook/?storage=https%3A%2F%2Fgist.github.com%2Fsvgeesus%2Fec249f376fcecbaa8794f75dbfc1dacf
	-->
	<div class="example">
		<pre class="lang-css">contrast-color(wheat tbd-bg wcag2(aa), bisque, darkgoldenrod, olive, sienna, darkgreen, maroon)</pre>

		The calculation is as follows:
			* <span class="swatch" style="--color: wheat"></span> wheat (#f5deb3), the background, has relative luminance 0.749
			* <span class="swatch" style="--color: bisque"></span> bisque (#ffe4c4) has relative luminance 0.807 and contrast ratio <strong>1.073</strong>
			* <span class="swatch" style="--color: darkgoldenrod"></span> darkgoldenrod (#b8860b) has relative luminance 0.273 and contrast ratio <strong>2.477</strong>
			* <span class="swatch" style="--color: olive"></span> olive (#808000) has relative luminance 0.200 and contrast ratio <strong>3.193</strong>
			* <span class="swatch" style="--color: sienna"></span> sienna (#a0522d) has relative luminance 0.137 and contrast ratio <strong>4.274</strong>
			* <span class="swatch" style="--color: darkgreen"></span> darkgreen (#006400 ) has relative luminance 0.091 and contrast ratio <strong>5.662</strong>
			* <span class="swatch" style="--color: maroon"></span> maroon (#800000) has relative luminance 0.046 and contrast ratio <strong>8.333</strong>

		The first color in the list which meets the desired contrast ratio of 4.5 is <span class="swatch" style="--color: darkgreen"></span> darkgreen.
	</div>

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

		The calculation is as follows:
			* the relative luminances and contrast ratios are the same as the previous example.

		The first color in the list which meets the desired contrast ratio of 5.8 is <span class="swatch" style="--color: maroon"></span> maroon.
	</div>

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

		The calculation is as follows:
			* the relative luminances and contrast ratios are the same as the previous example.

		No color in the list meets the desired contrast ratio of 4.5.
		The contrast of <span class="swatch" style="--color: white"></span> ''white'' against the
		[=base color=] of <span class="swatch" style="--color: wheat"></span> ''wheat'' is 1.314, which is smaller than 4.5 (AA),
		and thus does not pass the target contrast.
		Therefore, <span class="swatch" style="--color: black"></span> ''black'' is returned, which has a contrast of 15.982 > 4.5.
	</div>

<h4 id="contrast-color-max-winner">
If no target contrast is specified</h4>

	Candidate colors are tested sequentially,
	starting with the first color in the list.
	A color is the <var>temporary winner</var>
	if it has the highest contrast against the [=base color=] of all those tested so far.

	Once the end of the list is reached, the current <var>temporary winner</var> is the overall winner.
	Thus, if two colors in the list happen to have the same contrast,
	the earlier one wins.

	<div class="example">
		<pre class="lang-css">
			--myAccent: #b22222;
			color: contrast-color(wheat tbd-bg wcag2, 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
			* <span class="swatch" style="--color: tan"></span> tan (#d2b48c) has relative luminance 0.482 and contrast ratio <strong>1.501</strong>
			* <span class="swatch" style="--color: sienna"></span> sienna (#a0522d) has relative luminance 0.137 and contrast ratio <strong>4.273</strong>
			* <span class="swatch" style="--color: #b22222"></span> --myAccent (#b22222) has relative luminance 0.107 and contrast ratio <strong>5.081</strong>
			* <span class="swatch" style="--color: #d2691e"></span> #d2691e has relative luminance 0.305 and contrast ratio <strong>2.249</strong>

		The highest contrast ratio is <strong>5.081</strong> so ''var(--myAccent)'' wins
	</div>

	<div class="example">
		<pre class="lang-css">
			foo {
				--bg: hsl(200 50% 80%);
				--purple-in-hsl: hsl(300 100% 25%);
				color: contrast-color(var(--bg) tbd-fg wcag2, hsl(200 83% 23%), purple, var(--purple-in-hsl));
			}
		</pre>

		The calculation is as follows:

			* <span class="swatch" style="--color: hsl(200 50% 80%)"></span> --bg is rgb(179 213 230) which has relative luminance 0.628835
			* <span class="swatch" style="--color: hsl(200 83% 23%)"></span> hsl(200 83% 23%) is rgb(10 75 107) which has relative luminance 0.061575 and contrast ratio <strong>6.08409</strong>
			* <span class="swatch" style="--color: purple"></span> purple is rgb(128 0 128) which has relative luminance 0.061487 and contrast ratio <strong>6.08889</strong>
			* <span class="swatch" style="--color: hsl(300 100% 25%)"></span> --purple-in-hsl is also rgb(128 0 128) which has relative luminance 0.061487 and contrast ratio <strong>6.08889</strong>. This is not greater than the contrast for purple, so purple wins.

		The calculated values here are shown to six significant figures, to demonstrate that early rounding to a lower precision would have given the wrong result (0.061575 is very close to 0.061487;
		6.08409 is very close to 6.08889).
		<!-- great example to use in WPT -->
	</div>

<h3 id="contrast-algorithms">
	Contrast algorithms
</h3>

	ISSUE: Currently only [[#luminance-contrast|WCAG 2.1]] is supported,
	however this algorithm is known to have problems,
	particularly on dark backgrounds.
	Future revisions of this module will likely introduce additional contrast algorithms.

<h4 id="luminance-contrast">
	WCAG 2.1: the ''wcag2'' keyword and ''wcag2()'' function
</h4>

	The <dfn for="contrast-color()" value>wcag2</dfn> keyword and <dfn for="contrast-color()">wcag2()</dfn> [=functional notations=]
	indicate use of the [[!WCAG21]] <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">luminance contrast</a> algorithm.
	Their syntax is:

	<pre class="prod">
	  <dfn><<wcag2>></dfn> =  wcag2 | wcag2([<<number>> | [ aa | aaa ] && large? ])
	</pre>

	Its [=target contrast level=] keywords map as follows:
	* ''aa'' computes to ''4.5''
	* ''aa large'' (or ''large aa'') computes to ''3''
	* ''aaa'' computes to ''7''
	* ''aaa large'' (or ''large aaa'') computes to ''4.5''

	To find the contrast of a pair of colors,
	first their CIE Luminance (Y) is calculated relative to a [=D65 whitepoint=].
	Then the WCAG 2.1 contrast is calculated:
	contrast = (Y<sub>l</sub> + 0.05) / (Y<sub>d</sub> + 0.05)
	where Y<sub>d</sub> is the luminance of the darker color in the pair
	and Y<sub>l</sub> is the luminance of the lighter color.
	The factor 0.05 represents the luminance contribution of the viewing flare.

	<div class="example">
		Suppose that the [=base color=] were

		<pre class="lang-css">color(display-p3 0.38 0.11 0.05)</pre>

		while the first [=candidate color=] in the list were

		<pre class="lang-css">yellow</pre>

		The calculation is as follows:
		* <span class="swatch" style="--color: rgb(41.482% 7.941% 1.375%)"></span> color(display-p3 0.38 0.11 0.05) is <span class="swatch" style="--color: rgb(41.482% 7.941% 1.375%)"></span> color(xyz 0.06191 0.03568 0.00463) so the relative luminance is <b>0.03568</b>
		* <span class="swatch" style="--color: yellow"></span> yellow is <span class="swatch" style="--color: yellow"></span> rgb(100% 100% 0%) which is <span class="swatch" style="--color: yellow"></span> color(xyz 0.76998 0.92781 0.13853) so the relative luminance is <b>0.92781</b>
		* the contrast is (0.92781 + 0.05) / (0.03568 + 0.05) = <b>11.4123</b>
	</div>

<h4 id="contrast-transparency">
Contrasting Semi-transparent Colors</h4>

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

	When calculating the contrast of a pair of colors:

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

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

	2. The foreground color is then blended over this opaque background color
		to find an opaque foreground color.


<!--  

█▌     ███▌  █   ▐▌ █████▌ ████▌   ███▌ 
█▌    ▐█ ▐█  ▐▌  █  █▌     █▌  █▌ █▌  █▌
█▌    █▌  █▌  █ ▐▌  █▌     █▌  █▌ █▌    
█▌    █▌  █▌  ▐▌█   ████   ████▌   ███▌ 
█▌    █████▌   █▌   █▌     █▌▐█       █▌
█▌    █▌  █▌   █▌   █▌     █▌ ▐█  █▌  █▌
█████ █▌  █▌   █▌   █████▌ █▌  █▌  ███▌ 
-->

Layering Multiple Colors: the ''color-layers()'' function {#color-layers}
=========================================================================

	The <dfn>color-layers()</dfn> [=functional notation=]
	takes an optional <<blend-mode>> 
	followed by a list of two or more
	<<color>> layers.

	Its syntax is:

	<pre class='prod'>
		<<color-layers()>> = color-layers([ <<blend-mode>>, ]? <<color>># )
	</pre>

	<wpt>
		color-layers-no-blend-mode.html
		parsing/color-invalid-color-layers-function.html
		parsing/color-valid-color-layers-function.html
	</wpt>

	It returns a <<color>> which is
	the result of compositing these layers,
	using the [[compositing-1#porterduffcompositingoperators_srcover]]
	compositing operator and the specified
	<<blend-mode>>.

	If no <<blend-mode>> is given, 
	''normal'' blend-mode is used.

	<div class="example">
		@@Add simple example with normal blend mode 
		and two colors, the first of which has non-unity alpha
	</div>

	<div class="example">
		@@Add simple example with normal blend mode 
		and three colors, the first two of which have non-unity alpha
	</div>

	<div class="example">
		@@Add simple example with normal blend mode 
		and two colors, both of which have non-unity alpha
	</div>

	<div class="example">
		@@Add example with overlay blend mode 
		and two colors, the first of which has non-unity alpha
	</div>


<!--
████████  ████████  ██████   ███████  ██       ██     ██ ████████
██     ██ ██       ██    ██ ██     ██ ██       ██     ██ ██
██     ██ ██       ██       ██     ██ ██       ██     ██ ██
████████  ██████    ██████  ██     ██ ██       ██     ██ ██████
██   ██   ██             ██ ██     ██ ██        ██   ██  ██
██    ██  ██       ██    ██ ██     ██ ██         ██ ██   ██
██     ██ ████████  ██████   ███████  ████████    ███    ████████
-->

<h2 id='resolving-color-values'>
	Resolving <<color>> Values</h2>

		<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 ''contrast-color()'' function
		with each component [=computed|computed value=],
		thus preserving inheritance into child elements.

		<div class="example">
			For example, given the value

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

			the contrast with cadetblue is <strong>1.97</strong>
			while the contrast with hsl(200 83% 23%) is <strong>6.09</strong>
			which exceeds 4.5, the value for ''AA'';
			so it has the computed value of the resolved hsl function:

			<pre class="lang-css">
				rgb(10 75 107)
			</pre>

		</div>

		<div class="example">

			For example, given a current color value of
			<span class="swatch" style="--color: rgb(179 213 230)"></span> rgb(179 213 230),
			the value

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

			has the computed value

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

		</div>

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

		If all <<color>> parameters resolve
		to the corresponding colors in their respective color spaces,
		the computed value is the composited color
		resolved according to [[css-color-4#resolving-color-values]].
		Otherwise (if ''currentColor'' was used in the function),
		the computed  value is the ''color-layers()'' function
		with an explicit <<blend-mode>> and
		with each component [=computed|computed value=],
		thus preserving inheritance into child elements.


<!--
 ██████  ████████ ████████  ████    ███    ██
██    ██ ██       ██     ██  ██    ██ ██   ██
██       ██       ██     ██  ██   ██   ██  ██
 ██████  ██████   ████████   ██  ██     ██ ██
      ██ ██       ██   ██    ██  █████████ ██
██    ██ ██       ██    ██   ██  ██     ██ ██
 ██████  ████████ ██     ██ ████ ██     ██ ████████
-->

Serialization {#serial}
=======================

This section extends [[css-color-4#serializing-color-values]]
to add serialization of the
results of the
''contrast-color()'' function.

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

The [=declared value=] of the ''contrast-color()'' function
is serialized with each keyword value as specified
and each component in canonical order.

The [=resolved value=] of the ''contrast-color()'' function
is the [=used color=] serialized the same as any other <<color>>.

<!--
<wpt>
	parsing/color-contrast-computed.html
</wpt>
-->

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

@@TODO

<!--
 ██████  ████████  ██████  ██     ██ ████████  ████ ████████ ██    ██
██    ██ ██       ██    ██ ██     ██ ██     ██  ██     ██     ██  ██
██       ██       ██       ██     ██ ██     ██  ██     ██      ████
 ██████  ██████   ██       ██     ██ ████████   ██     ██       ██
      ██ ██       ██       ██     ██ ██   ██    ██     ██       ██
██    ██ ██       ██    ██ ██     ██ ██    ██   ██     ██       ██
 ██████  ████████  ██████   ███████  ██     ██ ████    ██       ██
-->

Security Considerations {#security}
===================================

No new security considerations have been reported on this specification.

Privacy Considerations {#privacy}
===================================

No new privacy considerations have been reported on this specification.

Accessibility Considerations {#a11y}
===========================

This specification introduces a new feature
to help stylesheet authors
write stylesheets which conform
to WCAG 2.1 <a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">section 1.4.3 Contrast (Minimum)</a>.

<!--
 ██████  ██     ██    ███    ██    ██  ██████   ████████  ██████
██    ██ ██     ██   ██ ██   ███   ██ ██    ██  ██       ██    ██
██       ██     ██  ██   ██  ████  ██ ██        ██       ██
██       █████████ ██     ██ ██ ██ ██ ██   ████ ██████    ██████
██       ██     ██ █████████ ██  ████ ██    ██  ██             ██
██    ██ ██     ██ ██     ██ ██   ███ ██    ██  ██       ██    ██
 ██████  ██     ██ ██     ██ ██    ██  ██████   ████████  ██████
-->

Changes {#changes}
=======


<h3 id='changes-from-5'>
	Changes from Colors 5</h3>

		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.
		The new ''color-layers()'' function returns the result of compositing
		two or more colors, using a given blend mode.


<wpt hidden title="older tests, not relevant for this level">
	a98rgb-001.html
	a98rgb-002.html
	a98rgb-003.html
	a98rgb-004.html
	animation/color-composition.html
	animation/color-interpolation.html
	animation/opacity-animation-ending-correctly-001.html
	animation/opacity-animation-ending-correctly-002.html
	animation/opacity-interpolation.html
	at-color-profile-001.html
	background-color-hsl-001.html
	background-color-hsl-002.html
	background-color-hsl-003.html
	background-color-hsl-004.html
	background-color-rgb-001.html
	background-color-rgb-002.html
	background-color-rgb-003.html
	body-opacity-0-to-1-stacking-context.html
	border-bottom-color.xht
	border-color-currentcolor.html
	border-left-color.xht
	border-right-color.xht
	border-top-color.xht
	canvas-change-opacity.html
	clip-opacity-out-of-flow.html
	color-001.html
	color-002.html
	color-003.html
	color-initial-canvastext.html
	color-mix-basic-001.html
	color-mix-currentcolor-001.html
	color-mix-currentcolor-002.html
	color-mix-currentcolor-003.html
	color-mix-currentcolor-nested-for-color-property.html
	color-mix-currentcolor-visited-getcomputedstyle.html
	color-mix-currentcolor-visited.html
	color-mix-non-srgb-001.html
	color-mix-percents-01.html
	color-mix-percents-02.html
	composited-filters-under-opacity.html
	currentcolor-001.html
	currentcolor-002.html
	currentcolor-003.html
	currentcolor-004.html
	currentcolor-visited-fallback.html
	deprecated-sameas-001.html
	deprecated-sameas-002.html
	deprecated-sameas-003.html
	deprecated-sameas-004.html
	deprecated-sameas-005.html
	deprecated-sameas-006.html
	deprecated-sameas-007.html
	deprecated-sameas-008.html
	deprecated-sameas-009.html
	deprecated-sameas-010.html
	deprecated-sameas-011.html
	deprecated-sameas-012.html
	deprecated-sameas-013.html
	deprecated-sameas-014.html
	deprecated-sameas-015.html
	deprecated-sameas-016.html
	deprecated-sameas-017.html
	deprecated-sameas-018.html
	deprecated-sameas-019.html
	deprecated-sameas-020.html
	deprecated-sameas-021.html
	deprecated-sameas-022.html
	deprecated-sameas-023.html
	display-p3-001.html
	display-p3-002.html
	display-p3-003.html
	display-p3-004.html
	display-p3-005.html
	display-p3-006.html
	filters-under-will-change-opacity.html
	hex-001.html
	hex-002.html
	hex-003.html
	hex-004.html
	hsl-001.html
	hsl-002.html
	hsl-003.html
	hsl-004.html
	hsl-005.html
	hsl-006.html
	hsl-007.html
	hsl-008.html
	hsl-clamp-negative-saturation.html
	hsla-001.html
	hsla-002.html
	hsla-003.html
	hsla-004.html
	hsla-005.html
	hsla-006.html
	hsla-007.html
	hsla-008.html
	hsla-clamp-negative-saturation.html
	hwb-001.html
	hwb-002.html
	hwb-003.html
	hwb-004.html
	hwb-005.html
	inheritance.html
	inline-opacity-float-child.html
	lab-001.html
	lab-002.html
	lab-003.html
	lab-004.html
	lab-005.html
	lab-006.html
	lab-007.html
	lab-008.html
	lab-l-over-100-1.html
	lab-l-over-100-2.html
	lch-001.html
	lch-002.html
	lch-003.html
	lch-004.html
	lch-005.html
	lch-006.html
	lch-007.html
	lch-008.html
	lch-009.html
	lch-010.html
	lch-l-over-100-1.html
	lch-l-over-100-2.html
	light-dark-basic.html
	light-dark-currentcolor-in-color.html
	light-dark-currentcolor.html
	light-dark-inheritance.html
	named-001.html
	nested-color-mix-with-currentcolor.html
	oklab-001.html
	oklab-002.html
	oklab-003.html
	oklab-004.html
	oklab-005.html
	oklab-006.html
	oklab-007.html
	oklab-008.html
	oklab-009.html
	oklab-l-almost-0.html
	oklab-l-almost-1.html
	oklab-l-over-1-1.html
	oklab-l-over-1-2.html
	oklch-001.html
	oklch-002.html
	oklch-003.html
	oklch-004.html
	oklch-005.html
	oklch-006.html
	oklch-007.html
	oklch-008.html
	oklch-009.html
	oklch-010.html
	oklch-011.html
	oklch-l-almost-0.html
	oklch-l-almost-1.html
	oklch-l-over-1-1.html
	oklch-l-over-1-2.html
	opacity-overlapping-letters.html
	out-of-gamut-legacy-rgb.html
	parsing/color-computed-color-function.html
	parsing/color-computed-color-mix-function.html
	parsing/color-computed-hex-color.html
	parsing/color-computed-hsl.html
	parsing/color-computed-hwb.html
	parsing/color-computed-lab.html
	parsing/color-computed-named-color.html
	parsing/color-computed-relative-color.html
	parsing/color-computed-rgb.html
	parsing/color-computed.html
	parsing/color-invalid-color-function.html
	parsing/color-invalid-color-mix-function.html
	parsing/color-invalid-hex-color.html
	parsing/color-invalid-hsl.html
	parsing/color-invalid-hwb.html
	parsing/color-invalid-lab.html
	parsing/color-invalid-named-color.html
	parsing/color-invalid-relative-color.html
	parsing/color-invalid-rgb.html
	parsing/color-invalid.html
	parsing/color-mix-out-of-gamut.html
	parsing/color-valid-color-function.html
	parsing/color-valid-color-mix-function.html
	parsing/color-valid-hsl.html
	parsing/color-valid-hwb.html
	parsing/color-valid-lab.html
	parsing/color-valid-relative-color.html
	parsing/color-valid-rgb.html
	parsing/color-valid-system-color.html
	parsing/color-valid.html
	parsing/opacity-computed.html
	parsing/opacity-invalid.html
	parsing/opacity-valid.html
	parsing/relative-color-out-of-gamut.html
	predefined-001.html
	predefined-002.html
	predefined-005.html
	predefined-006.html
	predefined-007.html
	predefined-008.html
	predefined-009.html
	predefined-010.html
	predefined-011.html
	predefined-012.html
	predefined-016.html
	prophoto-rgb-001.html
	prophoto-rgb-002.html
	prophoto-rgb-003.html
	prophoto-rgb-004.html
	prophoto-rgb-005.html
	rec2020-001.html
	rec2020-002.html
	rec2020-003.html
	rec2020-004.html
	rec2020-005.html
	relative-currentcolor-a98rgb-01.html
	relative-currentcolor-displayp3-01.html
	relative-currentcolor-hsl-01.html
	relative-currentcolor-hsl-02.html
	relative-currentcolor-hwb-01.html
	relative-currentcolor-lab-01.html
	relative-currentcolor-lch-01.html
	relative-currentcolor-oklab-01.html
	relative-currentcolor-oklch-01.html
	relative-currentcolor-prophoto-01.html
	relative-currentcolor-rec2020-01.html
	relative-currentcolor-rec2020-02.html
	relative-currentcolor-rgb-01.html
	relative-currentcolor-rgb-02.html
	relative-currentcolor-xyzd50-01.html
	relative-currentcolor-xyzd65-01.html
	rgb-001.html
	rgb-002.html
	rgb-003.html
	rgb-004.html
	rgb-005.html
	rgb-006.html
	rgb-007.html
	rgb-008.html
	rgba-001.html
	rgba-002.html
	rgba-003.html
	rgba-004.html
	rgba-005.html
	rgba-006.html
	rgba-007.html
	rgba-008.html
	srgb-linear-001.html
	srgb-linear-002.html
	srgb-linear-003.html
	srgb-linear-004.html
	system-color-compute.html
	system-color-consistency.html
	system-color-hightlights-vs-getSelection-001.html
	system-color-hightlights-vs-getSelection-002.html
	system-color-support.html
	t31-color-currentColor-b.xht
	t31-color-text-a.xht
	t32-opacity-basic-0.0-a.xht
	t32-opacity-basic-0.6-a.xht
	t32-opacity-basic-1.0-a.xht
	t32-opacity-clamping-0.0-b.xht
	t32-opacity-clamping-1.0-b.xht
	t32-opacity-offscreen-b.xht
	t32-opacity-offscreen-multiple-boxes-1-c.xht
	t32-opacity-offscreen-multiple-boxes-2-c.xht
	t32-opacity-offscreen-with-alpha-c.xht
	t32-opacity-zorder-c.xht
	t41-html4-keywords-a.xht
	t421-rgb-clip-outside-gamut-b.xht
	t421-rgb-func-int-a.xht
	t421-rgb-func-no-mixed-f.xht
	t421-rgb-func-pct-a.xht
	t421-rgb-func-whitespace-b.xht
	t421-rgb-hex-parsing-f.xht
	t421-rgb-hex3-a.xht
	t421-rgb-hex3-expand-b.xht
	t421-rgb-hex6-a.xht
	t421-rgb-values-meaning-b.xht
	t422-rgba-a0.0-a.xht
	t422-rgba-a0.6-a.xht
	t422-rgba-a1.0-a.xht
	t422-rgba-clamping-a0.0-b.xht
	t422-rgba-clamping-a1.0-b.xht
	t422-rgba-clip-outside-device-gamut-b.xht
	t422-rgba-func-int-a.xht
	t422-rgba-func-no-mixed-f.xht
	t422-rgba-func-pct-a.xht
	t422-rgba-func-whitespace-b.xht
	t422-rgba-values-meaning-b.xht
	t423-transparent-1-a.xht
	t423-transparent-2-a.xht
	t424-hsl-basic-a.xht
	t424-hsl-h-rotating-b.xht
	t424-hsl-parsing-f.xht
	t424-hsl-values-b-1.html
	t424-hsl-values-b-10.html
	t424-hsl-values-b-11.html
	t424-hsl-values-b-12.html
	t424-hsl-values-b-13.html
	t424-hsl-values-b-14.html
	t424-hsl-values-b-15.html
	t424-hsl-values-b-2.html
	t424-hsl-values-b-3.html
	t424-hsl-values-b-4.html
	t424-hsl-values-b-5.html
	t424-hsl-values-b-6.html
	t424-hsl-values-b-7.html
	t424-hsl-values-b-8.html
	t424-hsl-values-b-9.html
	t425-hsla-basic-a.xht
	t425-hsla-h-rotating-b.xht
	t425-hsla-parsing-f.xht
	t425-hsla-values-b.xht
	t43-svg-keywords-a.xht
	t44-currentcolor-background-b.xht
	t44-currentcolor-border-b.xht
	t44-currentcolor-inherited-c.xht
	tagged-images-001.html
	tagged-images-002.html
	tagged-images-003.html
	tagged-images-004.html
	untagged-images-001.html
	xyz-001.html
	xyz-002.html
	xyz-003.html
	xyz-004.html
	xyz-005.html
	xyz-d50-001.html
	xyz-d50-002.html
	xyz-d50-003.html
	xyz-d50-004.html
	xyz-d50-005.html
	xyz-d65-001.html
	xyz-d65-002.html
	xyz-d65-003.html
	xyz-d65-004.html
	xyz-d65-005.html
</wpt>