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 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 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:

Where you can use these colours:

  • non-link icons
  • illustrations
  • infographics
  • timelines
  • callouts
  • banner images
  • images

Where you cannot use these colours:

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 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 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 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 be accessible.

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 Paciello Group’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

Help improve this page

If you have other suggestions, advice or any questions on colours, the design system team would love to hear from you.