Contrast ratios for the dashboard's colours
The formula is the one WCAG gives for relative luminance and contrast ratio. The tokens are the ones from theme.css (Topic 10.4).
Accessibility is not only for screen readers. Check that marks have enough contrast in both themes, that the page reflows at high zoom, that motion respects the reader's setting, and consider sound as another way to hear a trend.
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 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Compute the contrast of #767676 text on white. Is it enough for body text?
Write a function playOne(hz) that plays one half-second note and fades it out.
Explain it without notes
What are the two contrast rules for a chart and what ratios do they need?
Why can colour not be the only signal?
How does the dashboard respect reduced motion in one place?
Why does sonification wait for a click?
Console
(nothing was printed)Expected console output
light accent 5.16:1 needs 3 pass
light alert 5.18:1 needs 3 pass
light muted 5.50:1 needs 4.5 pass
light ink 14.47:1 needs 4.5 pass
light grid 1.29:1 needs 3 FAIL
dark accent 8.64:1 needs 3 pass
dark alert 6.97:1 needs 3 pass
dark muted 7.26:1 needs 4.5 pass
dark ink 13.68:1 needs 4.5 pass
dark grid 1.41:1 needs 3 FAIL
Orange against teal: 1.00:1. Same lightness, so a grey-scale view cannot tell Monday's bar from the rest: the words must say it too.