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]
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]