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.
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.
Text colors
Headings, body text, and labels adopt our text colors to ensure visual hierarchy in our layouts and readability across various contexts.
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
Warning
Emergency
Success
Critical
Greyscale colors
Greyscale are neutral colors that range from black to white and provide a base for accents, backgrounds and layouts.
Extended colors
Extended colors can be used If you need more badge colours or need colours to differentiate between data categories in charts.
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 content | Minimum ratio (AA rating) |
---|---|
Body text - 18px | 4.5:1 |
Large-scale text - 24px | 3: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






Inaccessible combinations






Book time in drop in hours