A contrast checker
This is the WCAG 2 formula: convert each channel to linear light, weight green the most (the eye is most sensitive to it), then compare the lighter and darker luminance with 0.05 added to each.
CSS decides whether people can read, see where they are, and use a page comfortably: give text enough contrast, keep a clear focus indicator, hide text visually without hiding it from screen readers, survive forced-colours mode, and calm motion for people who ask for less.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a :focus-visible style for buttons that also stays visible in forced colours mode, even though the normal design uses a box-shadow ring.
Write CSS that turns off a .carousel slide animation for users who prefer reduced motion.
Write a .visually-hidden class and use it to label a search button that only shows a magnifying-glass icon.
Explain it without notes
What contrast ratios does WCAG AA require, and for what?
Why is outline: none harmful, and how do you style focus properly?
How do you hide text visually but keep it for screen readers? Why not display: none?
What is forced colours mode, and how should CSS handle it?
How should CSS respond to prefers-reduced-motion?
Preview
Console
Nothing logged yet.Expected console output
#767676 on #ffffff 4.54:1 passes AA
#999999 on #ffffff 2.85:1 fails AA
#ffffff on #2563eb 5.17:1 passes AA
#000000 on #ffffff 21.00:1 passes AA