Lessons · HTML and CSS · 4.5 for text, 3 for the rest
4.5 for text, 3 for the rest
The ratio belongs to the PAIR, not to the colour. The same grey passes on one background and fails on another.
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
A palette checked in light mode and shipped in both is the commonest way a dark theme fails, and it fails for everybody who uses it.
How to think about it
Compute it rather than judging it. Contrast sensitivity varies enormously and drops with age, and the person choosing the grey is looking at a good screen, indoors, with the eyes they have.
Worked example
body { background: #fff } p { color: #767676 }4.54 -- the lightest neutral grey that passes on white, and a useful number to carry.body { background: #fff } p { color: #949494 }3.03. One shade lighter and it fails, which is not something anybody can see by looking.body { background: #111 } p { color: #767676 }4.16. The same grey, a different background, and now it fails.Your turn
The lightest neutral grey that passes on white.
#
Write a page and watch it render
The trap
These three numbers were checked by rendering them. Two earlier versions of them, written from memory, were wrong and looked exactly as convincing.