Ensuring dynamic image captions are legible

Added on: Wednesday 3rd February 2016

It is quite common these days for the home page of a website to have scrolling images to introduce the site. If you are displaying a caption on these it is hard to ensure that the fixed caption colour doesn't end up on part of the image that has the same colour.

We recently completed a website for a wedding directory and the design used white for the caption colour. This works well on most images because they usually include a good mix of colours. On a wedding directory website however, there are a lot of white dresses!

Below is a sample of an image with its caption:

As you can see the end of the caption is completely lost in the white of the image.

The fix is very simple and involves adding one line to the css:

text-shadow: 1px 1px #000;

The image now looks like this:

The word High now really stands out.

So this is a really useful tip if you are serving images and captions from a database and don't know what will end up on top of what.

Permalink