Text Behind Image

Making sure text on images is easy to read can be tricky, especially with user uploaded images. Let''s look at some solutions.

When Does This Issue Happen?

There are two main situations:

1. Known Images: When you know which image will be used.
2. Unknown Images: When users upload their own images.

In both cases, making the text easy to read can be a challenge. The biggest problem is ensuring the text stands out against the background image.

What is Contrast?

Contrast is explained by the WCAG (Web Content Accessibility Guidelines). The latest version, WCAG 2.2, defines contrast ratio as:

(L1 + 0.05) / (L2 + 0.05)

Where:

L1 is the brightness of the lighter color.
L2 is the brightness of the darker color.

Contrast Rules

There are two levels of contrast rules.

AA Contrast Rules

For regular text and images of text, a contrast ratio of at least 4.5 1 is needed.
For large text (at least 18 point or 14 point bold) and large images of text, a lower contrast ratio of at least 3 1 is okay.

AAA Contrast Rules

This level needs a higher contrast ratio of at least 7 1 for normal text and images of text.
For large text and images of text, a contrast ratio of at least 4.5 1 is needed.

Ways to Improve Text Readability

Adding an Overlay

One popular way to make text more readable is to add a dark overlay on the image. This can be done manually if the image is known in advance, or via CSS if the image is unknown. Here is a sample CSS code using Tailwind.

<div class="relative">
<img src="/img/text-on-images/sample.png" class="brightness-50" alt="">
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center max-w-lg text-white text-4xl">
How to stop procrastinating and get to work?
</div>
</div>
</div>

Another trick is to make the image less colorful and apply a color overlay with a multiply blend mode. This can reduce the file size and make the text more readable.

<div class="relative">
<img src="/img/text-on-images/sample.png" class="grayscale" alt="" />
<div class="absolute insetx0 flex items-center justify-center bg-teal-500 mix-blend-multiply" />
<div class="absolute insetx0 flex items-center justify-center">
<div class="text-center max-w-lg text-white text-4xl">
How to stop procrastinating and get to work?
</div>
</div>
</div>

Putting Text in a Box

Another way is to darken only the text area by putting the text in a box. The box can have different colors, be solid, or have a blurred background, as long as the text inside is readable.

Using Linear Gradients

If you know where the text will be placed, you can use a linear gradient that goes toward the text, keeping the rest of the image clearer.

Problems with WCAG

The current WCAG method may not work in all situations. There are times when it may give wrong results. A new method called ACPA is likely to be used in WCAG 3 to fix these issues.

Tools for Text Behind Image

Several tools can help create nice designs by placing text behind images.

Text Behind Image: An online free editor that uses AI to look at uploaded images and position text behind the main subject.
Dynamic Image: A tool to make images from text with various themes, good for open graph images and websites.

Making sure text is readable on background images is important for accessibility. By using methods like adding overlays, putting text in a box, and using linear gradients, you can make text more readable and nice to look at.