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 (#00478F)
• Link visited state should always be $ontario-colour-link--visited (#551A8B)
• Links should have a focus state

Links that open in a new window

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

Links paired with icons

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

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.