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.
- Default: #333333
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 ACA4A3): #F2F2F2
- 20% (Sky #00B6ED): #CCF0FB
- 20% (Prairie #FFC836): #FFF4D7
- 20% (Sunset #ED8C00): #FBE8CC
- 20% (Dawn #EF4B8B): #FCDEB8
- 20% (Pasture #78BF26): #F6F8DF
Interactive objects
Colours used for all interactive elements, such as links, buttons, cards, form elements and more.
- Default: #0077CD
- Hover: #333333
- Focus/active: #FEBA35
- Visited: #756693
Neutral colours
Use neutral grays for text, background colour, dividers and borders.
- Text: #333333
- Dividers and borders: #DCDCDC
- Light background: #F2F2F2
Used for dividers and outlines only. Do not use as a background colour because it is not accessible with white or black text.
Alert 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
Callouts
Apply the following colour to bolded callout text.
- Important information: #002C4E
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.