Watch
Colour contrast 0:39
A 39-second explainer of Colour contrast, narrated over the same demo you can try yourself.
Try the interactive Colour contrast demo
What this video covers
Colour contrast is the measurable difference in relative luminance between text and its background, expressed as a ratio from 1:1 to 21:1. It determines whether words are comfortable to read or quietly exclude people.
As you dragged the text lighter it stayed perfectly readable to you - right up until the ratio crossed 4.5:1 and the badge flipped to fail. That line is not about whether you can read it; it's about whether everyone can. Low contrast is the most common accessibility failure precisely because it looks fine to the person who chose it.
