1.4.3 Text Has Minimum Contrast

What¶

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 improve readability and ensure that all users can engage with the content.

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 glare.

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¶

WCAG 1.4.3

Understanding Success Criterion 1.4.3.