What is the best way to write text over a photo so that it can easily be read?

This is a view from an app for restaurant.

As you can see, buttons and title of the dish cannot be read easily, especially over white tone photos.

enter image description here

I applied some gradient mask between photo and text, it is better now. But I want to know the best way of it.

And can you give me some clue about re-arranging the buttons?

Thank you

P.S: I am only a Software Engineer 🙂


For optimum viewing, and given that you can’t control what’s below them, those buttons should really have a set, high contrast, background color/gradient. This would ensure that the text is always readable.

You can also do away with the drop shadow on the type to provide a more upper-scale, fluid, appearance.


Another alternative, if you want the photo to be perceived behind the buttons is to lower the opacity while using a high contrast color. Similar to how you’ve handled things lower in your image. While not quite as readable as a solid color, this at least allows you to add some darkness behind the text to ensure it’s readable over lighter areas.


Source : Link , Question Author : Burak , Answer Author : Scott

Leave a Comment