Darkened background for text contrast

How to use it

Add a layer of mostly transparent colour between the background and foreground content, such as text.

When to use it

If you have a busy or bright background, such as a photo, and you have text over it, you can add a layer of transparent colour to increase the contrast of the foreground content, such as text, to make it easier to read. You can do this in other ways, such as blurring the photograph, but if you want your user to see the photograph clearly, making it darker in this way helps.

What to watch out for

If your foreground content is brightly coloured, using a dark colour helps most with this technique. If your foreground content is dark, you should use a light colour.

Examples