I want to do something like this (ignoring for now the fact that the image isn't properly aligned yet):

enter image description here

Notice the name "Barack Obama" in the center. I want to keep it that size, but I don't know what to do to make it more legible.

My options are:

  1. Place a background behind the text.
  2. Blur the image so it's a more flat/single color, then programmatically pick (somehow) the highest contrasting color.

For (1), that is like this:

enter image description here

So for this image:

enter image description here

However, that kind of distracts from the overall image IMO, having this block of black or some other color covering it. I wonder if there are any other creative ways to display the text here. Wondering if one could shed some light on what might look the best.

I could place the text with a background at the bottom or top of the image, but then that messes with overall padding styles.

I could also instead just put the text on the landing page and that's it, then you scroll down one viewport to see the image. Hmm.. maybe that is best.

Wondering what books with a lot of graphics do in these cases, like those coffee-table books.

  • 1
    What is the use of this caption? is it just to identify the subject of the photo? could you just use a caption under the image, does it need to be over it? How does this relate to book covers, is your project going to be an interactive website or print? Can you edit your question to make it more focused / add more details on the issue you're trying to solve?
    – Luciano
    Commented Jun 4, 2019 at 11:23
  • 4
    Possible duplicate of Text not very readable on different image backgrounds Commented Jul 6, 2019 at 21:48

1 Answer 1


This is the process I go by:

  1. As-is, with no edits, I use a contrast ratio checker to see where I stand for WCAG compliance. (there are several extensions on google chrome you can use) or this site

  2. If I don't pass, I apply a slight drop shadow to the text, check again for compliance

  3. If that doesn't work, I photoshop the image until it passes the compliance test. usually adjusting curves is all that is needed.

  4. If I find I am spending way too much time editing a picture, then I find another image that meets compliance with my text.

As for changing text styles, you could just do that. But I'm usually limited to the client's branding styles, so I find it much easier just to edit the picture.

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.