Colours

Palette types

The full Ontario digital colour palette (based on the marketing colour palette for print and social media) is made up of:

1 system colour palette – use only for assigned purposes (such as regular text, unvisited/visited links, button text and confirmation text – the full list is in the chart below)
1 greyscale colour palette – mainly hard-coded into components (such as tables), but you can use the greys with discretion for the same purposes as the accent colour palette
1 accent colour palette in 3 shades (base, light and dark) – use for digital marketing or other page elements (such as infographics, banners, illustrations and icons)

System colour palette

These colours are used in specific ways to ensure consistency across all our digital services (ontario.ca, applications, transactional services, digital marketing). Do not use them for other purposes (exceptions: system-black and system-white – use these as needed).

Colour name	Hex code	SCSS variable	Notes
System-black	`#1A1A1A`	`$ontario-colour-black`	Default colour for most text (such as body, headings, subheadings)
System-white	`#FFFFFF`	`$ontario-colour-white`	Text on primary buttons, dark backgrounds
Alert	`#CD0000`	`$ontario-colour-alert`	Alert-level icons, left-hand vertical bar of alert box or error box
Alert light	`#FCEFF0`	`$ontario-colour-alert-light`	Background of alert box
Success	`#118847`	`$ontario-colour-success`	Success-level icons, left-hand vertical bar of success box
Success light	`#E5f0E9`	`$ontario-colour-success-light`	Background of success box
Warning	`#FFD440`	`$ontario-colour-warning`	Warning-level icons, left-hand vertical bar of warning box
Warning light	`#FEF6DC`	`$ontario-colour-warning-light`	Background of warning box
Information	`#1080A6`	`$ontario-colour-information`	Information-level icons, left-hand vertical bar of information box
Information light	`#E2F0F4`	`$ontario-colour-information-light`	Background of information box
Link	`#0066CC`	`$ontario-colour-link`	Buttons and unvisited links
Link - hover	`#00478F`	`$ontario-colour-link--hover`	Button and link hover state
Link - active	`#002142`	`$ontario-colour-link--active`	Button and link active state
Link - visited	`#551A8B`	`$ontario-colour-link--visited`	Link visited state (but not buttons – they remain blue)
Secondary - hover	`#E0F0FF`	`$ontario-colour-secondary--hover`	Secondary button hover state
Secondary - active	`#C2E0FF`	`$ontario-colour-secondary--active`	Secondary button active state
Tertiary - hover	`#E8E8E8`	`$ontario-colour-tertiary--hover`	Tertiary button hover state
Tertiary - active	`#D1D1D1`	`$ontario-colour-tertiary--active`	Tertiary button active state
Focus ring	`#009ADB`	`$ontario-colour-focus`	Focus state outline for inputs, links and buttons

Greyscale colour palette

The greys in this palette are mostly hard-coded into elements (such as tables) but you can use them with discretion for the same purposes as the accent colour palettes.

Do not use other shades of grey – the greys in this palette were specifically chosen to eliminate grey colours that appear too similar. For reference, see greyscale palette contrast ratios with system-black text and system-white text.

Colour name	Hex code	SCSS variable	Notes
Greyscale-5	`#F2F2F2`	`$ontario-greyscale-5`	If used as a background colour use system-black text
Greyscale-20	`#CCCCCC`	`$ontario-greyscale-20`	If used as a background colour use system-black text
Greyscale-40	`#999999`	`$ontario-greyscale-40`	If used as a background colour use system-black text
Greyscale-60	`#666666`	`$ontario-greyscale-60`	If used as a background colour use system-white text
Greyscale-70	`#4D4D4D`	`$ontario-greyscale-70`	If used as a background colour use system-white text

Accent colour palette

Each colour in the accent colour palette has a base, dark (to use with system-white text) and light (to use with system-black text) version.

You can use any of these colours in your designs as long as you:

do not use them for elements that have an assigned system colour (these elements are listed in the system colour palette chart)
ensure acceptable contrast ratios

Where you can use these colours:

non-link icons
illustrations
infographics
timelines
callouts
banner images
images

Where you cannot use these colours:

