Reading the numbers
Contrast is expressed as a ratio between the lighter and darker colour, from 1:1 (identical) to 21:1 (black on white).
| Ratio | What it clears |
|---|---|
| 3:1 | AA for large text, and for interface borders, icons and focus rings |
| 4.5:1 | AA for normal body text, and AAA for large text |
| 7:1 | AAA for normal body text |
Large text means 24 px or more, or 18.5 px or more if it is bold.
The mistake almost everyone makes
Mid-tone brand colours are the usual failure. A colour that looks strong in a logo often sits right in the middle of the range, where it has too little contrast against white and too little against black. There is no background that rescues it for body text.
The fix is not to change the brand colour, it is to stop using it for body text. Keep it for headings at large sizes, for borders, for icons, and for buttons where it is the background behind white text. Use a near-black neutral for the paragraphs.
Where contrast is easy to forget
Placeholder text in form fields, disabled buttons that still need to be readable, captions and footnotes, text on top of a photo, and light grey “secondary” text that looked fine on a bright monitor in a dark room.
The last one is worth naming: a laptop at full brightness indoors is the most forgiving condition your design will ever meet. Phone in daylight is the real test.
What contrast does not cover
Passing the ratio is necessary and not sufficient. Colour must never be the only signal, so an error state needs a word or an icon rather than just turning red. Focus must stay visible for keyboard users. And a ratio says nothing about font size, line length or weight, which decide legibility just as much.
Questions
What ratio do I need?
4.5:1 for normal text and 3:1 for large text to pass AA. AAA asks for 7:1 and 4.5:1. Interface components and focus indicators need 3:1.
What counts as large text?
24 px and above, or 18.5 px and above when bold. Below that the normal-text threshold applies.
Does contrast alone make a design accessible?
No. It is one requirement among many, and the easiest to check. Colour must also never be the only way information is conveyed.
Why does my brand colour fail?
Mid-tone colours fail most often: they have too little contrast against both white and black. Keep the brand colour for large headings, borders and buttons with white text, and use a darker neutral for body text.
Do the numbers match an audit tool?
Yes. The relative luminance formula is the one WCAG 2 defines, which is what axe, Lighthouse and manual audits use.