Six districts, each with a symbol and a name at the line end
In the picture: two high lines (Harbour with circles, Old Town with squares) cross twice around May and July and peak near 30k, University (triangles), Riverside (diamonds) and Hillcrest (crosses) run in a band between about 5k and 18k, and Westpark (stars) sits at zero until April, then rises. The labels at the right are in order and pushed 13 units apart when two lines end close together. Edge case seen: Westpark's four zero months draw a flat line on the axis, which is correct: those stations opened in May.
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?
Preview
Console
Nothing logged yet.Expected console output
labels at the line ends: Harbour, Old Town, University, Riverside, Hillcrest, Westpark
smallest gap between labels: 13
pairs that greyscale cannot tell apart: 12 of 15
all six symbols differ: true | all six labelled: true