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, 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.
- 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.