What techniques can I use to bring out text on B&W images?

Question

My website at the moment consists mainly of B&W images with some text over each one. At the moment the text is just white, which of course looks fine when the background is mainly black, but when the image is white, you can't see the text.

I've tried adding a 'background' to the text which looks like this

But I am just wondering if anyone else has some ideas on what I else I could do in regards to having text over top of B&W images? (without using ridiculous text colours).

Answer 1

Crop a portion of the background image, blur it, and slightly darken it, and add a slight shadow to both the box and the text...

Answer 2

Three ideas immediately spring to mind:

1. Add a black outline outside the letter shape :
2. Add a black 'glow' around the text :
3. Add a soft edged box around the text area which darkens the background :

Hopefully those images preview a bit better in other people's browsers than they do in mine! If not, give them a click.

Answer 3

Using the text-shadow property, you can achieve an outline effect on your text. A black outline should make white text standout against a white background, whereas it is barely noticable against a black background. (The class name could be chosen "better" so that html does not dictate the appearance, but that is slightly beyond the point of this answer).

.outline
{
  text-shadow:  1px  0px #000,
               -1px  0px #000,
                0px  1px #000,
                0px -1px #000;
}

Another option is to use mix-blend-mode:difference;. This causes the text to appear in the negative color of the background. This method has a few issues though. The negative of grey is grey, making it hard to read (same applies for some other colors). Not to mention the support for this method is slightly underwhelming.

Lastly you can look at the article "The Art Of The SVG Filter And Why It Is Awesome". They use SVG-filters to create a wide variety of cool effects you simply cannot achieve (yet) using css.