Skip to content

Commit a395cea

Browse files
author
Chris Lilley
committed
[css-color-5] formatting for clarity
1 parent 6854406 commit a395cea

File tree

1 file changed

+8
-8
lines changed

1 file changed

+8
-8
lines changed

css-color-5/Overview.bs

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -277,13 +277,13 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
277277

278278
The calculation is as follows:
279279
* <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>
282282

283283
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
287287

288288
</div>
289289

@@ -308,9 +308,9 @@ Selecting the most contrasting color: the ''color-contrast()'' function {#colorc
308308
The calculation is as follows:
309309

310310
* <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.
314314

315315
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;
316316
6.08409 is very close to 6.08889).

0 commit comments

Comments
 (0)