My dilemma is aptly shown in the picture below:

enter image description here

How can I make the text more legible?

  • 1
    I think this is a design question rather than a usability question
    – icc97
    Commented Feb 16, 2013 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
    Commented Feb 22, 2013 at 10:57

9 Answers 9


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

enter image description here

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

  • 7
    I thought the example was the lettering on the t-shirt at first...
    – fredley
    Commented Feb 15, 2013 at 15:34

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

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


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!


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

  • A gradient as mentioned in 3. is known as "scrim" in Material Design (see Text Protection)
    – CodeManX
    Commented Oct 17, 2016 at 0:00

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

Example image

  • That is a bad example. The contrast is very low; the background should be a bit lighter. Commented Feb 18, 2013 at 11:54

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.


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.


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

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

  • I think Medium may be doing this now. You would want to analyse the image on a region basis - ie the actual place where the text will be overlaid - though. You would also want some logic so that if it's too bright and too dark within the same region, fall back to another technique (e.g. shadow or background/overlay between image and text).
    – mahemoff
    Commented Dec 2, 2015 at 21:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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