Infographics

Guidelines for infographics and graphs

Use on:

  • business.gov.au
  • subsites
On this page

Colour sets

Blue

Green

Teal

Purple

Extended colour set

Colour set

Primary: Blue

#2E6CB9

Accessible*

#6C97CE

Accessible*

#96B7DF

Not Accessible

#C8D9EE

Not Accessible

#E3ECF6

Not Accessible

Secondary: Yellow and blue-black

#FFD964

Not Accessible

#FFECB1

Not Accessible

#2E3E5A

Accessible*

#788295

Accessible*

#ABB1BD

Not Accessible

#E4E6EA

Not Accessible

* Colours listed as accessible are suitable for displaying large text on a white background.

Examples

Example illustration depicting a computer surrounded by digital icons.
Example infographic depicting a map and numbered states.
Example infographic using people icons to depict percentages.
Example pie chart.
Example of a bargraph.
Example of a stacked bar graph.
Example heatmap chart.
Example infographic using icons and numbers to show percentages.

Colour set

Primary: Green

#629D62

Accessible*

#85CB85

Not Accessible

#A0D1A0

Not Accessible

#BCDEBC

Not Accessible

#D4EDD4

Not Accessible

Secondary: Yellow and blue-black

#FFD964

Not Accessible

#FFECB1

Not Accessible

#2E3E5A

Accessible*

#788295

Accessible*

#ABB1BD

Not Accessible

#E4E6EA

Not Accessible

* Colours listed as accessible are suitable for displaying large text on a white background.

Examples

Example illustration depicting a computer surrounded by digital icons.
Example infographic depicting a map and numbered states.
Example infographic using people icons to depict percentages.
Example pie chart.
Example of a bargraph.
Example of a stacked bar graph.
Example heatmap chart.
Example infographic using icons and numbers to show percentages.

Colour set

Primary: Teal

#489595

Accessible*

#5AB3B3

Accessible*

#8BCACA

Not Accessible

#ADDADA

Not Accessible

#CFEBEB

Not Accessible

Secondary: Yellow and blue-black

#FFD964

Not Accessible

#FFECB1

Not Accessible

#2E3E5A

Accessible*

#788295

Accessible*

#ABB1BD

Not Accessible

#E4E6EA

Not Accessible

* Colours listed as accessible are suitable for displaying large text on a white background.

Examples

Example illustration depicting a computer surrounded by digital icons.
Example infographic depicting a map and numbered states.
Example infographic using people icons to depict percentages.
Example pie chart.
Example of a bargraph.
Example of a stacked bar graph.
Example heatmap chart.
Example infographic using icons and numbers to show percentages.

Colour set

Primary: Purple

#489595

Accessible*

#5AB3B3

Accessible*

#8BCACA

Not Accessible

#ADDADA

Not Accessible

#CFEBEB

Not Accessible

Secondary: Yellow and blue-black

#FFD964

Not Accessible

#FFECB1

Not Accessible

#2E3E5A

Accessible*

#788295

Accessible*

#ABB1BD

Not Accessible

#E4E6EA

Not Accessible

* Colours listed as accessible are suitable for displaying large text on a white background.

Examples

Example illustration depicting a computer surrounded by digital icons.
Example infographic depicting a map and numbered states.
Example infographic using people icons to depict percentages.
Example pie chart.
Example of a bargraph.
Example of a stacked bar graph.
Example heatmap chart.
Example infographic using icons and numbers to show percentages.

Colour set

Primary: Extended

#2E6CB9

Accessible*

#96B7DF

Not Accessible

#489595

Accessible*

#8BCACA

Not Accessible

#629D62

Accessible*

#A0D1A0

Not Accessible

#7468B4

Accessible*

#B1A8E3

Not Accessible

#CC7A29

Accessible*

#F1B981

Not Accessible

#FFD964

Not Accessible

#FFECB1

Not Accessible

Secondary: Yellow and blue-black

#2E3E5A

Accessible*

#788295

Accessible*

#ABB1BD

Not Accessible

#E4E6EA

Not Accessible

* Colours listed as accessible are suitable for displaying large text on a white background.

Examples

Example illustration depicting a computer surrounded by digital icons.
Example infographic depicting a map and numbered states.
Example infographic using people icons to depict percentages.
Example of a stacked bar graph.
Example of a piechart.
Example of a line graph.

Guidelines for use

Colour use

Colours in infographics are limited to one colour set. Colours from different sets should not be combined. Each colour set has one primary colour and one secondary colour. The primary colour is the main colour used in the graphic while the secondary colour provides contrast and highlights.

An extended colour set is available for complex infographics that require numtiple colours.

Font styles

Infographics and graphs should use Google OpenSans. Primary font weights are:

  • OpenSans-Semibold
  • OpenSans-Regular

Other weights can be used when particular elements of the design require emphasis but should be used sparingly.

The default font colour is black #2E3E5A. Accessible colours from the chosen colour set can also be used for large text in infographics.

Visual elements

All visual elements in infographics and graphs are 2-dimensional, not 3-dimensional.

Visual elements in infographics belong to two categories:

  • BGA style illustrations
    • The illustration style follows the guidelines outlined in the illustration section (except for colour use rules as outlined above).
  • Icons
    • Where possible use icons from the BGA icon set.
    • If the BGA icon set does not contain a required icon then any new icons created should match the icon style.
    • Google material design provides free icons that match the BGA icon set. To download Google material icons navigate to https://fonts.google.com/icons?selected=Material+Icons and select the “Filled” theme.

Graphs

Graphs always have data labels and should never rely solely on colour or contrast to convey information.

Accessibility

When infographics and graphs are used online they need to meet accessibility requirements. This can include:

  • Using HTML to display numbers and text wherever possible, rather than incorporating them into an image file.
  • Using labels with graphs to convey information rather than relying on colour and contrast.
  • Using ARIA roles recommended in the WAI-ARIA Graphics Module (see https://www.w3.org/TR/graphics-aria-1.0/#roles)
  • Using the <longdesc> HTML attribute to provide a detailed explanation of the infographic content.
  • Including a link to the content explanation in a collapsible section of the page. An example of how to provide a content explanation is below.

Two percent of users tested thought the site was difficult to navigate. Thirty-seven percent of users testing found the site easy to navigate.

The remaining users did not comment on whether the site was easy or hard to navigate.

Call to action toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Changes to this contract are being autosaved.