WCAG 1.4.3 Contrast (Minimum): what it means and how to fix it

Level AA · Perceivable · Updated

Short answer: Text needs a contrast ratio of at least 4.5:1 against its background, or 3:1 for large text (about 24px, or about 18.7px bold).

What it requires

The visual contrast between text and its background must be at least 4.5:1. Large text, meaning at least 18 point (about 24 CSS pixels) or 14 point bold (about 18.7 CSS pixels bold), needs at least 3:1. Logos and purely decorative text are exempt, as is text in disabled controls.

Who it affects

Visitors with low vision, color-vision deficiencies or age-related vision loss, and anyone reading a phone in sunlight. Light gray text on white is the classic example.

How it shows up in ADA website claims

Low-contrast text is usually the most frequent automated finding on sued sites, because modern designs favor light gray body text, white text on photos, and pale placeholder text. Complaints cite it alongside screen reader barriers as evidence of general inaccessibility.

How to check your site

  1. An automated scan flags most contrast failures. On our scans of sued websites it is the most common failure by far.
  2. Check text placed over images and videos by hand; tools often cannot compute contrast there.
  3. Check hover, focus and placeholder states, sale badges, and footer links.

How to fix it

Darken the text or lighten the background until the ratio passes. Small changes usually suffice:

/* Fails: #999 on white is about 2.8:1 */
.price-note { color: #999999; }
/* Passes: #595959 on white is about 7:1; #767676 is the lightest gray that passes (about 4.5:1) */
.price-note { color: #595959; }

/* Text over a photo: add a scrim so contrast holds on any image */
.hero-title { background: rgba(0,0,0,.55); color: #fff; padding: .25em .5em; }

Fix it in your theme's color settings rather than page by page: one variable change in a Shopify or WordPress theme often clears hundreds of flagged elements.

Frequently asked questions

What is the lightest gray that passes on white?

#767676 on #FFFFFF is about 4.54:1, just over the 4.5:1 minimum for normal text.

Does contrast apply to logos?

No. Text that is part of a logo or brand name is exempt.

Do buttons and icons need contrast too?

Text on buttons falls under 1.4.3. The button outline and meaningful icons fall under 1.4.11 Non-text Contrast, which asks for 3:1.

Automated rules that test this (axe-core): color-contrast. Our scanner runs these checks.

Other commonly cited criteria

Read the official WCAG 2.1 specification at W3C.

Proof of Access provides technical accessibility assessments. We are not a law firm and nothing on this page is legal advice. If you have received a demand letter or a lawsuit, talk to an attorney.