text-contrast-on-compound-background

Text is often placed over images, videos, patterns, or gradients, for example in hero banners and page titles. On these compound backgrounds, the contrast changes from one part of the text to another. Users may find it hard to read the text or might not be able to read it at all. Sometimes, users may not even see the text. This usually happens because of one of these reasons:

• The background of the text is an image with lots of details that compete with the text.
• The background is a pattern or gradient and does not contrast enough with the text.

Normal text needs a contrast ratio of at least 4.5:1 with its background. Large text, meaning at least 24px or 18.66px when bold, needs at least 3:1. For more about color contrast in general, see the related color-contrast validation.

To fix the issue, follow these steps:

1. If possible, change the background to one with better contrast. Or, you can try to dim the background in one of the following ways:
   • Place a solid or semi-transparent box directly behind the text.
   • Use a semi-transparent element over the background.
   • Use CSS blending modes, with the background-blend-mode or mix-blend-mode property, to lighten or darken the background according to the text color. To lighten the background, you can use lighten, screen, or color-dodge. To darken the background, you can use darken, multiply, or color-burn.
2. Check that the parts of the text that have the lowest contrast compared to the background meet the minimum contrast ratio of 4.5:1, or 3:1 for large text.

Pass Patterns

Semi-transparent overlay over a photo

A dark semi-transparent layer over the image darkens the whole background, so the white text keeps enough contrast everywhere.

<div class="hero">
    <h1>Summer collection</h1>
</div>


<style>
    .hero {
        background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("beach.jpg");
        background-size: cover;
    }
    .hero h1 { color: #ffffff; }
</style>

Solid box behind the text

The text sits on a solid box, so its contrast doesn't depend on the image behind it.

<div class="hero">
    <h1 class="hero-title">Summer collection</h1>
</div>


<style>
    .hero { background-image: url("beach.jpg"); background-size: cover; }
    .hero-title { color: #ffffff; background-color: #1a1a1a; padding: 0.5rem 1rem; }
</style>

Gradient with enough contrast along its whole range

Both ends of the gradient are dark enough for white text, so the lowest-contrast point still meets 4.5:1.

<div class="banner">Free shipping on all orders</div>


<style>
    .banner {
        color: #ffffff;
        background-image: linear-gradient(to right, #1a3a6b, #5a2d82);
    }
</style>

Fail Patterns

White text on a detailed photo

The image has bright areas, such as sky and sand, behind parts of the text, so those parts of the text have very low contrast.

<div class="hero">
    <h1>Summer collection</h1>
</div>


<style>
    .hero { background-image: url("beach.jpg"); background-size: cover; }
    .hero h1 { color: #ffffff; }
</style>

Gradient that fades toward the text color

The gradient starts dark but ends almost white, so the end of the white text is hard or impossible to read.

<div class="banner">Free shipping on all orders</div>


<style>
    .banner {
        color: #ffffff;
        background-image: linear-gradient(to right, #1a3a6b, #e8eef7);
    }
</style>

WCAG techniques

Sufficient techniques

• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text

Failure techniques

• F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)

Try It Yourself

Visual check

1. Look at the text over the image, pattern, or gradient.
2. Find the areas where the text and the background are closest in color, for example white text over sky or light sand.
3. Check whether every part of the text is easy to read.

Expected results: Every part of the text stands out clearly from the background behind it.

Actual results: Parts of the text blend into the background and are hard to read or not visible.

Using a color contrast checker

1. Use a color picker, such as the one in your browser's dev tools or a contrast checker extension, to sample the text color.
2. Sample the background color at the lowest-contrast point behind the text.
3. Enter both colors into a contrast checker.

Expected results: The ratio at the lowest-contrast point is at least 4.5:1 for normal text, or at least 3:1 for large text.

Actual results: The ratio at one or more points behind the text is below these thresholds.

FAQ

Standards and Regulations

Personas impacted by this issue

• Low Vision
• Color Vision Deficiency

Related Issues

• color-contrast
• text-in-image