Links

Guiding principle: Design for everyone.


When to underline

Generally, do underline links when they are in:

  • body text (including bulleted lists)
  • a hover state

Generally, do not underline links when they are in big navigation panels such as:

  • dropdown menus
  • side panels
  • in-page table of contents

(source)

When to break underlining rules

Only break these rules if underlining or not underlining starts to impact readability. See the accessibility section for more on this.

Technical specifications

  • Links should always be $ontario-colour-link (#0066CC)
  • Link hover state should always be $ontario-colour-link--hover (#002142)
  • Link visited state should always be $ontario-colour-link--visited (#551A8B)
  • Links should have a focus state

If the user is in the middle of a transaction or form, links should open in a new window.

If a link is opening in a new window or tab, include this standard icon at the end of the link: .

Only pair icons when the link is in a list, never within a paragraph.

Example:

  • Tel: 416-325-3000
  • TTY: 1-855-889-5775

Icons you can pair with links include:

  • Phone
  • Email
  • Social media
  • Fax
  • Website

Accessibility

Underlining is generally a good accessibility practice.

Underline links as much as possible until it starts impacting readability – use your judgement. For example, if you have a long bulleted list of links, it may look a little overwhelming or distracting if they are all underlined – this would be a time when not underlining links will help readability.

If you are not sure how underlining links will impact readability, you can test with some users.


Help improve this page

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