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 :)

  • This thread may help: graphicdesign.stackexchange.com/questions/17359/…
    – John
    Jun 21 '13 at 18:56
  • Because it will be dynamic, it's very hard to understand the contrast of the image.
    – Burak
    Jun 21 '13 at 19:19
  • I think they way you are doing it is best. If you can't control the image underneath, then tint it to something else. It is a very effective way to ensure adequate contrast for your text, and I think it looks classier and is more readable than using heavy drop shadows or strokes.
    – John
    Jun 21 '13 at 19:35
  • 1
    Possible duplicate of Text not very readable on different image backgrounds Jul 6 '19 at 21:48
  • @ZachSaucier - I think not a dupe as the other is relevant to a static image, whereas this is clearly about graphic design choices in a dynamic content context. Jul 8 '19 at 16:05

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.


  • Try adding a slight orange tint to the text to make it contrast against the purple somewhat more than (near-)plain white..? :)
    – kwah
    Jun 22 '13 at 3:37
  • I wouldn't add orange. That would not increase contrast. Just my opinion though.
    – Scott
    Jun 22 '13 at 8:05
  • This looks very beautiful. But I have a problem. For each restaurant, I should change the basic color of the theme, so the color should be dynamic, or colorless. That's why I made them white-transparent. Do you think it is ok if I put black gradient layer over the photo so buttons with white background will be in contrast?
    – Burak
    Jun 22 '13 at 10:06
  • Not sure I understand. You mean add a gradient fading from top to bottom over the photo? That may work... but it really depends greatly on the photos being used. That may ruin some photos.
    – Scott
    Jun 22 '13 at 10:17
  • If you want to avoid all color for the buttons, I'd go somewhere in the neighborhood of #2d2d2d for a background color on them, but you could go lighter than that if desired. Optimally any dark area should never be solid black but a deep, rich color. However, if there's no common color to use, then the greys tend to increase readability more than a solid black will (easier on the eyes) The key is high contrast but not glaringly high contrast. It's a fine line. I'd probably opt for the lower opacity version if using grey buttons. White or black is just not going to work for some photos.
    – Scott
    Jun 22 '13 at 10:23

While the title is easy to read in your second example I would consider moving it below the image and rearranging the other elements (price, description, etc). The image is very important so you should try not to obscure it if possible.

Another alternative would be to hide it then slide it up on rollover to how you have shown. You could also have the buttons almost transparent and fade them in. This keepsthe image as the hero.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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