diff --git a/css-color-5/Overview.bs b/css-color-5/Overview.bs index a36cd7711c6d..8af44497a191 100644 --- a/css-color-5/Overview.bs +++ b/css-color-5/Overview.bs @@ -2764,15 +2764,67 @@ or any other color or monochrome output device which has been characterized. System colors have the ability to react to the current used ''color-scheme'' value. The ''light-dark()'' function exposes the same capability to authors. + There are two forms of this function: one takes a pair of colors + while the other takes a pair of images. + 
-		light-dark() = light-dark( <>, <> )
+		light-dark() =  light-dark( [<>, <>] | [<>, <>])
- This function computes to the computed value of the first color, + For the color form, this function computes to the computed value of the first color, if the used color scheme is ''light'' or unknown, or to the computed value of the second color, if the used color scheme is ''dark''. + For the image form, this function returns the first image, + if the used color scheme is ''light'' or unknown, + or the second image, + if the used color scheme is ''dark''. + +
+ For example, to maintain a legible contrast on links, + for light mode and dark mode: + + 
+			a:link {
+			    color: light-dark(blue, #81D9FE);
+			    background-color: light-dark(white, black);
+		}
+
+ + The traditional blue link text + is legible on a white background + (WCAG contrast 8.59:1, AAA pass) + but would not be legible on a black background + (WCAG contrast 2.44:1, AA fail). + Instead, a lighter blue #81D9FE + is used in dark mode. + (WCAG contrast 13.28:1, AAA pass). + +
+

Legible link text

+

Illegible link text

+

Legible link text

+
+
+ +
+ For example, to provide easily visible list bullets + for light mode and dark mode: + + 
+			ul.fancy {
+			    list-style-image: light-dark(
+					url("icons/deep-maroon-ball.png"),
+					url("icons/pale-yellow-star.png")
+				);
+			}
+
+ +
+ + + light-dark-basic.html light-dark-currentcolor.html @@ -2819,6 +2871,7 @@ or any other color or monochrome output device which has been characterized. contrast-color-001.html contrast-color-currentcolor-inherited.html + animation/contrast-color-interpolation.html parsing/color-computed-contrast-color-function.html parsing/color-invalid-contrast-color-function.html parsing/color-valid-contrast-color-function.html