This example website uses the following colours:
  • Primary Colour

    The dominant colour of your brand, and is used throughout the site and in most elements / blocks, eg. image banners, footer, feedback tools etc.

    Minimum contrast of 4.5:1 needed with white.

  • Secondary Colour

    Used sparingly throughout elements / blocks to reinforce your brand.

    Minimum contrast of 4.5:1 needed with white.

  • Accent Colour

    Compliments the main colours of your brand. It is used for decorative purposes, focus and hover and hover indicator on form elements for accessibility, and and in feedback tool components to enhance interactivity.

    Minimum contrast of 3:1 needed with white.

  • Body Text Colour

    Minimum contrast of 4.5:1 needed with white.

  • Links Colour

    Minimum contrast of 4.5:1 needed with white, and 3:1 contrast with Body Text colour.

  • Buttons Colour

    Minimum contrast of 4.5:1 needed with white.

  • Headings Colour

    Minimum contrast of 3:1 needed with white.

Explore Tools

A comprehensive collection of Social Pinpoint tools


Explore Accessibility

Further reading on how colour selection plays a part in creating an accessible website