Color contrast: the 4.5:1 rule explained

Who it affects

People with low vision or color blindness, older visitors, and anyone reading a phone in bright sunlight. Light gray text on white is hard for almost everyone; it just fails some people completely.

The numbers

Contrast ratio compares how light the text is with how light its background is. It runs from 1:1 (same color) to 21:1 (black on white). WCAG Level AA asks for:

• 4.5:1 for normal text.
• 3:1 for large text: at least 24px, or about 18.7px if bold.
• 3:1 for the parts of controls and icons people need to see, such as a text field's border or a checkbox (WCAG 1.4.11).

Logos, disabled controls and purely decorative text are exempt. Placeholder text in a form field is not: if it carries information, it needs 4.5:1 too.

Links inside paragraphs

A link in a sentence that differs from the text around it only by color can be missed by people who can't tell those colors apart (WCAG 1.4.1). The simple fix is to underline links in body text.

/* Links in running text: don't rely on color alone */
main p a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

How to fix it without losing your brand

• Darken the text color, or lighten the background, until the ratio passes. A small shift in lightness is often enough, and the color still reads as yours.
• Keep a darker version of your brand color for text and buttons, and use the bright version for large shapes and backgrounds.
• Check hover, focus and visited states too, not just the default.
• For text over photos, add a solid or semi-transparent layer behind the text so the contrast holds whatever the photo is.