You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-color-5/Overview.bs
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -277,13 +277,13 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
277
277
278
278
The calculation is as follows:
279
279
* <span class="swatch" style="--color: wheat"></span> wheat (#f5deb3), the background, has relative luminance 0.749
280
-
* <span class="swatch" style="--color: tan"></span> tan (#d2b48c) has relative luminance 0.482 and contrast ratio 1.501
281
-
* <span class="swatch" style="--color: sienna"></span> sienna (#a0522d) has relative luminance 0.137 and contrast ratio 4.273
280
+
* <span class="swatch" style="--color: tan"></span> tan (#d2b48c) has relative luminance 0.482 and contrast ratio <strong>1.501</strong>
281
+
* <span class="swatch" style="--color: sienna"></span> sienna (#a0522d) has relative luminance 0.137 and contrast ratio <strong>4.273</strong>
282
282
283
283
Suppose myAccent has the value <span class="swatch" style="--color: #b22222"></span> #b22222:
284
-
* #b22222 has relative luminance 0.107 and contrast ratio 5.081
285
-
* <span class="swatch" style="--color: #d2691e"></span> #d2691e has relative luminance 0.305 and contrast ratio 2.249
286
-
The highest contrast ratio is 5.081 so var(--myAccent) wins
284
+
* #b22222 has relative luminance 0.107 and contrast ratio <strong>5.081</strong>
285
+
* <span class="swatch" style="--color: #d2691e"></span> #d2691e has relative luminance 0.305 and contrast ratio <strong>2.249</strong>
286
+
The highest contrast ratio is <strong>5.081</strong> so var(--myAccent) wins
287
287
288
288
</div>
289
289
@@ -308,9 +308,9 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
308
308
The calculation is as follows:
309
309
310
310
* <span class="swatch" style="--color: hsl(200 50% 80%)"></span> --bg is rgb(179 213 230) which has relative luminance 0.628835
311
-
* <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 6.08409
312
-
* <span class="swatch" style="--color: purple"></span> purple is rgb(128 0 128) which has relative luminance 0.061487 and contrast ratio 6.08889
313
-
* <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 6.08889. This is not greater than the contrast for purple, so purple wins.
311
+
* <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>
312
+
* <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>
313
+
* <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.
314
314
315
315
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;
0 commit comments