page backgrounds
form elements
table outlines
any elements listed in the system colour palette chart

Base accent colour palette

Only use these colours with system-black text (underlined for links). For reference, see base accent palette contrast ratios with system-black text.

Colour name	Hex code	SCSS variable
Gold	`#CBA52E`	`$ontario-colour-gold`
Yellow	`#FCAF17`	`$ontario-colour-yellow`
Taupe	`#C1B28F`	`$ontario-colour-taupe`
Green	`#39B54A`	`$ontario-colour-green`
Lime	`#8DC63F`	`$ontario-colour-lime`
Teal	`#49A7A2`	`$ontario-colour-teal`
Sky	`#00B2E3`	`$ontario-colour-sky`
Blue	`#3193CC`	`$ontario-colour-blue`
Purple	`#B975B7`	`$ontario-colour-purple`
Orange	`#F15A22`	`$ontario-colour-orange`
Red	`#F0454B`	`$ontario-colour-red`
Magenta	`#F03093`	`$ontario-colour-magenta`

Light accent colour palette

Only use these colours with system-black text (link blue and underlined for links). For reference, see light accent palette contrast ratios with system-black text and link blue.

Colour name	Hex code	SCSS variable
Light gold	`#F0E7CC`	`$ontario-colour-light-gold`
Light yellow	`#F8E5C3`	`$ontario-colour-light-yellow`
Light taupe	`#EBE7DB`	`$ontario-colour-light-taupe`
Light green	`#D1EFD4`	`$ontario-colour-light-green`
Light lime	`#DDEDC7`	`$ontario-colour-light-lime`
Light teal	`#CFEDED`	`$ontario-colour-light-teal`
Light sky	`#C5EEFA`	`$ontario-colour-light-sky`
Light blue	`#DBE9F5`	`$ontario-colour-light-blue`
Light purple	`#F1E3F2`	`$ontario-colour-light-purple`
Light orange	`#FEE1D9`	`$ontario-colour-light-orange`
Light red	`#FFE0E2`	`$ontario-colour-light-red`
Light magenta	`#FEDFF0`	`$ontario-colour-light-magenta`

Dark accent colour palette

Only use these colours with system-white text (underlined for links). For reference, see dark accent palette contrast ratios with system-white text.

Colour name	Hex code	SCSS variable
Dark gold	`#86743D`	`$ontario-colour-dark-gold`
Dark yellow	`#8A600D`	`$ontario-colour-dark-yellow`
Dark taupe	`#7B725C`	`$ontario-colour-dark-taupe`
Dark green	`#2B8737`	`$ontario-colour-dark-green`
Dark lime	`#5F8129`	`$ontario-colour-dark-lime`
Dark teal	`#367A76`	`$ontario-colour-dark-teal`
Dark sky	`#1080A6`	`$ontario-colour-dark-sky`
Dark blue	`#0369AC`	`$ontario-colour-dark-blue`
Dark purple	`#92278F`	`$ontario-colour-dark-purple`
Dark orange	`#C64A1C`	`$ontario-colour-dark-orange`
Dark red	`#D81A21`	`$ontario-colour-dark-red`
Dark magenta	`#C00264`	`$ontario-colour-dark-magenta`

Accessibility

If you’re using colour to convey information, make sure you also include a text alternative for people who have difficulty seeing colour.

Having a good contrast ratio (making text stand out from its background) makes it easier to read for everyone. It’s also the law to, at a minimum, meet WCAG 2.0, which says regular text must meet the colour contrast ratio of 4.5:1 and large text must meet the contrast ratio of 3:1.

The contrast ratios in Ontario design system palettes meet level AA of WCAG 2.1 on colour contrast – so, as long as you use the palette colours as indicated in this guideline, your text will have adequate colour contrast.

Double-check accessibility

As you design, use a colour contrast checker to double-check that your design meets at least WCAG 2.0’s minimum. A couple of options are:

WebAIM’s free online contrast checker
The TPGi’s Colour Contrast Analyzer program
- this downloadable program is free but, if you’re using an OPS computer and don’t have administration rights, you’ll need to submit a S.ODO request to install it

If you have any questions or feedback, please get in touch.