Merge pull request #855 from alphagov/tag-border-when-overriding-colours

Add outline to tag for customised colours

CHANGELOG.md

@@ -83,6 +83,12 @@
   they should see a focus state on both Radios and Checkboxes.
   ([PR #854](https://github.com/alphagov/govuk-frontend/pull/854))
 
+- Add outline to tag for customised colour users
+
+  Now when a [user customises their colours](https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/),
+  the tag component still keeps it's meaning.
+  ([PR #855](https://github.com/alphagov/govuk-frontend/pull/855))
+
 🏠 Internal:
 
 - Fix Design System url in package READMEs and review app

src/components/tag/_tag.scss

@@ -9,6 +9,12 @@
     display: inline-block;
     padding: govuk-spacing(1) 8px 0;
 
+    // When a user customises their colours often the background is removed,
+    // by adding a outline we ensure that the tag component still keeps it's meaning.
+    // https://accessibility.blog.gov.uk/2017/03/27/how-users-change-colours-on-websites/
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+
     color: govuk-colour("white");
     background-color: govuk-colour("blue");
     letter-spacing: 1px;