Compute a WCAG contrast ratio
The famous #777 grey fails AA for normal text by a hair. #595959 is the lightest grey that reaches 7:1 (AAA) on white.
Accessibility means people with disabilities can use your page with their own tools; WCAG is the shared rulebook, AA is the level most laws ask for, and good HTML gets you most of the way.
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 the HTML for a newsletter sign-up with one email field and a button so that a screen reader announces the field's name and the button's name. Make the page language English.
Using the contrast function from the first example, check #ffffff text on a #1a73e8 blue button. Does it pass AA for normal text?
Explain it without notes
What is the accessibility tree, and why does it matter which HTML element you choose?
What do the four POUR principles mean? Give one example of each.
What is the difference between WCAG levels A, AA and AAA, and which level do teams usually target?
Give three reasons a business should invest in accessibility.
Preview
Console
Nothing logged yet.Expected console output
#777777 on white: 4.48:1 fails AA
#595959 on white: 7.00:1 passes AA
#000000 on white: 21.00:1 passes AA