Colours

The colour palette provides a colour structure for your website, which you will be able to adapt to the colours of your digital brand. Theming for the New Zealand Government Design System (NZGDS) palette is being worked on now, and will be available in the near future.

Colour choice for the design system was based on a survey of the palettes used on websites of 15 core New Zealand government agencies. We grouped these colours by hue and brightness, and discovered they fell into distinct categories. These categories formed the basis of our colour structure.

Colour contrast

Accessible colour contrast ratios help people with sight and colour vision conditions to understand coloured text and design features. In New Zealand, over 8% of men have some form of colour-blindness, and so do some women. Others have vision affected by colour contrast and sizing conditions.

The contrast ratio of text and interactive elements in your website must meet the NZ Government Web Accessibility Standard, specifically the Web Content Accessibility Guidelines ( WCAG) 2.1 to level AA. The New Zealand Government Design System (NZGDS) has been built to meet these standards.

To ensure compliance, only use the variables in the context they are designed for.

Greys suite

The Slate in this grey palette is used for all text and core UI, such as borders of text input fields and checkboxes. The suite of grey tints can be used for a variety of graphic elements.

Brand colours

Once theming is released, you will be able to customise this palette to express your digital brand.

UI colours

This range has been carefully selected to meet the Web Accessibility Standard for the design system’s user interface.

Alerts

These colours are used for alerts, such as confirming success with text input, warnings, and error messages. This ‘traffic light’ palette is commonly used for this purpose. To avoid confusing the user, don’t use these colours — or tints of them — for any other purpose.

Text colours

These text and background colour combinations have been tested to meet the WCAG 2.1 text contrast requirements. For each of the background colours below, a list of compliant text colours is provided.

Core government brand colours

These colours are part of the core all-of-government brand and should only be used as shown.