Contrast and brightness to use for the page elements

Colours create a visual hierarchy with their contrast and brightness. You can use them to lead the reader’s eye trough the page. Emphasize important elements on your website with a colour of higher contrast.

You can test the visual hierarchy by changing your layout in a grey scale image, after you have inserted the colours: The header usually uses the highest contrast, followed by the navigation, the scan columns, the content area and the page footer.

Colourful canvas with different contrast for header, navigtion, scan colomns and page footer

Grey scale canvas with the highest contrast for the header

How to create a grey scale image?

  1. Take a screenshot of your theme. For example with the Firefox Add-on Awesome Screenshot:
  2. Upload the screenshot to
  3. Click on “show fun effects”.
  4. Choose the “Black & White / Sepia Tool”.
  5. Click on “Grayscale”.

Related links

Post a comment or question

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s