Layout System

Text on images

This guide provides you with a number of solutions to help you improve text readability on images.

This guide contains

Adjust your design elements

If you face an uneven image composition or if the background image does not provide enough contrast to make the text illegible, consider adjusting the design elements, such as the gradient.

To achieve the needed contrast, here we have extended the highlight gradient down so that the black text contrasts well with the slightly transparent yellow color.

Here the copy is difficult to read because the background image does not provide sufficient contrast.

In this example, we’ve divided the canvas into two sections and applied the full-format gradient from top to bottom.

Here the copy is difficult to read because the background image does not provide sufficient contrast.

Change the font color

You can change the font color to achieve sufficient contrast in order to improve readability (and meet Web Content Accessibility Guidelines). Our headline colors are black, Postyellow, or white. When headlines are in black, you have the option of highlighting individual words in DHL Red for emphasis. We recommend using white on dark images.

By changing the font color to white, we achieve sufficient contrast and the headline is readable.

Here we see that black does not provide an optimal contrast on this somewhat dark background image.

Typography

Use a semi-transparent gradient layer

Another way to improve text readability when working with dark, busy images is to use an opaque to transparent gradient that sits behind the text label. For the gradient color, we recommend using black, white, Postyellow, or a shadow color from the image.

By applying a black to transparent gradient with 40% opacity over the image, we darken the image just enough to make the text more readable.

Here we have chosen the right font colors (Postyellow and white) for our headline, topline, and copy text, but the contrast is still insufficient and the text is not easy to read.

By applying a black to transparent gradient with 40% opacity over the image, we darken the image just enough to make the text more readable.

White is a good choice for this image, but the readability is poor.

Lighten the area behind the gradient

Backgrounds that are too dark or uneven can make red or black text harder to read. To solve this problem, try lightening the area behind the gradient as depicted in the illustration below. However, it’s important to preserve the overall impression of the image to avoid losing the main message of your design. And be sure to set this lighter area in the background and align it with the shape of the Postyellow highlight gradient.

Overlay the entire image

Depending on the image you are working with, you may also be able to cover the image with a full transparent black layer in order to darken it and achieve the necessary contrast.

By applying a full transparent black overlay over the entire image we can darken the image to achieve the desired contrast and improve readability.

Here our white headline and topline do not contrast enough with the background image, making the text difficult to read.

Tiles

Next in Design Basics

Logo