tutorpackSee prices
All courses

Music, art & photography · course 93 of 105

Colour Contrast by the WCAG Numbers

Go from reading hex and RGB colours to working out the WCAG accessibility contrast ratio of any pair and knowing which levels it passes, down to why 4.49:1 is a fail.

4 modules

Try a question

Not on sale yet. When sales open: $4.99 for this course, paid once, or every course for $9.99 a month. Prices

Preview

What it teaches

The colour numbers designers and developers use every day and the accessibility rule that goes with them: reading and writing hex colours (#FF8000) and rgb(), the short form (#F0A), the WCAG contrast ratio (lighter + 0.05) / (darker + 0.05), which levels a ratio passes for normal and large text (AA 4.5:1 and 3:1, AAA 7:1 and 4.5:1), and why 4.49:1 is a fail. The AI asks 3 questions, places you, shows a short card per module, then gives you one colour or one ratio at a time.

Not a colour-theory or branding course.

How long

40 items. About 20-30 rounds for a designer who knows hex up to about 45-60 for a beginner, plus a 12-item final: 1-2 sessions (estimate, not timed with a real student). The tutor gives a one-line save code at the end of each session.

The modules

4 modules, drilled one item at a time.

  1. M0

    The basics

    How hex, RGB and contrast work

  2. M1

    Hex and RGB

    Convert hex and RGB

  3. M2

    Which levels pass

    Which WCAG levels a ratio passes

  4. M3

    Contrast maths

    Work out the ratio from two luminances

Before it teaches, it asks

  1. 1
    What do you design or build (websites, apps, slides, nothing yet), and have you used a contrast checker before?
  2. 2
    Write rgb(255, 128, 0) as a six-digit hex colour.
  3. 3
    Text and background have a contrast ratio of 4.6:1. The text is normal. Does it pass AA? AAA?

What’s exact, and what isn’t

Show

Straight from the course’s own notes.

Computed by script
Hex and RGB by the hex-triplet rule (it reproduces Wikipedia’s worked examples first); relative luminance and contrast ratio by the W3C’s WCAG 2.2 definitions, coded as written; pass/fail by WCAG 2.2's success criteria, compared without rounding as the W3C’s guidance says. Every ratio is recomputed in exact fractions from the luminances shown in its question; every hand-written answer matched; a planted-error test was caught.
Sourced
The formula, the levels, large text and the no-rounding rule from the W3C; hex from Wikipedia; 13 short quotes matched word for word on the live pages 2026-10-11.
Honest limits
M3 gives the relative luminances in the question (computing them by hand needs the sRGB formula and a calculator; a contrast checker does it). This course checks numbers against WCAG 2.2; it isn’t legal or compliance advice for a real site.
Not in it yet
Computing luminance from hex by hand, HSL and colour wheels, colour blindness, APCA / WCAG 3 drafts.