By default on GOV.UK we try to use the most accessible colours, however there are still times where some users may need to change them.
For example, those who are sensitive to light may find a white background too bright, or a user with dyslexia may find certain colours easier to read than others.
We’ve researched and spoken before on the Accessibility blog about how and why users change colours on websites and some of the issues teams need to think about.
On the Design System team we aim to make any components in GOV.UK Frontend as accessible as possible, so we took our previous research and tried to improve the latest version.
I’ve picked out a few examples below to demonstrate some of the improvements that have been made.
Back link component
This method relies on manipulating the CSS ‘border’ property to make make certain sides of the border invisible.
When overriding colours the previously invisible borders become visible, resulting in a rectangle being rendered where the triangle arrow should be.
By adding ‘clip-path’ we can draw a polygon that matches the original triangle to ensure the rectangle does not appear.
Note that ‘clip-path’ only works in some browsers which is why we're using both the CSS triangle method and ‘clip-path’.
To make it easier to make triangles like this, we have created a SCSS mixin.
The breadcrumbs component has chevrons that separate each link.
The original version made use of PNG images, which disappear when colours are changed.
To fix this we made use of CSS again to create the chevrons but you could also consider using SVG icons here.
When we brought the radios component over we found there were opportunities to improve the focus indicators.
Focus state is important for keyboard users to know what they are interacting with - without focus state interactions it’s not clear what part of the interface you will interact with when pressing ‘enter’.
Previously, when colours were changed the focus indicator was lost because it relied on ‘box-shadow’ as ‘outline’ does not allow for curves.
To ensure an indicator is visible, we included a transparent outline in addition to the box-shadow which is shown when colours are overridden.
The header component includes the GOV.UK logo, but the icon disappears when overriding colours as it was originally implemented as a PNG image.
To fix this, we used an inline SVG that makes use of currentColor for it’s ‘fill’ property.
The panel component uses a solid background to make it stand out, but it’s lost when colours are changed.
We chose to add a transparent border that will be shown in every scenario.
This blog post features just a small fraction of the work we’ve done to make our components more accessible. Check the GOV.UK Design System for more.
Nick Colley is a Frontend developer working on the GOV.UK Design System.
Subscribe to this blog for updates.