I'm a developer and don't have much design experience. I'm creating a landing page for a project I'm working on. I want to use the below image as the background for my landing page.

As you can see the text on it is not visible. I have tried using a few colors and none of them look good on that image because some part of the text gets joined with the image.

Can you please advise me on what color I should use?

enter image description here

Thank you

  • I would try adding a drop shadow or a stroke on the text to have it stand out. Alternatively, use a less busy background.
    – Hanna
    Jul 6 '15 at 14:59

It's hard to have the perfect color and contrast since the background has almost every color possible!

But you can add some effects behind your text to light it up or to make it darker, and play with the contrast this way. That lets you also some freedom to use another accent color... Eg. the color of the logo of the business that website is created for.

You can't do all these effects with CSS, both some of them yes. I did these with Photoshop and used the layer style (double click on the layers with your text to see them.)

Here is an example with a transparent white box:

Transparent box

Here is an example with a transparent full width white box:

Full width transparent box

Here is an example with a transparent full width black box:

Full width black box

Here is an example with a large drop shadow and a box:

drop shadow for text

Here is an example with a glow and a box:

outerglow effect on text

There's many options for that kind of projects but maybe these examples will give you some ideas!

If you only want to use text and nothing else, then you should choose the boldest font you can find, and if possible add a black outline or something around it.

  • 1
    +1 - The outline, by the way, is easy to add in CSS with text-shadow (you can use multiple hard shadows in a single text-shadow property declaration). Unfortunately that leaves older versions of Internet Explorer out in the cold. A panel as suggested here is the easiest cross-browser solution; the alternative would be to use conditional comments to introduce CSS for a panel in IE9 and below. Jul 4 '15 at 6:27

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