Reading the numbers
Contrast is expressed as a ratio between the lighter and darker color, 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.66 px or more if it is bold. WCAG defines the bold cutoff in points, 14 pt, which is 18.66 px at the CSS default of 96 dpi.
The mistake almost everyone makes
Mid-tone brand colors are the usual failure. A color 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 color, 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. Color 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.66 px and above when bold (WCAG says 14 pt; the pixel value assumes the CSS 96 dpi default). 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. Color must also never be the only way information is conveyed.
Why does my brand color fail?
Mid-tone colors fail most often: they have too little contrast against both white and black. Keep the brand color 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.