Contrast ratios, computed
Plain JavaScript, no 3D: contrast is arithmetic, so check it in code and in CI.
To a screen reader a canvas is one picture with nothing inside. Give it a text alternative, offer every part as a real button, announce changes politely, keep focus visible and check contrast with numbers.
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 announce(message) that works for repeated messages.
A button's text is #ff6b2c on #0b1118. Without running code, is it above 4.5:1? Then check with the example.
Explain it without notes
A screen-reader user opens a page with only a full-screen canvas. What do they get, and what three things would you add?
How do you make a live region announce the same message twice?
Console
(nothing was printed)Expected console output
panel text on the panel, over black 14.66 needs 4.5 pass
panel text on the panel, over the bright stage 12.26 needs 4.5 pass
chosen button: dark text on orange 6.67 needs 4.5 pass
focus ring on the dark page 6.53 needs 3 pass
focus ring on the panel 5.83 needs 3 pass
orange text on the panel 5.96 needs 4.5 pass
grey hint text #6b7686 on the panel 3.68 needs 4.5 FAIL