1.4.3 Contrast (Minimum)

Level AA · added in WCAG 2.0

Text and images of text need a contrast ratio of at least 4.5:1 against their background. Large text, at least 18pt (24px) or 14pt (about 18.66px) bold, needs at least 3:1.

Who it helps

People with low vision, color vision deficiencies or age-related loss of contrast sensitivity can read text that has enough contrast. It also helps everyone reading on a dim screen or outdoors in glare.

How to meet it

Check every text color against its actual background, including placeholder text, button labels, links and text on images or gradients.
Use 4.5:1 or higher for normal text; 3:1 is enough only for text at least 24px, or at least 18.66px and bold.
Do not round up: a ratio of 4.48:1 fails the 4.5:1 threshold.
For text over photos, add a solid or semi-opaque overlay. Test against the lightest part of the image behind the text.
Test hover, focus and visited states too, since each state's text must meet the ratio.
Know the exceptions: logos, text in disabled controls, pure decoration, invisible text and incidental text in a photo are exempt.

Examples

Fails:Light gray body text: #999 on #fff is 2.85:1, below 4.5:1

body { background: #fff; }
.note {
  color: #999;
  font-size: 16px;
}

Fails:A 16px button label: #fff on #4a90e2 is 3.29:1, which only passes for large text

.btn-primary {
  background: #4a90e2;
  color: #fff;
  font-size: 16px;
}

Passes:Darker gray text: #595959 on #fff is 7.00:1

body { background: #fff; }
.note {
  color: #595959;
  font-size: 16px;
}

Passes:A darker blue background: #fff on #1a5fb4 is 6.29:1

.btn-primary {
  background: #1a5fb4;
  color: #fff;
  font-size: 16px;
}

Can a scanner detect this?

Partly

Automated tools calculate the ratio for text on solid backgrounds reliably, and this is one of the most common failures they find. They often cannot measure text over images, gradients or overlapping layers, or in hover and focus states. Check those by hand with a color picker.

axe-core rules that test it

color-contrast

Common mistakes

Using light gray placeholder text, such as #aaa on white, which is about 2.3:1.
Treating 18px regular text as large text; large text starts at 24px regular or 18.66px bold.
Placing white text on a photo without an overlay, so part of the text sits on light areas.
Assuming disabled-looking styles are exempt when the control is actually still active.

Official W3C explanation of 1.4.3

Check your own page

See which automated WCAG checks your page fails, with the failing elements and how to fix them.

Reviewed November 2, 2026