1.4.3 Contrast (Minimum)

Introduction

This success criteria is about contrast. This related accessibility check states that website owners must provide sufficient contrast between text and the background when the text is positioned over images, gradient background color, or a backdrop filter.

What

When text is placed on top of a background image, gradient, or backdrop filter effect, it must have a minimum contrast ratio of 4.5:1. This ensures that the text stands out against varying background colors and textures.

For large-scale text that is 18pt or larger, or 14pt and bold, the contrast ratio must be at least 3:1.

Elements that require contrast validation include:

• Text over images: This includes banners, hero sections, watermarked backgrounds, and so on.
• Text over gradients: This includes buttons, call-to-action sections, and other similar effects.
• Text over semi-transparent overlays: This includes overlays such as modals and cards with backdrop filters.
• Text with shadows: This covers text that uses a shadowing effect, the shadows must not reduce the overall contrast.

Why

When text is placed on complex or dynamic backgrounds such as images or gradients, it can become difficult to read. Ensure that sufficient contrast specifications are applied to enhance readability. This benefits:

• Users with low vision, who rely on high contrast to distinguish text from the background.
• Users with color blindness, who may struggle with certain color combinations.
• All users in different lighting conditions, who find it difficult to distinguish text in bright sunlight or when the device is in dark mode.

Failure to meet the contrast requirements can result in poor readability and accessibility barriers.

Examples

This section provides some pass and fail examples of this check.

Pass examples

• Text with a dark overlay on a background image

  copy

  <div style="position: relative; width: 100%; height: 300px; background-image: url('image.jpg'); background-size: cover;">
    <div style="position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);"></div>
    <p style="color: #FFFFFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 16px;">
  High-contrast text
    </p>
  </div>

  • The dark overlay rgba(0, 0, 0, 0.5) ensures that the white text remains readable.

• Text with a solid background on top of an image

  copy

  <div style="background-image: url('image.jpg'); padding: 20px;">
    <span style="background-color: #000000; color: #FFFFFF; padding: 5px;">
      Clear readable text
    </span>
  </div>

  • The solid background behind the text ensures readability.

• Text over a high-contrast gradient

  copy

  <p style="color: #FFFFFF; background: linear-gradient(to right, #000000, #333333); padding: 10px;">
    Text with sufficient contrast
  </p>

  • The dark gradient background improves contrast for the white text.

Fail examples

• Text that is placed directly over a background image without an overlay

  copy

  <div style="background-image: url('image.jpg'); padding: 20px;">
    <p style="color: #FFFFFF;">Hard to read text</p>
  </div>

  • Issue: If parts of the image are too bright, the white text may become invisible.

• Low-contrast text over a gradient

  copy

  <p style="color: #CCCCCC; background: linear-gradient(to right, #FFFFFF, #EEEEEE); padding: 10px;">
    Low-contrast text
  </p>

  • Issue: The light gray text does not have enough contrast against the white gradient.

• Text shadow effect without sufficient contrast

  copy

  <p style="color: #999999; text-shadow: 2px 2px 4px #FFFFFF;">
    Blurred text with poor contrast
  </p>

  • Issue: The shadow effect reduces the effective contrast and makes the text hard to read.

Affected users

This issue affects:

• People with low vision, who struggle to distinguish text from busy backgrounds.
• Users with color blindness, who may not perceive contrast differences.
• Users in different viewing environments, who find it hard to see the display in sunlight due to screen glare or in dark mode.

How

This section provides examples on how to review and fix this issue.

How to review text contrast over backgrounds

This section provides instructions on how to review the text contrast over backgrounds on your pages. Use the following steps:

• Identify text that is placed over images, gradients, or filters.

• Use contrast detection tools to identify the contrast on each element. Some tools that you can use are:

  • Acquia Color Contrast Checker.
  • Google Chrome DevTools on the Accessibility tab.
• Test the readability under different lighting conditions such as bright and dark environments.

How to fix it

This section provides instructions on how to fix this issue.

• Use a semi-transparent overlay

  copy

  .overlay {
    background-color: rgba(0, 0, 0, 0.5);
  }

  • This helps the text to stand out and leaves the background visible.

• Use a high-contrast text color

  copy

  .text {
    color: #FFFFFF;
    background-color: #000000;
    padding: 5px;
  }

  • This ensures readability over any background.

• Avoid low-opacity text shadows

  • Instead of:

    copy

    text-shadow: 2px 2px 4px #FFFFFF;

  • Use:

    copy

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);

    • This maintains contrast and does not blur the text.

Additional resources

WCAG success criteria

1.4.3 Contrast (Minimum)

Text on top of image, gradient, or backdrop-filter should have minimum contrast