Safety and metallic palette

Safety colour palette

There will be instances when a cautionary or emergency colour palette will need to be used. The chosen colours and their meanings are recognized globally and can help convey the message to both citizens and tourists easily.

• #A6192E $coc-secondary-red
• #F2A900 $coc-secondary-yellow-D
• #009639 $coc-secondary-green-safety
• #000000 $black
• #E57200 $coc-secondary-orange
• #C4D600 $coc-secondary-green-pedestrian
• #0057B8 $coc-secondary-blue-access

Background and foreground combinations

The colour combination examples below for the safety colour palette have been configured to meet the AA rating at the Web Accessibility Initiative.

• For the safety colour palette, large type and graphics on red (187C) should always be white

  Background color: #A6192E
  Text color: #FFFFFF

  CSS class name: coc-secondary-red

  Text colour contrast: Pass (AAA)
  Large text colour contrast: Pass (AAA)

• For the safety colour palette, large type and graphics on yellow (pantone 130C) should always be black

  Background color: #F2A900
  Text color: #000000

  CSS class name: coc-secondary-yellow-D

  Text colour contrast: Pass (AAA)
  Large text colour contrast: Pass (AAA)

• For the safety colour palette, large type and graphics on green (pantone 355C) should always be white

  Background color: #009639
  Text color: #000000

  CSS class name: coc-secondary-green-safety

  Text colour contrast: Pass (AA)
  Large text colour contrast: Pass (AA)

• For the safety colour palette, large type and graphics on black should always be white

  Background color: #000000
  Text color: #FFFFFF

  CSS class name: coc-black

  Text colour contrast: Pass (AAA)
  Large text colour contrast: Pass (AAA)

• For the safety colour palette, large type and graphics on detour orange (152C) should always be black

  Background color: #E57200
  Text color: #000000

  CSS class name: coc-secondary-orange

  Text colour contrast: Pass (AA)
  Large text colour contrast: Pass (AAA)

• For the safety colour palette, large type and graphics on pedestrian yellow/green (382C) should always be black

  Background color: #C4D600
  Text color: #000000

  CSS class name: coc-secondary-green-pedestrian

  Text colour contrast: Pass (AAA)
  Large text colour contrast: Pass (AAA)

• For the safety colour palette, large type and graphics on access blue (2935C) should always be white

  Background color: #0057B8
  Text color: #FFFFFF

  CSS class name: coc-secondary-blue-access

  Text colour contrast: Pass (AA)
  Large text colour contrast: Pass (AAA)

---

Metallic colours

The use Metallic Gold and Gold Foil is reserved exclusively for use by The City of Calgary Council, The City of Calgary Mayor’s Office, City of Calgary Auditor’s Office, City of Calgary Integrity Commissioner and COC Ethics Commissioner.

Metallic Gold: Pantone 10127