Contrast is defined as “the difference in visual properties that makes an object distinguishable from other objects and the background”. We like to say it means to make some things stand out more than others. A website needs to have some variation and contrast.
In this example of the image, you see the background has a subtle yet powerful image. However, the foreground or informational panels almost jump off the page and catch your attention.
Things to Consider:
Group things that are the same together
Make things that are different stand out
Don’t be “slightly different” (choose same or very different)
Strong contrast helps visually separate content
Good contrast makes a design more visually appealing
Contrast is great for “calls to action” and “next steps”
You can contrast things like font size, colour and shape on the same page.