Design Delight 1 - Contrast
In one ear and out the other…
Or rather, in one eye and out the other. That’s what happens to your content when customers are viewing a web page that lacks the most important visual design principle of them all: contrast.
Such an easy concept to understand, yet so often violated. Simply put, contrast makes things more clear. When there is contrast between two visual elements, it makes each element more clear and defined. Clarity is essential to captivating and intuitive visual experiences.
The most common place we see the law of contrast being broken, is with text. This is especially common on hero headers of websites and mobile apps. So many designers and do-it-yourselfers will create a header with a beautiful, captivating background image that’s too close on the spectrum of luminance to the text overtop. (Think of luminance as a measure of how light or dark something is.) This makes for a frustrating experience for the user. They’re forced to put in extra effort to make out the text, instead of enjoying the meaning behind it, and its relationship with the image.
Ensuring good contrast:
What is a good way to avoid this? Well, usually if we have a full screen background image, then the overlying text will be white. However often times the background picture is either not dark enough, or has certain elements that are lighter. In both instances the white text on top gets lost due to a lack of contrast. A simple way to fix this without compromising the compelling effect of the background image, is to use an image overlay.
This involves placing a semi-transparent layer of colour between the background image and the white text. This will provide an added level of darkness to the background image, which will increase the contrast between it and the white text, giving more pop and clarity to what we want our viewer to read.
We can apply this image overlay either directly on our site with code, or we can add it to our image editing software (Photoshop, Illustrator, etc) and then upload the overlayed image as a single object.
Here are three tips to keep in mind when adding an image overlay to your background picture:
1. Less is more – The degree of opacity needed for an effective image overlay is minimal. (What do we mean by opacity? When something is 100% opaque, you can’t see through it at all. When something is 0% opaque, it’s fully transparent.) As a rule of thumb, the darker the colour of your overlay, the more transparent and less opaque it can be. A deep purple can achieve enough background contrast at just 10 – 20% opacity, whereas a bright orange may need to be at 30 – 50% opacity in order to make the text on top clear enough.
2. Colour matching – The colour of your overlay can actually be used to strengthen the colour scheme of the viewing experience. All you need to do is choose one of the primary colours that contribute to the colour theme of your background image or web page. It you can manage to make that be one of the primary colours of your logo or visual identity, then you’re also strengthening your brand at the same time.
3. Gradients are your friend – You can also apply a gradient to your image overlay. For example, if your text is in the very centre of your page, you can apply an overlay that is more opaque in the centre, and more transparent as it expands outwards. This draws more attention to the text while impacting the clarity of the background image even less. Another technique is to make the background image fade in a certain direction, until it’s completely transparent, revealing a white background. You can then place dark text overtop that white area. This kind of effect lets you tell a story in a more engaging way.
Here is an example of both:
Now that you have a grasp of how to use contrast to make text and images play off each other, you can use it to improve your web pages, giving your audience more compelling browsing experiences.
But don’t jump into the foray just yet. There’s much more to contrast than just today’s insight. This series will cover several fundamental design principles, and practically all of them have an underlying element of contrast. To truly master the use of contrast takes years of practice, and knowing the other visual principles in which it resides, gives you a big head start. So, onwards we go.