Part of Components

Colour palette

How to apply the accessible, brand-derived colour palette from the Government of Alberta colour standards.

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.