Contrast is a great way to differentiate elements on a page. However, by doing so to all elements, it can cause a cognitive overload for users. When there are a lot of competing elements, everything is vying for their attention, which can lead to nothing being dominant on the page.
When thinking about and applying contrast to a page through the use of color, it’s important to limit the overall amount of contrast. This helps you as the designer to highlight only the most important parts of the page—the actions you want the users to focus on and take.
Having a neutral background (any color with low lightness or saturation) is a good base, because it allows you to add high contrast to the parts of the site where you want to direct a user’s attention.
Similarly, a dark background with light colored text can be a reasonable alternative, depending on the assets like image or video, that you are displaying on the site.
On the other hand, a medium background is a little bit more tricky because it can be hard to create enough contrast and allow for clear visibility.
Instructions
Let’s start off by addressing the background color of the header and hero section. A hero is a section placed prominently on a web page like a banner.
First, we will start by applying a background color to the navigation that helps bring our links into focus.
In the styles.css file, find the CSS selector .site-header and replace the property background-color from #EBEBEB to #34474F.
You can find this selector in section 4 which is called Modules Styles.
Now let’s blend that navigation color into the background of our hero section.
In the styles.css file, find the CSS selector .site-main-background and replace the property background-color from #EBEBEB to #34474F.
This selector can be found in section 6 which is called Page Styles.
Moving right along. As you can see now, the hero heading and hero paragraph text is very hard to read. We want to make sure we maximize our contrast here. Especially since this text introduces users to our page’s core responsibility.
In the styles.css file, find the CSS selector group
and replace the property color from #2A2A2A to #FFFFFF.
Lastly, we need to adjust our navigation link text so it is legible.
In the styles.css file, find the CSS selector .site-nav-link and replace the property color from #959595 to #FFFFFF.
To find this selector navigate back up to section 4, Modules Styles.