This page has guidance for project teams developing digital services and products.
Extended palette
The shades in the 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 government's digital service standard #14 and it will provide a consistent user experience.
Are you developing print materials?
If you're developing print materials you should only use the brand's primary and secondary colour palettes and their tints.
Colour contrast
The extended palette meets WCAG level AAA contrast levels.
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.
Applying colour to alerts
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
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
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
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
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
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
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
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
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
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
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