Setting body copy in light grey makes a layout feel calm and tidy. Look at the same screen by a window, on an older laptop, or with eyes past forty, and the text sinks into the background. The contrast rules are less a regulation than a way of putting a number on “can this actually be read?”
The good news is that this is one of the few design judgements with no taste involved. Put two colours into a contrast checker and everyone gets the same answer.
Three numbers to remember
The third line is the one people miss. If you assume only text needs contrast, you end up giving input fields a very pale border, and then the field itself is invisible. Checkboxes, radios, toggles and icon buttons all sit under that same 3:1 rule.
Where grey body copy fails
Grey on white gets riskier the lighter it goes. Somewhere around mid-grey it crosses the 4.5:1 line, and anything lighter used for body text is below the threshold. The awkward part is that the greys below the line are exactly the ones that look most refined in a mockup.
White text over photography deserves special care. Contrast is calculated against the pixels actually behind the glyphs, so text crossing a bright area of the image only passes at one spot in your mockup. A dark scrim, or moving the text off the image entirely, is the reliable fix.
Aim for headroom, not the minimum
4.5:1 is a floor, not a target. The calculation assumes ideal conditions; in practice sunlight, cheap panels and thin font weights all eat into perceived contrast. Weight in particular is invisible to the maths — the same colour set in a thin face reads noticeably fainter.
So in practice, prefer a colour with room to spare over one that scrapes past the line. Choosing a body grey one step darker when you build the palette means far less rechecking later, when background tones shift.
Settle it in the mockup
Contrast is expensive to fix after the build. Darkening one colour changes every screen that uses it, and by then the mockups have been signed off. If you clear body colour, secondary text and border colour at the moment you set the palette, every screen after that inherits the result for free.
Managing colour through tokens is covered further in the Themes & plugins archive, and a review of contrast, performance and security together on a live site is part of our optimization program.
Next part
With colour settled, images are next. The following part covers alt text — and there is not one rule but two, because decorative and informative images are written in opposite ways.