Merge remote-tracking branch 'upstream/master' into refine-draft

Author: Jihye Hong

css-color-4/contrast.html

@@ -17,13 +17,21 @@
 <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">
-	Contrast ratio <output id="contrastResult"></output>.
+	<p>
+		Contrast ratio <output id="contrastResult"></output>
+	</p>
 </div>
 
 
@@ -34,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;
 
@@ -42,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-4/conversions.js

@@ -134,7 +134,7 @@ function lin_ProPhoto_to_XYZ(rgb) {
 	[ 0.0,                 0.0,                  0.8251046025104601     ]
 	]);
 
-	return Math.multiply(M, rgb).valueOf();
+	return math.multiply(M, rgb).valueOf();
 }
 
 function XYZ_to_lin_ProPhoto(XYZ) {
@@ -145,7 +145,7 @@ function XYZ_to_lin_ProPhoto(XYZ) {
   	[  0.0,                  0.0,                   1.2119675456389454  ]
 	]);
 
-	return Math.multiply(M, XYZ).valueOf();
+	return math.multiply(M, XYZ).valueOf();
 }
 
 // a98-rgb functions
@@ -172,24 +172,24 @@ function lin_a98rgb_to_XYZ(rgb) {
 	// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
 	// which has greater numerical precsion than section 4.3.5.3 of
 	// https://www.adobe.com/digitalimag/pdfs/AdobeRGB1998.pdf
-	var M = Math.matrix([
+	var M = math.matrix([
 	[ 0.5766690429101305,   0.1855582379065463,   0.1882286462349947  ],
 	[ 0.29734497525053605,  0.6273635662554661,   0.07529145849399788 ],
 	[ 0.02703136138641234,  0.07068885253582723,  0.9913375368376388  ]
 	]);
 
-	return Math.multiply(M, rgb).valueOf();
+	return math.multiply(M, rgb).valueOf();
 }
 
 function XYZ_to_lin_a98rgb(XYZ) {
 	// convert XYZ to linear-light a98-rgb
-	var M = Math.matrix([
+	var M = math.matrix([
 	[  2.0415879038107465,    -0.5650069742788596,   -0.34473135077832956 ],
 	[ -0.9692436362808795,     1.8759675015077202,    0.04155505740717557 ],
 	[  0.013444280632031142,  -0.11836239223101838,   1.0151749943912054  ]
 	]);
 
-	return Math.multiply(M, XYZ).valueOf();
+	return math.multiply(M, XYZ).valueOf();
 }
 
 //Rec. 2020-related functions

css-color-5/Overview.bs

@@ -10,7 +10,6 @@ Work Status: exploring
 Editor: Chris Lilley, W3C, chris@w3.org, 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-4]] to add color modification functions.
 Repository: w3c/csswg-drafts
 </pre>
@@ -36,10 +35,9 @@ Introduction {#intro}
 	like yellow and blue,
 	can have the same HSL lightness).
 
-	This module adds three functions:
+	This module adds two functions:
 	''color-mix'',
-	''color-contrast'' and 
-	''color-adjust''.
+	''color-contrast''.
 
 	The perceptually uniform ``lch()`` colorspace
 	is used for mixing by default,
@@ -129,7 +127,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>