Colour palette

Primary colours

These are the Alberta.ca website brand colours. We use these colours throughout the website to guide the eye and highlight the important information, such as the title page and lead sentence.

• Dark: #005072
• Default: #0081A2

Band colours

Our interactive blue is not accessible on the band colours. If using band colours, we must continue to meet WCAG accessibility guidelines to ensure the links and the underline are black (#333333).

• 20% (Light grey): #EEEEEE
• 20% (Sky): #CCE6EC
• 20% (Prairie): #FCF1CC
• 20% (Sunset): #FFE4CC
• 20% (Dusk): #F7CCE3
• 20% (Pasture): #E4F1CC

Interactive objects

Colours used for all interactive elements, such as links, buttons, cards, form elements and more.

• Default: #0070C4
• Hover: #333333
• Focus/active: #FEBA35

Neutral colours

Use neutral grays for text, background colour, dividers and borders.

• Text: #333333
• Dividers and borders: #DCDCDC
• Light background: #F1F1F1
• Medium grey: #919191

Used for dividers and outlines only. Do not use as a background colour because it is not accessible with white or black text.

Notifications or status

Apply the following colours exclusively for global notification banners, alert or callout boxes.

• Critical: #171D233 or #333333
• Emergency/error: #DA291C or #FC1921
• Caution: #F9CR2D or #FEBA35
• Important information: #004A8F or #005DAA
• Important date/success: #006F4C or #00853F

Contrast and accessibility

In accordance with WCAG 2.0 standards, to maintain a contrast ratio of 4.5 for all text sizes, the following rules apply:

• All brand colour backgrounds are accessible with white text.
• All light colour backgrounds are accessible with dark text.
• Interactive colour text is accessible on white or light backgrounds.
• Links must be white on primary or dark backgrounds.
• All text on status backgrounds except for yellow (dark) must also be white.