[css-color-5] complete contrast example

Author: svgeesus

css-color-4/contrast.html

@@ -17,10 +17,16 @@
 <h2>Contrast ratio of two colors</h2>
 <p>Pick a foreground and background color</p>
 
-<input type="color" id="fg" value="#B7C9A3">
-<label for="fg">Foreground</label>
-<input type="color" id="bg" value="#104425">
-<label for="bg">Background</label>
+<div class="picker">
+	<input type="color" id="fg" value="#B7C9A3">
+	<label for="fg">Foreground</label>
+	<p>Luminance: <output id="fgLuminance"></output></p>
+</div>
+<div class="picker">
+	<input type="color" id="bg" value="#104425">
+	<label for="bg">Background</label>
+	<p>Luminance: <output id="bgLuminance"></output></p>
+</div>
 
 <div id="result">
 	<p>
@@ -36,6 +42,8 @@ <h2>Contrast ratio of two colors</h2>
 
 var fgInput = document.querySelector("#fg");
 var bgInput = document.querySelector("#bg");
+var fgLuminanceOutput = document.querySelector("#fgLuminance");
+var bgLuminanceOutput = document.querySelector("#bgLuminance");
 var contrastOutput = document.querySelector("#contrastResult");
 var bgColor, fgColor;
 
@@ -44,11 +52,10 @@ <h2>Contrast ratio of two colors</h2>
 (fgInput.oninput = bgInput.oninput = function (event) {
 	bgColor = hexToArray(bgInput.value);
 	fgColor = hexToArray(fgInput.value);
+	bgLuminanceOutput.value = sRGB_to_luminance(bgColor);
+	fgLuminanceOutput.value = sRGB_to_luminance(fgColor);
 	console.log("watch", bgColor, fgColor);
 	contrastOutput.value = contrast(bgColor, fgColor);
-	// convert from string to array of number
-	// compute contrast
-	// update span
 })();
 
 

css-color-5/Overview.bs

@@ -38,7 +38,7 @@ Introduction {#intro}
 
 	This module adds three functions:
 	''color-mix'',
-	''color-contrast'' and 
+	''color-contrast'' and
 	''color-adjust''.
 
 	The perceptually uniform ``lch()`` colorspace
@@ -129,7 +129,13 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
 		<pre class="lang-css">color-contrast(wheat tan, sienna, var(--myAccent), #d2691e)</pre>
 
 		The calculation is as follows:
-			* wheat (#f5deb3) has relative luminance
+			* wheat (#f5deb3), the background, has relative luminance 0.749
+			* tan (#d2b48c) has relative luminance 0.482 and contrast ratio 1.501
+			* sienna (#a0522d) has relative luminance 0.137 and contrast ratio 4.273
+			* suppose myAccent has the value #b22222
+			* #b22222 has relative luminance 0.107 and contrast ratio 5.081
+			* #d2691e has relative luminance 0.305 and contrast ratio 2.249
+			* The highest contrast ratio is 5.081 so var(--myAccent) wins
 
 	</div>