Subtle Contrast In Design

In previous posts I’ve written about the importance of using contrast to create eye-catching designs and bold typography. The concept of contrast in design is to avoid using elements that are similar, but to make them look very different. This is what catches the eye. However, there are of course occasions when you might need to tone down the contrast between elements and/or the background they’re sitting on.

Here’s some straightforward techniques to reduce contrast between elements while still maintaining interest. I’m using a simple, fictional logo to demonstrate.

1. Here’s the original high contrast logo.

2. Here I’ve changed the value of the text at the top and the symbol underneath. These are two examples of how to tone down the contrast between the elements and the background. Visual impact is still there but I’ve reduced the overall contrast.

3. Another method is to put a stroke or border around an element. In the example below, there is a three pixel mid-gray stroke on the text. This intermediate “step” softens the transition between the black text and the white background.

4. In this example, I’ve used white text on a white background which obviously would be invisible without some kind of border, stroke or glow. The light-gray drop shadow on both elements provides a soft transition between foreground text and background but still allows the symbol and text stand out quite nicely.

5. Another easy way to tone down contrast is to use a value or color in the background that is not too dramatically different from the foreground elements.

6. Subtle contrast doesn’t mean lack of color. Here there is strong contrast between the white symbol and the black text, but the warm colored background tones down contrast with the foreground elements while still appearing eye-catching.

These fundamental techniques are not just for logos, they can be applied to web, graphic and print design.  You might look a bit mad if you’re sitting in the office/on the bus, but really squinting your eyes when looking at websites and magazines is a good way to see how “contrasty” elements are in the design.