Skip to main content
SweepHound

Testing Guides

Color Contrast Accessibility Guide

Color contrast failures are the most common accessibility issue on the web. The WebAIM Million 2024 study found low-contrast text on 79.1% of home pages, making it the single largest category of detectable WCAG violations. WCAG 2.2 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at Level AA.

WCAG Contrast Requirements

Three WCAG success criteria govern color contrast:

  • SC 1.4.3 — Contrast (Minimum) (Level AA): Text and images of text must have a contrast ratio of at least 4.5:1. Large text requires at least 3:1.
  • SC 1.4.6 — Contrast (Enhanced) (Level AAA): Normal text requires 7:1. Large text requires 4.5:1. Most organizations target AA, not AAA, but enhanced contrast benefits users with low vision.
  • SC 1.4.11 — Non-text Contrast (Level AA): User interface components and graphical objects need at least 3:1 contrast against adjacent colors. This covers borders on form inputs, icon-only buttons, chart segments, and focus indicators.

What Counts as "Large Text"

WCAG defines large text as 18pt (24px) at normal weight, or 14pt (18.67px) at bold weight. This matters because large text qualifies for the more lenient 3:1 ratio. In practice:

  • font-size: 24px or larger — always counts as large text
  • font-size: 18.67px (or larger) with font-weight: 700 — counts as large text
  • Anything smaller than these thresholds requires the full 4.5:1 ratio

How to Test Contrast

Browser DevTools

Chrome and Firefox DevTools show the contrast ratio when you inspect a text element. In Chrome, open the color picker in the Styles panel — the ratio appears with a pass/fail indicator for AA and AAA. This is the fastest way to check individual elements during development.

Lighthouse

Lighthouse's accessibility audit flags low-contrast text on the current page. It runs axe-core under the hood but only tests the visible viewport. It misses elements hidden behind scroll, hover states, and dynamic content.

Full-Site Scanning

SweepHound's dual-engine scanner checks contrast on scanned pages. When a contrast violation is detected, SweepHound's remediation engine suggests a specific foreground or background color change to reach 4.5:1 while staying as close to your original design as possible.

Common Fixes

Most contrast failures have straightforward solutions:

  • Darken the foreground — The most common fix. Shifting text from a light gray to a darker shade often solves the issue without visible design change.
  • Lighten the background — When you cannot darken the text (brand colors, for example), lightening the background can reach the required ratio.
  • Increase font size or weight — Bumping text to 18.67px bold or 24px qualifies it as large text, lowering the required ratio from 4.5:1 to 3:1.
  • Add a text shadow or backdrop — For text overlaid on images, a semi-transparent dark backdrop behind the text ensures readable contrast regardless of the image.

Code Example: Fixing a Contrast Failure

A typical failure: light gray text on a white background.

/* Before — ratio 2.7:1 (fails AA) */
.subtitle {
  color: #999999;
  background: #ffffff;
}

/* After — ratio 4.6:1 (passes AA) */
.subtitle {
  color: #595959;
  background: #ffffff;
}

The fix darkens the text from #999999 to #595959. The visual difference is subtle, but the contrast ratio jumps from 2.7:1 to 4.6:1.

Tailwind CSS Tips

If you use Tailwind, some default utility classes produce contrast failures on white backgrounds:

  • text-gray-400 on white — ratio 3.0:1 (fails for normal text). Use text-gray-500 or darker.
  • text-gray-300 on white — ratio 1.9:1 (fails badly). Never use for readable text.
  • Use design tokens instead of raw color utilities. Tokens like text-ink-muted encode accessible color decisions so individual developers do not need to check ratios manually.

Contrast issues are the easiest accessibility wins. Run a free SweepHound scan to find machine-detectable contrast failures and get concrete color fix suggestions.