Lessons · HTML and CSS · what a contrast ratio measures
What a contrast ratio measures
The relative brightness of two colours against each other, on a scale from 1:1 to 21:1.
Hone is a place to practise programming. This is one of its lessons, written out in full and free to read without an account.
What it is for
It is brightness, not colour. Two very different hues of the same brightness sit near 1:1 and are nearly unreadable together, which is why 'but they are different colours' is not an answer.
How to think about it
Two numbers are worth carrying: 4.5 for normal text, 3 for large text and for interface parts like borders, icons and focus rings. Large is roughly 24px, or 19px bold.
Worked example
body { background: #fff } p { color: #000 }Black on white computes to 21 -- the top of the scale. Worth knowing because it shows how near the bottom 4.5 really is.Your turn
The ratio required for normal-sized text.
Write a page and watch it render
The trap
The 3:1 floor covers things that are not text at all. People check their paragraphs and ship a focus ring nobody can see.