Table of contents

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.

Was this page helpful?

All fields are required unless otherwise indicated.

You will not receive a reply. Do not enter any personal information such as telephone numbers, addresses, or emails.

Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca. If you require a response, please go to our Contact page.