How to select a font color to go on a very busy background?


Question

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

1
3
7/4/2015 11:09:00 PM

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.

7
7/4/2015 2:14:00 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
^