10 Multimedia · 2026
Week 6 · Lesson 12

Colour, Contrast, and Accessibility (WCAG)

Week 6 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-4IND5-8IND5-10

Learning intentions

  • I can create a colour palette for my portfolio.
  • I can verify my colours meet WCAG AA contrast (4.5:1 for body text).
  • I can use hex, rgb, and hsl colour values in CSS.

Success criteria

  • I have a documented palette of 3-5 colours with hex codes.
  • Every text/background pair passes WCAG AA (4.5:1 contrast).
  • I have tested my palette in WebAIM Contrast Checker.

Do Now · 5 min

Look at these pairs and predict which ones you can read outside in sunlight:

  1. Black text on white background
  2. Grey (#888) text on white background
  3. Light yellow text on white background
  4. Dark blue text on light blue background

Only #1 and #4 have a chance. WCAG measures this with a contrast ratio. Today we learn the rules.

I Do · ~10 min Teacher demonstration

Teacher explains WCAG (Web Content Accessibility Guidelines):

WCAG 2.2 AA contrast requirements (industry standard, legally required in many countries):
  • Body text: at least 4.5:1 contrast ratio
  • Large text (18pt+): at least 3:1
  • UI components (buttons, form fields): at least 3:1

Teacher opens WebAIM Contrast Checker and tests:

Foreground: #333333
Background: #ffffff
Ratio: 12.63:1  ✓ AAA

Foreground: #888888
Background: #ffffff
Ratio: 3.54:1   ✗ Fails AA for body text

Colour systems in CSS:

color: #1f3a68;                /* hex - most common */
color: rgb(31, 58, 104);       /* red, green, blue 0-255 */
color: hsl(220, 54%, 26%);     /* hue, saturation, lightness */

The POUR framework — WCAG's core principles in 4 letters

WCAG 2.2 organises accessibility around 4 principles. Remember them as POUR:

Contrast (4.5:1) is one specific rule under "Perceivable". But accessibility is more than contrast.

We Do · ~15 min Guided build

Together, build a palette in Coolors:

  1. Press Space to generate random palette
  2. Lock the colours you like, regenerate until you're happy
  3. Copy hex codes
  4. Test each text/background combination in WebAIM Contrast Checker

Class discussion: which palette works for a calm, professional portfolio? Which works for a loud, creative one?

You Do · ~35 min Independent practice

Design your portfolio palette. Create a spec sheet (in HTML or a doc):

  1. Pick 3-5 colours: one primary, one accent, one text, one background, optional support
  2. Record hex codes
  3. Test every text/background combination in WebAIM Contrast Checker
  4. Record the contrast ratio for each
  5. Flag any failing combinations — choose replacements

Apply your palette to your portfolio styles.css (update from L11's work).

Differentiation

Support

3 curated accessible palettes provided. Pick one and document the contrast ratios.

Core

Build your own palette from scratch.

Extension

Add a dark mode palette — same hierarchy, inverted lightness — and use prefers-color-scheme media query.

Exit Ticket · 5 min

Exit ticket

1. What is the WCAG AA contrast ratio for body text? _______ : 1

2. Your palette:

Primary: #________ Contrast with BG: _____:1

Background: #________

Text: #________ Contrast with BG: _____:1

Accent: #________ Contrast with BG: _____:1

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.