Get startedFoundationsExamplesComponentsTokensGet supportSelect your development framework to see all code in your development language. Change framework and version at the top right of the screen.
Design at GoAAccessibilityBrand guidelinesColorIconographyPhotographyLogoTypographyLayoutCapitalizationDate formatError messagesHelper text
ColorColors play a major role in how the Government of Alberta communicates. They serve as a tool to convey clarity, express emotions, and promote inclusivity.

Our palette is divided into these categories:

  • Brand colors
  • Interactive colors
  • Text colors
  • Status colors
  • Greyscale colors
  • Additional colors

For more information about how to use our colors in your digital product, see design tokens.

Brand colors

Brand colors represent our identity and are aligned to the Alberta.ca brand guidelines.

Brand - Default
Brand - Dark
Brand - Light

Interactive colors

Interactive colors are used to assign colors to specific actions and states, such as buttons and links. This helps in enhancing usability and promoting user engagement in our digital products.

Interactive - Default
Interactive - Hover
Interactive - Focus
Interactive - Error
Interactive - Disabled
Interactive - Error Hover
Interactive - Error Disabled

Text colors

Headings, body text, and labels adopt our text colors to ensure visual hierarchy in our layouts and readability across various contexts.

Text - Default
Text - Secondary
Text - Light
Text - Disabled

Status colors

Status colors are used to show various states such as success, warning, error and critical, helping users easily interpret the messages in our products.

Info

Info - Default
Info - Light
Info - Dark
Info - Background

Warning

Warning - Default
Warning - Light
Warning - Dark
Warning - Background

Emergency

Emergency - Default
Emergency - Light
Emergency - Dark
Emergency - Background

Success

Success - Default
Success - Light
Success - Dark
Success - Background

Critical

Critical

Greyscale colors

Greyscale are neutral colors that range from black to white and provide a base for accents, backgrounds and layouts.

Greyscale - White
Greyscale - 100
Greyscale - 200
Greyscale - 400
Greyscale - 500
Greyscale - 600
Greyscale - 800
Greyscale - Black

Extended colors

Extended colors can be used If you need more badge colours or need colours to differentiate between data categories in charts.

Aqua
Aqua - Light
Black
Black - Light
Blue
Blue - Light
Green
Green - Light
Orange
Orange - Light
Pink
Pink - Light
Red
Red - Light
Violet
Violet - Light
White
Yellow
Yellow - Light

Color usage

All government of Alberta products are designed to meet the Web Content and Accessibility Guidelines (WCAG) standards. Level AA compliance is the minimum requirement for accessible design.

Type of contentMinimum ratio (AA rating)
Body text - 18px4.5:1
Large-scale text - 24px3:1

Use an accessibility contrast checker to check color combinations or use our guide below. Logos, decorative objects, disabled form fields, and disabled buttons should be excluded from this test and don't need to be tested for contrast.

Accessible combinations

The combination of two colors, Greyscale White and Brand Default passes the minimum color contrast ratio with 4.5:1 as per Level AA compliance.
Greyscale - White
Brand - Default
The combination of two colors, Greyscale White and Brand Dark passes the minimum color contrast ratio with of 8.78:1 as per Level AA compliance.
Greyscale - White
Brand - Dark
The combination of two colors, Greyscale White and interactive Hover passes the minimum color contrast ratio with 8.56:1 as per Level AA compliance.
Greyscale - White
Interactive - Hover
The combination of two colors, Greyscale White and info default passes the minimum color contrast ratio with 8.84:1 as per Level AA compliance.
Greyscale - White
Info - Default
The combination of two colors, Greyscale White and interactive default passes the minimum color contrast ratio with 5.1:1 as per Level AA compliance.
Greyscale - White
Interactive - Default
The combination of two colors, Greyscale White and Greyscale Black passes the minimum color contrast ratio with 8.84:1 as per Level AA compliance.
Greyscale - White
Greyscale - Black

Inaccessible combinations

The combination of two colors, Greyscale White and Brand Light fails the minimum color contrast ratio with 1.23:1 as per Level AA compliance.
Greyscale - White
Brand - Light
The combination of two colors, Greyscale White and Info light fails the minimum color contrast ratio with 1.72:1 as per Level AA compliance.
Greyscale - White
Info - Light
The combination of two colors, Greyscale White and Warning Dark fails the minimum color contrast ratio with 2.97:1 as per Level AA compliance.
Greyscale - White
Warning - Dark
The combination of two colors, Greyscale White and Warning Default fails the minimum color contrast ratio with 1.51:1 as per Level AA compliance.
Greyscale - White
Warning - Default
The combination of two colors, Brand Light and Warning Default fails the minimum color contrast ratio with 1.23:1 as per Level AA compliance.
Brand - Light
Warning - Default
The combination of two colors, Brand Default and Brand Dark fails the minimum color contrast ratio with 1.95:1 as per Level AA compliance.
Brand - Default
Brand - Dark
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedFoundationsExamplesComponentsDesign tokensSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes