1.4.6 Contrast (Enhanced)

Who it helps

People with low vision, roughly equivalent to 20/80 acuity, need more contrast than the AA level gives. Older adults with reduced contrast sensitivity and anyone reading in glare benefit too.

How to meet it

• Use 7:1 or higher for normal text, such as #595959 or darker on white.
• Use at least 4.5:1 for large text: 24px and up, or about 18.66px and up when bold.
• Check links, buttons, placeholder text, and hover and focus states, not just body copy.
• Don't round up: a ratio of 6.98:1 fails the 7:1 threshold.
• If brand colors can't reach 7:1, use them for large headings, borders or backgrounds instead of body text.
• Know the exceptions: logos, text in inactive controls, pure decoration, invisible text and incidental text in pictures.

Examples

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

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

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

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

Common mistakes

• Assuming text that passes 4.5:1 for AA also meets AAA.
• Using mid-gray secondary text, like #767676 on white, for captions and helper text.
• Placing body text on brand-colored panels that reach only about 5:1.
• Forgetting that large text still needs 4.5:1 at this level, not 3:1.

Related criteria

• 1.4.3 Contrast (Minimum)
• 1.4.11 Non-text Contrast
• 1.4.8 Visual Presentation

Official W3C explanation of 1.4.6