Colour palette

Brand 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.

• Dark: #005072
• Default: #0081A2

Clickable objects colours

Use these colours only for hyperlinks such as links and button elements.

• Default: #0070C4
• Hover: #004F84
• Focus/active: #FEBA35

Neutral colours

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

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

Notification colours

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

• Critical: #333333
• Emergency/error: #FC1921
• Caution: #FEBA35
• Important information: #005DAA
• Important date/success: #00853F

Contrast and accessibility

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

• All of the brand colour backgrounds are accessible with white text.
• All of the 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 with the exception of yellow (dark) must also be white.