Skip to main content

Links

Link text should be written so the user knows where the link will take them and what content will be on the end-page.

Links should open in the same browser tab, unless there's a good reason for them not to. For example, where the user is working on something. If you need a link to open in a new tab, include the words ‘opens in a new tab’ as part of the link. Do not use an external link icon on external links.

If your link is at the end of a sentence or paragraph, make sure the linked text does not include the full stop.

By default, link text is blue and underlined. The colour changes to purple when in the visited state. These colours are intended to be used on a white background.

This is a link
This is a visited link

If you need to put a link on a background that's not white, you must make sure there's a contrast ratio of at least 4.5:1 between the colour of the text and the colour of the background. You can use the WebAim Contrast Checker to check this. You may also need to remove or change the hover colour accordingly in these circumstances.

Display a link with no underline when it’s clear to the user that the text is a link. For example, if the links are in a navigation menu, in the header or in the footer.

Do not add the colour change on the visited state where it’s not helpful to the user to distinguish between these states and it would look better without. For example, when linking to pages with frequently changing content such as a newsfeed.