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 ratio of the relative luminance between text and its background, ranging from 1:1 to 21:1. It determines whether text is readable or quietly excludes 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.
