Skip to main content

Colours, images and logos

How Govt.nz uses colours, images and logos.

Colours

Govt.nz 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

#336699

$blue

Blue on hover

#1A4D80

$blue-hover

Orange

#D34322

$orange

Orange on hover

#B73A1E

$orange-hover

Dark grey

#4C4C4C

$dark-grey

Dark grey on hover

#3D3D3D

$dark-grey-hover

Dove

#EBEBEB

$dove

Grey

#ABABAB

$border-grey

White

#FFFFFF

$white

Black

#000000

$black

Purple

#993366

$purple

Purple on hover

#6A2347

$purple-hover

How the colours are used

Black

Default text colour for body text and page headers.

Blue

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

Orange

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.

Grey

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

Dove

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

Purple

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, Govt.nz 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

Govt.nz 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 — Govt.nz uses a contrast ratio of 3:1.

You can check the contrast ratio of Govt.nz 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

Images on the website include feature images, graphs, infographics and icons.

Govt.nz follows the NZ Government Accessibility Guidelines for images.

NZ Government Web Accessibility Standard 1.1

Copyright

Ownership of the images is listed with the copyright information.

Copyright and attribution

Logos

Govt.nz 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 Govt.nz

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