Craft Fundamentals · fundamental
Colour Contrast (WCAG)
Playable Play this law (~3 min)or keep reading below ↓
Text has to stand out enough from its background to be readable — for everyone, including people with low vision. The WCAG standard puts a number on it: normal text needs a contrast ratio of at least 4.5:1 (large text 3:1). Low contrast is the single most common accessibility failure on the web, and the fix costs nothing but a colour value — you just have to check the ratio instead of trusting your eye.
Where it comes from
Contrast is older than the screen — it's why ink is dark on light paper and why road signs pair bold colours: the eye separates a figure from its ground by luminance difference. The Web Content Accessibility Guidelines turned that physical fact into policy. WCAG 2.0 (2008) defined a precise contrast-ratio formula from relative luminance, and the WebAIM Million report finds low-contrast text on the large majority of home pages every year — still the most common automated accessibility failure.
Origin: ink-on-paper legibility, formalised by WCAG's luminance-contrast ratio
In the wild
- Trendy grey-on-grey text
Light-grey body text on a white card looks elegant to a designer on a bright monitor — and vanishes for anyone with low vision or in sunlight.
- Contrast checkers
Figma, browser dev tools, and standalone checkers all report the exact ratio so you can hit 4.5:1 deliberately.
- Dark-mode surfaces
Well-built dark themes keep text near-white on near-black precisely to hold a high contrast ratio.
Further reading
Don't just read it — feel it.
Play the 3-minute game and let your own reactions prove the law.
Play the lesson