How to best display text over an image on the landing page

Question

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

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:

So for this image:

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.

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.