When overlaying text onto images, the most important thing you need to consider is readability. If the text being placed on top of the image doesn’t have enough contrast with the image itself, the message will get lost and frustrate visitors as they try to work out what it actually says. You don’t want visitors to have to work hard just to read something on a website. This can contribute to them ignoring the message you want to get across or even cause them to leave the site.
What Not to Do
First we need to get an understanding of why this is important. Here are some examples of text being placed on top of images making the text difficult to read.
The combination of the thin typeface, white text and white and light colours in the main image on the Knoxville Tourism website make it difficult enough to read without having to look closely.
Some of the destinations on the luxurious destinations list on Elegant Resorts get almost completely lost due to the use of a black and white image with white text. This is especially bad as these are links to elsewhere on the site. If the user can’t read them, what chance will they click on them?
Australia’s Official Tourism Website use a drop shadow on the text to try and make it more readable but unfortunately the effect is too subtle to be able to read it at a quick glance.
4 Ways of Making Text on Images More Readable
1. Position the Text Appropriately
As you can see from the example above on Pacific Benefits Group, the white text is placed on top of the darkest part of the image. This makes it easier to read than if it was placed over the sky or over the water.
2. Increase the Contrast
Tweetground use a dark coloured text on a light background. This contrast allows the text to be read easily. The obvious ways to increase contrast is to user either dark text on a light background or light text on a dark background. Look back atÂ The Principles of Good Web Design Part 3: Colour here on Inspect Element to see more examples of good and bad examples of colour contrast.
3. Use a Transparent Overlay
The previous two tips work well for static images and text,Â but what if they are being pulled in separately from a content management system? Here we could get issues where the positioning of the text may not be appropriate to the image. In other words the image and text have not been ‘designed’ specifically for readability so you’ll need some way of keeping the text readable.
As in the example above Manchester City‘s website, they have used a transparent black layer in between the image and the text. The contrast between the text and image remains at a very readable level no matter what image is used. This transparent layer also allows the image to show through so even though some of the image will be covered you’re still able to see what is underneath.
4. Drop Shadow
Beak use drop shadows on the text to give it extra definition against the background image. When used well this is a perfectly acceptable technique but doesn’t tend to work well on busy images as the shadow gets lost amongst the noise of the image itself. Also, the only way to implement this for use within a CMS is to use CSS3’s text-shadow property which is only supported by modern browsers and not by any versions of Internet Explorer.