WCAG color contrast: what ratio do you need?

At level AA, normal text needs a contrast ratio of at least 4.5:1 against its background. At level AAA that becomes 7:1.

Large text, from 24px or 18.66px bold, gets away with less: 3:1 at AA, 4.5:1 at AAA. Bigger letters are simply easier to distinguish at lower contrast.

UI components like button borders, form fields and focus indicators have their own requirement of 3:1 against their surroundings. This falls under a separate success criterion (1.4.11) and only applies at AA.

The ratios aren't arbitrary: they're based on research into readability for people with low vision, a condition that increases with age for almost everyone. In bright sunlight on a phone screen, everyone benefits from higher contrast, not just people with a visual impairment.

Gray text on a white background is the classic offender: #999999 on white only reaches 2.85:1, well below the requirement. Placeholder text in forms often has the same problem.

Text placed over an image is hard to guarantee, because contrast varies across the image. A dark overlay or a solid color block behind the text solves this consistently.

Brand colors are a recurring obstacle: a pastel or bright brand color often doesn't reach the required contrast as a text color. The usual fix is a slightly darker or lighter variant of the same color specifically for text, not the brand color itself.