Contrast is a design principle that relates to the difference between two objects. For example, the size of a title text compared to the size of the subtitle text. Other examples would include the difference between two fonts, the sizes of two bodies of text (not the font size, but the actual size of the entire body), the sizes of images on the same page or section, and even the size of the compared items. to the size of the physical project.
The most common mistake when using contrast is not making the elements different enough. If a reader comes across text that has a header size slightly larger than the body text size, then it causes confusion. First, the reader may not even notice the difference, and therefore may not realize that the headline is, in fact, more important than the text below. Others may notice the difference but not be sure if it was intentional or not. You want to design each page of your creation to flow without technical errors that distract the reader from fully understanding the purpose of that page.
A good example of contrast would be a list and its header. The header font size should be much larger than the list text. If it is the same size, or even similar, it will make the header ‘hidden’ and less noticeable as it blends in with the list. In this particular scenario, the use of emphasis, such as bold or underline, would help the heading stand out from the body of text below. It would also be wise to leave some space between the title and the text. The ‘white space’ it creates would also add a bit more contrast between the two elements.
Contrast is also important when it comes to images. Obviously, the images should be large enough to be easily viewed, but the contrast between the images can also affect the reader’s attention. When working with multiple images, try to choose one that emphasizes the purpose of the page or project. Make it bigger than all the other images in view. This will make the reader’s eyes look at the bigger (and more important) picture first. Using the other images in a smaller size allows readers to get more visual information without distracting from the emphasis in the larger image.
Contrast can also be used between page elements and the page itself. Unused space in your project is called ‘white space’ (even if it’s not white). It is a term that refers to the areas between the bodies of text, images and project borders. The use of white space can create contrast with objects on the page. The more white space around a specific object, the more it will stand out. This can be better explained by mentioning the opposite. Have you ever seen a project that was too messy? Nothing stands out and your eyes don’t know where to look first. An unordered page has no blank spaces. Here’s a unique example to help you understand how contrast can work with part size. Often T-shirt designers will use large block letters to get your attention. Contrast is the size of the letter compared to what you would normally expect to see on a shirt. I once saw a T-shirt that had a whole paragraph tucked into a quarter-sized circle on the front. Surprisingly, the T-shirt drew more attention than the ones with big capital letters. Why? The amount of space around it combined with the unexpectedly small size of the text drew people’s attention to the point of the text.
When you use contrast in your designs, make it obvious. Don’t leave room for confusion or make readers/viewers wonder if it was intentional or a typo. Make important text stand out with size and emphasis (bold, underline, italics) and use the size of images or lines to direct the “flow” of the page and therefore the reader’s eyes. Make the page make the reader see what you want them to see, in the order they need to see it.
