Skip to main content

Colours, images and logos

How uses colours, images and logos.

Colours uses limited colours to add emphasis to the text or content elements they're applied to.

Colour swatches

Blue and orange are the primary colours, so they're used first. Other colours are only introduced if needed. Infographics or illustrations use these colours as a starting point.




Blue on hover






Orange on hover



Dark grey



Dark grey on hover


















Purple on hover



How the colours are used


Default text colour for body text and page headers.


Subtle highlight for links, buttons, alert style box and success messages.


A screaming highlight used for search buttons, warning style box and error messages.

Dark grey

For less important text, for example breadcrumbs and search result details — this text is usually smaller.


For borders and lines, for example table grid lines, above accordions and promo tiles.


A background for text to set it apart from the main content, for example breadcrumbs, and notes such as alerts or warnings.


As a contrast to the blue subtle highlight, for example visited links.

Colour accessibility

Colour accessibility is important for people who may:

  • have a visual impairment
  • be viewing the site in bright sunlight
  • have printed a page in black and white.

Colour that has meaning

If colour has a meaning assigned to it, uses other methods to supplement this information. For example, a graph using colours also has text labels. For colour that has no meaning, like decorative text, or logos and brand names, accessibility guidelines are not necessarily followed.

Contrast aims for good contrast between text and the background it appears on.

To be effective, the contrast ratio between text colour and the background needs to be at least 4.5:1.

For large text — 18 points/24 pixels upwards or, for bold text, 14 points/19 pixels upwards — uses a contrast ratio of 3:1.

You can check the contrast ratio of colours using an online tool.

WebAim colour contrast checker

Colour combinations

On white

Black text

Blue text

Orange text

Purple text

Dark grey text

On dove

Black text

Blue text

Orange text

Purple text

Dark grey text

On blue

White text

On orange

White text

On dark grey

White text


Images on the website include feature images, graphs, infographics and icons. follows the NZ Government Accessibility Guidelines for images.

NZ Government Web Accessibility Standard 1.1


Ownership of the images is listed with the copyright information.

Copyright and attribution

Logos uses the New Zealand government all-of-government brand in combination with the Coat of Arms. The Public Service Commission looks after the all-of-government brand.

The all-of-government brand

The Coat of Arms

Linking to

Utility links and page information

Was this page helpful?
Thanks, do you want to tell us more?

Do not enter personal information. All fields are optional.

Last updated