Layout System

Text on images

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

Text on images
  • Adjust your design elements
  • Change the font color
  • Use a semi-transparent gradient layer
  • Lighten the area behind the gradient
  • Overlay the entire image

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 legible, consider adjusting the design elements, such as the gradient.

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 DHL Red, Postyellow, or white. We recommend using white on dark images.

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.

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.