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.