Contrast is defined as “the difference in visual properties that makes an object distinguishable from other objects and the background” (source: wiki : https://en.wikipedia.org/wiki/Contrast_%28vision%29). 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.
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. [link an example of size, colour, shape]