Colour Contrast & Accessibility Math: WCAG Contrast Ratios & Relative Luminance
Hex to RGB, sRGB linearisation, relative luminance, contrast ratios, AA/AAA for normal and large text, darkening a failing brand colour, a full palette contrast matrix with highlighting and a contrast report with a chart: 8 graded labs on one fictional design studio.
The first lesson is free — no account needed.
About this course
A colour contrast and accessibility course that does the math behind contrast checkers for one fictional design studio, Fernhill Studio, in a spreadsheet, for web and UI designers, front-end developers, accessibility testers and content teams. You split hex colours into RGB with HEX2DEC and MID and build hex codes back with DEC2HEX, linearise sRGB channels with the piecewise formula, calculate relative luminance with 0.2126 R + 0.7152 G + 0.0722 B and pick black or white text, compute contrast ratios with (L1 + 0.05) / (L2 + 0.05) and label them x.xx:1, decide which elements count as large text and whether each passes level AA and AAA, darken a failing brand colour step by step until it passes, build a 6 × 6 contrast matrix with one formula and highlighting, and finish a contrast report with a chart. WCAG is referenced in general terms, with no W3C affiliation. The first lab is free.
Lessons
- Hex Colours to RGB and Back: HEX2DEC, MID & DEC2HEXFree
- sRGB to Linear Light: the Piecewise IF with ^2.4 Pro
- Relative Luminance: 0.2126 R + 0.7152 G + 0.0722 B Pro
- Contrast Ratio: (L1 + 0.05) / (L2 + 0.05) Pro
- AA & AAA: Pass/Fail for Normal and Large Text Pro
- Fixing a Palette: Darken Step by Step Until It Passes Pro
- Contrast Matrix for a Brand Palette: Mixed References & Highlighting Pro
- Contrast Report: Pass Rate, Shortfalls & a Chart of Ratios vs Targets Pro