Learn
Color for UI

Contrast Constraints

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.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.