Colour and palettes for digital services

Date adopted: 
May 4, 2022
Last update: 
May 5, 2022

This page has guidance for project teams developing digital services and products.

Extended palette

The shades in this extended palette ensure the government's digital services and products meet and exceed Web Accessibility Guidelines (WCAG) 2.0 AA. This is a requirement to meet the governments digital service standard #14 and it will provide a consistent user experience. 

Are you developing print materials? If you are developing print materials you should only use the brand's primary and secondary colour palettes and their tints.

Extended colour palette

Colour contrast

The extended palette meets WCAG level AAA contrast levels.

Extended colour palette showing colour contrast

Applying colour to hyperlinks

The link colour is a shade of River Blue with 60% black. The original value of black for River Blue is 4%.

The visited link is a tint of Twilight at 70%.

The hover link colour is a shade of River Blue with 75% black.

Link, visited link and hover colour meet WCAG level AAA on a white background.

Extended colour palette for hyperlinks

Applying colour to alerts

Success alerts

Extended colour palette for success alerts

The border, icon and text colour is a shade of Bryum Moss with 80% black. The original value of black for Bryum Moss is 20%.

The background colour is a tint of Bryum Moss at 15%.

This colour combination meets WCAG level AAA.

  • Border #244402
  • Icon #244402 (transparent icon)
  • Text #244402
  • Background #e1ebd7

Information alerts

Extended colour palette for information alerts

The border, icon and text colour is the Zinc colour with no modification of the percentage of black.

The background colour is a tint of River Blue at 15%.

This colour combination meets WCAG level AAA. 

  • Border #244C5A
  • Icon #244C5A (transparent icon)
  • Text #244C5A
  • Background #D4ECEF

Warning alert

Extended colour palette for warning alerts

The border, icon and text colour is a shade of Midnight Sun with 80% black. The original value of black for Midnight Sun is 0%.

The background colour is a tint of Midnight Sun at 24%.

This colour combination meets WCAG level AAA.

  • Border #563B00
  • Icon #563B00 (transparent icon)
  • Text #563B00
  • Background #FFE9C3

Danger alert

Extended colour palette for danger alerts

The border, icon and text colour is a shade of Lichen with 45% black. The original value of black for Lichen is 0%.

The background colour is a tint of Lichen at 24%.

This colour combination meets WCAG level AAA. 

  • Border #244C5A
  • Icon #244C5A (transparent icon)
  • Text #244C5A
  • Background #D4ECEF

Yukon.ca only – in-page alert

Extended colour palette for Yukon.ca in page alerts

The icon and text colour is a tint of black at 85%.

The background colour is a tint of Midnight Sun at 10%.

This colour combination, including the link colour, meets WCAG level AAA. 

  • Icon #444142 (transparent icon)
  • Text #444142
  • Background #fff4e4

Yukon.ca only – engagements alert

Extended colour palette for Yukon.ca engagement alerts

The colour border is Lichen with no modification on the percentage of black.

The icon and text colour is a tint of black at 85%.

The background colour for the engagement alert is a tint of Midnight Sun at 24%.

  • Border #DC4405
  • Text #444142
  • Background #FFE9C3

Yukon.ca only – closed engagements alert

Extended colour palette for Yukon.ca closed engagement alerts

The background colour for the engagement alert is a tint of River Blue at 15%.

  • Border #DC4405
  • Icon #444142 (transparent icon)
  • Text #444142
  • Background #D4ECEF

Both colour combinations meet WCAG level AAA.

Buttons

Primary button

Extended colour palette primary button

The border and background colour is a shade of River Blue with 55% of black. The text colour is white.

  • Border #00616d
  • Text #ffffff
  • Background #00616d

Primary button hover state

Extended colour palette primary button hover state

The border and background colour is a shade of River Blue with 75% of black. The text colour is white.

  • Border #00454e
  • Text #ffffff
  • Background #00454e

Secondary button 

Extended colour palette secondary button

The border and text colour is a shade of River Blue with 55% of black. The background colour is white.

  • Border #00616d
  • Text #00616d
  • Background #ffffff

Secondary image hover state

Extended colour palette secondary button hover state

The border and text colour is s a shade of River Blue with 75% of black. The text colour is white.

  • Border #00454e
  • Text #00454e
  • Background #ffffff