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