Contrast ratios, computed and not rounded
Failure cases found by computing: the light grey the dashboard used for the old gridlines and labels (#9aa8b4) is 2.43:1, so it fails even the graphics threshold. Hillcrest's light blue and Westpark's orange fail 3:1 on white (2.31 and 2.25) though both pass on dark. That is why the Lumen palette in this phase replaces those two colours with #F0375D and #0096FF, which pass on white (3.88 and 3.09) and on the dark card (4.17 and 5.24).
About 1 in 12 men and 1 in 200 women see some colours differently, and everyone loses colour on a bright wall screen. Test a palette with a simulation and with contrast ratios, and never let colour alone carry a meaning.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write passes(fg, bg, kind) that returns true when the contrast of fg on bg meets 4.5 for "text" and 3 for "graphic". Test #767676 and #777777 on white as text.
In the Lumen palette, which pair is closest for tritan vision, and what would you do if the distance were under 10?
Explain it without notes
Why can't you check a palette for colour-blind readers by looking at it?
What do the WCAG ratios 4.5:1 and 3:1 apply to?
Why is rounding a contrast ratio before comparing it a mistake?
Console
(nothing was printed)Expected console output
black on white: 21.00
same colour twice: 1.00
Muted text #5b6b78 on white 5.50 text 4.5: pass | graphic 3: pass
Light grey #9aa8b4 on white 2.43 text 4.5: FAIL | graphic 3: FAIL
Ink #1d2b36 on white 14.47 text 4.5: pass | graphic 3: pass
--- the Okabe-Ito colours on white (graphics need 3:1) and on dark #16222b
Harbour #0072B2 on white 5.19 pass | on dark 3.12 pass
Old Town #D55E00 on white 3.87 pass | on dark 4.18 pass
University #009E73 on white 3.42 pass | on dark 4.73 pass
Riverside #CC79A7 on white 3.06 pass | on dark 5.29 pass
Hillcrest #56B4E9 on white 2.31 FAIL | on dark 7.01 pass
Westpark #E69F00 on white 2.25 FAIL | on dark 7.18 pass
grey that shows as 3.0 but fails: #959595 2.9953 FAIL