Skip to content

Commit 4eb37c9

Browse files
author
Jihye Hong
committed
Merge remote-tracking branch 'upstream/master' into refine-draft
2 parents 30c5fb1 + 3ab76d4 commit 4eb37c9

File tree

6 files changed

+136
-99
lines changed

6 files changed

+136
-99
lines changed

css-color-4/contrast.html

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,21 @@
1717
<h2>Contrast ratio of two colors</h2>
1818
<p>Pick a foreground and background color</p>
1919

20-
<input type="color" id="fg" value="#B7C9A3">
21-
<label for="fg">Foreground</label>
22-
<input type="color" id="bg" value="#104425">
23-
<label for="bg">Background</label>
20+
<div class="picker">
21+
<input type="color" id="fg" value="#B7C9A3">
22+
<label for="fg">Foreground</label>
23+
<p>Luminance: <output id="fgLuminance"></output></p>
24+
</div>
25+
<div class="picker">
26+
<input type="color" id="bg" value="#104425">
27+
<label for="bg">Background</label>
28+
<p>Luminance: <output id="bgLuminance"></output></p>
29+
</div>
2430

2531
<div id="result">
26-
Contrast ratio <output id="contrastResult"></output>.
32+
<p>
33+
Contrast ratio <output id="contrastResult"></output>
34+
</p>
2735
</div>
2836

2937

@@ -34,6 +42,8 @@ <h2>Contrast ratio of two colors</h2>
3442

3543
var fgInput = document.querySelector("#fg");
3644
var bgInput = document.querySelector("#bg");
45+
var fgLuminanceOutput = document.querySelector("#fgLuminance");
46+
var bgLuminanceOutput = document.querySelector("#bgLuminance");
3747
var contrastOutput = document.querySelector("#contrastResult");
3848
var bgColor, fgColor;
3949

@@ -42,11 +52,10 @@ <h2>Contrast ratio of two colors</h2>
4252
(fgInput.oninput = bgInput.oninput = function (event) {
4353
bgColor = hexToArray(bgInput.value);
4454
fgColor = hexToArray(fgInput.value);
55+
bgLuminanceOutput.value = sRGB_to_luminance(bgColor);
56+
fgLuminanceOutput.value = sRGB_to_luminance(fgColor);
4557
console.log("watch", bgColor, fgColor);
4658
contrastOutput.value = contrast(bgColor, fgColor);
47-
// convert from string to array of number
48-
// compute contrast
49-
// update span
5059
})();
5160

5261

css-color-4/conversions.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ function lin_ProPhoto_to_XYZ(rgb) {
134134
[ 0.0, 0.0, 0.8251046025104601 ]
135135
]);
136136

137-
return Math.multiply(M, rgb).valueOf();
137+
return math.multiply(M, rgb).valueOf();
138138
}
139139

140140
function XYZ_to_lin_ProPhoto(XYZ) {
@@ -145,7 +145,7 @@ function XYZ_to_lin_ProPhoto(XYZ) {
145145
[ 0.0, 0.0, 1.2119675456389454 ]
146146
]);
147147

148-
return Math.multiply(M, XYZ).valueOf();
148+
return math.multiply(M, XYZ).valueOf();
149149
}
150150

151151
// a98-rgb functions
@@ -172,24 +172,24 @@ function lin_a98rgb_to_XYZ(rgb) {
172172
// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
173173
// which has greater numerical precsion than section 4.3.5.3 of
174174
// https://www.adobe.com/digitalimag/pdfs/AdobeRGB1998.pdf
175-
var M = Math.matrix([
175+
var M = math.matrix([
176176
[ 0.5766690429101305, 0.1855582379065463, 0.1882286462349947 ],
177177
[ 0.29734497525053605, 0.6273635662554661, 0.07529145849399788 ],
178178
[ 0.02703136138641234, 0.07068885253582723, 0.9913375368376388 ]
179179
]);
180180

181-
return Math.multiply(M, rgb).valueOf();
181+
return math.multiply(M, rgb).valueOf();
182182
}
183183

184184
function XYZ_to_lin_a98rgb(XYZ) {
185185
// convert XYZ to linear-light a98-rgb
186-
var M = Math.matrix([
186+
var M = math.matrix([
187187
[ 2.0415879038107465, -0.5650069742788596, -0.34473135077832956 ],
188188
[ -0.9692436362808795, 1.8759675015077202, 0.04155505740717557 ],
189189
[ 0.013444280632031142, -0.11836239223101838, 1.0151749943912054 ]
190190
]);
191191

192-
return Math.multiply(M, XYZ).valueOf();
192+
return math.multiply(M, XYZ).valueOf();
193193
}
194194

195195
//Rec. 2020-related functions

css-color-5/Overview.bs

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ Work Status: exploring
1010
Editor: Chris Lilley, W3C, chris@w3.org, w3cid 1438
1111
Editor: Una Kravets, Google, https://una.im, w3cid 115525
1212
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about, w3cid 52258
13-
Editor: Adam Argyle, Google, https://nerdy.dev, w3cid 112669
1413
Abstract: This module extends CSS Color [[css-color-4]] to add color modification functions.
1514
Repository: w3c/csswg-drafts
1615
</pre>
@@ -36,10 +35,9 @@ Introduction {#intro}
3635
like yellow and blue,
3736
can have the same HSL lightness).
3837

39-
This module adds three functions:
38+
This module adds two functions:
4039
''color-mix'',
41-
''color-contrast'' and
42-
''color-adjust''.
40+
''color-contrast''.
4341

4442
The perceptually uniform ``lch()`` colorspace
4543
is used for mixing by default,
@@ -129,7 +127,13 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
129127
<pre class="lang-css">color-contrast(wheat tan, sienna, var(--myAccent), #d2691e)</pre>
130128

131129
The calculation is as follows:
132-
* wheat (#f5deb3) has relative luminance
130+
* wheat (#f5deb3), the background, has relative luminance 0.749
131+
* tan (#d2b48c) has relative luminance 0.482 and contrast ratio 1.501
132+
* sienna (#a0522d) has relative luminance 0.137 and contrast ratio 4.273
133+
* suppose myAccent has the value #b22222
134+
* #b22222 has relative luminance 0.107 and contrast ratio 5.081
135+
* #d2691e has relative luminance 0.305 and contrast ratio 2.249
136+
* The highest contrast ratio is 5.081 so var(--myAccent) wins
133137

134138
</div>
135139

0 commit comments

Comments
 (0)