Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

My dilemma is aptly shown in the picture below:

enter image description here

How can I make the text more legible?

share|improve this question
1  
I think this is a design question rather than a usability question –  icc97 Feb 16 '13 at 10:02
    
You can look at the IKEA catalog/website for inspiration. They've been doing this since before the internet. If you're free to place the text for each image, you can put it over a region where the contrast will be high (if the text were dark you could put it over the white square at the top). –  Peter Feb 22 '13 at 10:57
add comment

9 Answers 9

up vote 25 down vote accepted

Alternatively, you can add semi-transparent black background behind the letters.

enter image description here

Example taken from: http://css-tricks.com/examples/TypeOverImage/

share|improve this answer
7  
I thought the example was the lettering on the t-shirt at first... –  fredley Feb 15 '13 at 15:34
add comment

If you're like me and care a lot about the visual design of your site I'd use one of the following techniques:

  1. Darken the background on your photos and use white text, as seen here on my website

  2. Use a semitransparent box behind your text content, similar to this example from the Soundcloud android appSoundcloud app example image

  3. Use a gradient or a blur effect as seen in the example below from Circa News to partially dim the section of your photo that has text on it in order to draw attention to your text, as well you may want to add a slight background shadow to your text.enter image description here

share|improve this answer
add comment

Sometimes you can calculate the average color of the photo or its luminance and choose between black / white based on the outcome.

More here: http://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color

share|improve this answer
add comment

In addition to the above suggestions (semi-transparent box around the text, outlines, shadows, contrasting colour, etc.) also watch where on the picture you place the text and of course on what picture. On a noisy picture nothing but a fully opaque background or a very thick border will make the text easy to read. Pick an area with as few lightness/colour changes as possible. In the above example such areas are bottom left corner and top middle section. In such areas nothing more than a contrasting colour is needed. But noisier areas and unknown images (for example random or not really prepared as a background to a banner) require stronger measures: more opaque backgrounds, stronger shadows, and so on. Also, thicker fonts are somewhat easier to read against an uneven background, but still require a good contrast against the background.

share|improve this answer
add comment

You are attempting to show both the picture and the text in the same space.
If it's for desktop then you might add a vanishing (animated) contrasting foggy background to make the text legible and the picture less visible, and renew the background when the user moused over the picture.

share|improve this answer
add comment

A semi-transparent white (or a contrasting colour) box beneath the text looks both professional and readable:

Example image

share|improve this answer
    
That is a bad example. The contrast is very low; the background should be a bit lighter. –  DisgruntledGoat Feb 18 '13 at 11:54
add comment

Best options:

  1. Put it in a box, fully opaque or semi-transparent, your choice. A few examples on these landing page templates. Another example here: https://soundcloud.com
  2. Add a stroke to the text(like Benny's answer)
  3. Use a limitted set of images, that means find the right picture(s) and make the text in contrast with the image(example, if the picture is dark, use bright text, if its bright use dark text, color contrast is also good)

Other options > use a glow or drop shadow for the text but I don't recommend that because what looks readable on your screen might not be as readable on other screens(brighter/darker than yours)

Good luck!

share|improve this answer
add comment

Follow conventions already tried and tested in video captioning.

  1. High contrast outline
  2. High contrast shadow
  3. High contrast background stripe/box (usually transparent)
  4. Place text strategically in dark or light areas
share|improve this answer
add comment

If you use a black border around each contur of the white letter, the text would be more readable. If the background is black or dark, only the white will show and if the background is white or light the reader will see the black contour of each white letter.

You can see this effect on foreign movies with text translation even I the colors user often are yellow and black. Like this image:

enter image description here

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.