From 5dbd284404d23f7cc800a04f569bd7499ee54468 Mon Sep 17 00:00:00 2001 From: Calvin Lau <77630796+calvin-lau-sig7@users.noreply.github.com> Date: Fri, 23 Apr 2021 12:19:33 +0100 Subject: [PATCH] Updates to guidance for new link modifiers Fixes https://github.com/alphagov/govuk-design-system/issues/1603 --- src/styles/typography/index.md.njk | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/styles/typography/index.md.njk b/src/styles/typography/index.md.njk index 6b6c0185b5..2128807b48 100644 --- a/src/styles/typography/index.md.njk +++ b/src/styles/typography/index.md.njk @@ -118,14 +118,23 @@ If you're displaying lots of links together and want to save space and avoid rep - adding a line of text before the links saying 'The following links open in a new tab' - including `(opens in new tab)` as part of the link text, so that part of the link text is visually hidden but still accessible to screen readers +## Links on dark backgrounds + +Use the `govuk-link--inverse` modifier class to show white links on dark backgrounds - for example, in headers, custom components, and patterns with darker backgrounds. + +Make sure all users can see the links - the white links and background colour must have a contrast ratio of at least 4.5:1. + +**[Example - govuk-link--inverse]** + ### Links without underlines -Only remove underlines from links if: +Use the `govuk-link--no-underline` modifier class to remove underlines from links. + +Only do this if the context is clear to the user that they’re links, even without the underline. -* the number or placement of links makes them difficult to scan or interact with the element they're part of, and -* it’s clear to the user from the context that they’re links, even without the underline +For example, links in a header or side navigation might not need underlines. Users will understand that they’re links by where they are, at the same place, across different pages. -For example, navigation links in a header will not necessarily need underlines. Users will understand that they’re links because of their position on the page. +**[Example - govuk-link--no-underline]** ## Lists