1.4.3 Contrast (Minimum) (Level AA)

Check ID 140: Text contrast

What

This is a PDF accessibility check. Text must have sufficient color contrast against its background. The WCAG 2.1 contrast ratio requirements are:

• At least 4.5:1 for standard text.
• At least 3:1 for large text that is 18pt and larger, or 14pt and bold.

Why

Meet the contrast requirement to make your text readable for the widest group of people.

Pass examples

• Dark text on a light background

  <p style="color: #333333; background-color: #FFFFFF;">This text is easy to read.</p>

  The contrast ratio in this example is 15.3:1, which exceeds the 4.5:1 requirement.

• Large bold text with sufficient contrast
  <p style="color: #666666; font-size: 18pt; background-color: #FFFFFF;">This large text is accessible.</p>

  The contrast ratio in this example is 3.5:1, which meets the 3:1 requirement for large text.

• Black text (#000000) on a white background (#FFFFFF) 
  <p style="color: #000000; background-color: #FFFFFF;">This is readable text.</p>
  The contrast ratio in this example is 21:1, which exceeds the 4.5:1 requirement.

• Dark blue text (#003366) on a light gray background (#EEEEEE)

  <p style="color: #003366; background-color: #EEEEEE;">This is accessible text.</p>
  The contrast ratio in this example is 7.8:1, which exceeds the 4.5:1 requirement.

Fail examples

• Light gray text on a white background
  <p style="color: #AAAAAA; background-color: #FFFFFF;">This text is hard to read.</p>
  The contrast ratio in this example is 2.5:1, which fails the 4.5:1 requirement.

• Pastel text on a light background
  <p style="color: #99CCFF; background-color: #EEEEEE;">This text lacks contrast.</p>
  The contrast ratio in this example is 2.8:1, which fails to meet the WCAG guidelines.

Affected users

This check primarily impacts:

• Users with low vision.
• Users with color blindness.
• All users in conditions with poor lighting or poor screen quality.

How

This section provides instructions on how to review and fix text contrast.

How to review text contrast

1. Identify text elements on the page.
   • Visually examine the page for visible text content.
   • Examine text elements in the HTML code for visible text content.
2. Check the color contrast ratio.
   • Use browser developer tools to inspect the foreground (text) color and background color.
   • Use an online contrast checker.
3. Verify that large text meets the lower contrast requirement
   • Text that is 18pt or larger, or 14pt and bold, must have a contrast ratio of at least 3:1.

How to fix it

This section provides some methods you can use to increase the contrast ratio.

• Adjust the text color to increase the contrast
  Ensure that text has sufficient contrast with the background:
  <p style="color: #333333; background-color: #FFFFFF;">Readable text.</p>

• Change the background color for better visibility

  Ensure that the background has sufficient contrast with the text:
  <p style="color: #666666; background-color: #F8F8F8;">Better contrast.</p>

Additional resources

Acquia Color Contrast Checker

WCAG 1.4.3

Understanding Success Criterion 1.4.3.

Text contrast