Level AA

83.9% of home pages have detectable contrast failures

1.4.3 Contrast (Minimum)

In Plain Language

Text needs enough contrast against its background so that people can read it. WCAG requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ or bold 14px+). This helps people with low vision, color vision deficiency, or anyone reading a screen in bright sunlight.

Contrast is measured as a ratio between the luminance of the text color and its background. A ratio of 1:1 means no contrast (same color), while 21:1 is maximum contrast (black on white).

Why It Matters

  • Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency -- low contrast makes text unreadable for them.
  • Low contrast text is difficult for everyone in less-than-ideal viewing conditions such as glare, dim lighting, or older screens.
  • Everyone experiences low-contrast situations -- reading outdoors in sunlight, using a phone with reduced brightness, or viewing a projector in a lit room.
  • This is the single most common accessibility failure, found on 83.9% of home pages tested.

Examples

Do: Sufficient contrast
Don't: Insufficient contrast
Do: Large text at 3:1
Don't: Brand colors that fail

How to Fix It

  1. Check your contrast ratios using tools like the WebAIM Contrast Checker, browser DevTools, or the axe accessibility extension.
  2. Normal text needs at least a 4.5:1 contrast ratio against its background. This applies to text smaller than 18px (or smaller than 14px bold).
  3. Large text needs at least a 3:1 contrast ratio. Large text is defined as 18px and above, or 14px and above if bold.
  4. Darken light colors or lighten dark backgrounds until the ratio passes. Small adjustments are usually enough to reach compliance without changing your brand identity.
  5. Test with real users and in varying conditions -- bright sunlight, dimmed screens, and night mode can all affect readability.