The Law of Contrast: Designing for Emphasis
The Law that holds your attention, but also distracts you at the same time
Introduction
Imagine you are in a room filled with red balloons. Suddenly, you spot a single blue balloon floating amidst the red sea. Without a doubt, your eyes are naturally drawn to that blue balloon. This is a simple yet powerful example of the Law of Contrast at work in our everyday lives.
In the realm of design, this principle plays an essential role in creating emphasis and guiding attention. The Law of Contrast states that when two things are completely different, the degree of difference is amplified. It’s about leveraging the power of distinction to highlight and bring focus to specific elements in a design. This article explores this fascinating law, its historical development, and its practical implications, particularly in the field of User Experience (UX) design.
We are looking at Day 13 of the series, “30 Days of UX Laws and Principles”. If haven’t read the previous chapter, The Law of Readability Check it out before you continue. In this article, we will dive into :
- Breaking down the Law of Contrast
- The Law of Contrast and UX
- Standards for Contrast checking
- The Law of Contrast in Marketing
- Real-life Brand Examples
- Difficulties and Limitations
Breaking down The Law of Contrast
The Law of Contrast is not a recent invention. It finds its roots in the early days of visual art and design. Over the years, researchers and designers have delved into the intricacies of this concept, conducting experiments to understand its impact on human perception.
In its essence, the Law of Contrast states that elements that significantly differ from others in the same field will stand out. This could be in terms of color, size, shape, or any other visual characteristic. The more significant the difference, the greater the emphasis, thereby making the element more noticeable and memorable.
The Law of Contrast and UX
The Law of Contrast is incredibly valuable when it comes to User Experience (UX) design. In UX, the main goal is to create a user-friendly and intuitive interface. The Law of Contrast aids in achieving this objective by emphasizing essential elements and guiding users to desired actions.
Let’s return to our example of the website with a white background and black text. The high contrast makes the text easily readable, reducing the cognitive load on the users. Cognitive load refers to the mental effort required to process information. By reducing this load, we increase the chances of users engaging with the content, thus enhancing their overall experience.
Now, let’s extend this to interactive elements like buttons or links. Contrast can be used effectively to guide user behavior. For example, suppose a webpage has a subdued color palette of light orange and white. In this case, a purple “Buy Now” button would stand out due to its high contrast with the background. The contrast not only draws attention but also acts as a visual cue for the users, guiding them towards a specific action — in this case, making a purchase.
Moreover, contrast can be used to establish a visual hierarchy in UX design. Elements that need to stand out or demand immediate attention, like call-to-action buttons or alerts, should be in high contrast with the rest of the design. Lesser important elements, like secondary information or background details, can have lower contrast. This visual hierarchy can guide users naturally through the interface flow, improving navigation and user engagement.
It’s important to note that the Law of Contrast should be applied thoughtfully. While high contrast can be beneficial, overly stark contrasts might make the interface harsh and challenging to engage with for long periods. Moreover, designers should consider users with visual impairments and ensure that the contrast is sufficient for them.
Finally, it’s not just about contrasting colors; designers can also play with opposite sizes, shapes, positions, and even animations to create an engaging and user-friendly interface.
Standards for Contrast Checking
When we talk about contrast in design, particularly in digital environments, it’s crucial to take into account accessibility. Designers need to ensure that their work can be easily perceived and understood by all users, including those with visual impairments. To aid designers in this task, standards for contrast checking have been developed: the AA and AAA standards.
Simply put, the AA and AAA standards are guidelines to ensure text is easy to read against its background color. An AA rating means the contrast ratio is at least 4.5:1 for normal text and 3:1 for large text. AAA takes it a step further, requiring a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
These guidelines make sure that the contrast is strong enough so the content is accessible to as many people as possible, including those with visual impairments like color blindness or low vision.
To make life easier for designers, many design tools have incorporated in-built contrast-checking features. These tools can automatically check if the contrast between the text and the background meets the AA or AAA standards.
One such tool is Adobe XD, which provides an option to check color contrast right in the design process, helping ensure your design is not just appealing, but also accessible. Similarly, Sketch, another popular design tool, also offers plugins like Stark that allow you to test your design’s color contrast easily.
By using these guidelines and tools, designers can create designs that are not just visually appealing but also accessible and inclusive, enhancing the user experience for everyone.
The Law of Contrast in Marketing
The Law of Contrast, when skillfully applied, can greatly enhance marketing strategies. It can direct attention, create emphasis, and inspire action. Here’s how it can be used in various aspects of marketing:
Banners
Effective banners instantly draw attention and communicate a message quickly. Coca-Cola often uses this strategy. They employ bold, red banners with white text. This stark contrast ensures their branding is immediately recognized, even from a distance.
Landing Pages
A well-contrasted landing page can guide a visitor’s journey, emphasizing important information and calls to action. MailChimp, an email marketing platform, uses contrast effectively on its landing pages. They utilize bright, bold colors for their CTA buttons against a muted background, making it virtually impossible for visitors to miss their next action step.
Calls to Action (CTAs)
The contrast in CTAs can significantly influence conversion rates. Amazon’s yellow “Add to Cart” button on a white background is an excellent example. The button color doesn’t repeat anywhere else on the page, making the desired action prominent.
Video Marketing
In video marketing, contrast can be used to highlight key scenes or products. A notable example is Apple’s product reveal videos. They often showcase the product against a stark, black background. The high contrast ensures the product stands out, keeping viewers’ focus solely on it.
Email Marketing
In email marketing, contrast can be used to direct readers to the key message or action. Dropbox does this effectively by using a clean, white email design with blue accents that stand out and guide the reader through the content.
Real-life Brand Examples
The application of the Law of Contrast is rampant in real-world brands. A striking example is Apple’s website. The tech giant uses a clean, white background with black text for readability. Product images are in high contrast with the background, drawing your eyes directly to them.
Another noteworthy example is Google’s homepage. The search bar, set against a stark white background, is the focal point, emphasizing the company’s core service.
Canva, the online design platform, uses a white and light-colored background with darker colors for its text and interactive elements. This provides a high level of contrast, making it easy for users to distinguish between different sections and elements, thereby simplifying the process of creating designs.
Lastly, the streaming giant Netflix uses contrast effectively too. Its black background makes the vibrant thumbnails of shows and movies stand out, enticing viewers to click and watch.
Difficulties and Limitations
Despite its undeniable importance, the application of the Law of Contrast does come with challenges. Some common issues include:
- Balancing Contrast: High contrast is not always the best approach. It can sometimes lead to visual discomfort, especially for long-term viewing. Designers must strike a balance between making elements stand out and ensuring visual comfort.
-Accommodating Visual Impairments: Contrast must be applied carefully to cater to users with visual impairments. Colors that create high contrast for people with normal vision might not work as well for those with color blindness.
Read an Article I wrote on designing for color-blind to know more about this.
- Device Limitations: Screens vary in size, resolution, and color display. A design might look great on one device but lose its contrast on another.
Conclusion
The Law of Contrast is a fundamental principle in design, helping create emphasis, hierarchy, and visual interest. However, like all tools, it needs to be wielded with understanding and care. When applied skillfully, it can significantly enhance the UX, making the design not just aesthetically pleasing but also highly functional. As designers, it’s essential to continually experiment, learn, and adapt to best harness the power of contrast in our work. After all, just like in our favorite book, it’s the contrasts that make the story memorable.
Check out “30 days of UX laws and principles”
Check out Day 12: The Law of Readability
Check out Day 14: The Law of Repetition
ANNOUNCEMENT 🔥
We’re working on our very own AI tool that lets you create fully editable screens just from text prompts!
Check it out here and don’t forget to join the waitlist :)
