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:

No Text Shadow

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:

With Text Shadow

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.

comments powered by Disqus