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.