Managing the dual concerns of accessibility and brand consistency is one of the challenges of working on services for the NHS. Like our ongoing work on patterns, we’re trying to provide robust thinking that scales across the system. This isn’t a neat, packaged-up story. It’s an insight into our ongoing work practices on how we’re tackling issues around colour, contrast and making a service accessible for low-vision users.

Low vision and colour blindness affect a large portion of the UK population. Colour blindness affects around 1 in 12 men and 1 in 200 women (approx 2.7 million in total). Low vision affects around 2 million. This is around 7% of the population.

However, this shouldn’t be viewed as a static number. It can increase through injury or other health conditions. Diabetes is one of the many conditions that can lead to colour blindness and low vision. With around 700 people diagnosed with diabetes every day in the UK, it shows how those affected with vision issues can increase as the population changes.

Competing concerns

However, colour can’t be viewed solely as an accessibility issue. The NHS brand is one of the most recognised in the world. It relies on colour for consistent communication. Two brand elements repeatedly commented upon in our research are the NHS blue and the NHS logo. Users consider these signposts of trust.

It’s therefore a balancing act of competing concerns, the value of brand recognition versus making an accessible service.

Assessing the landscape

Armed with the NHS brand colour palette, one of the first exercises we undertook was to look at how the existing brand colours mapped across different colour contrast ratios. A contrast ratio is the ratio of luminosity between colours pairs. We did this in reference of the WCAG (Web Content Accessibility Guidelines), which has two thresholds with regards to contrast: AA and AAA. Each has a contrast ratio threshold of 4.5:1 and 7:1 respectively. You can read more about what these threshold levels mean.

This wasn’t an exercise in mapping every possible colour combination that the NHS colour palette has. It was an exercise to identify general trends with the aim of providing guidance for future design work.
We produced this document, which maps colour pairs across their contrast.

 

colour_contrast_range_1000x600

Mapping the colours this way was really helpful in identifying broad trends. We found that when paired with white, many of the colours performed well. These regularly achieved WCAG level AA and above.

However, there were some areas to watch out for. Two key NHS brand colours: grey and blue, had contrast issues when used in combination. Likewise, yellow needs to be paired with black or dark grey to achieve the appropriate contrast yellow.

So how does this affect what we’re doing?

This information will guide some of our design decisions. We’re not making rules. Instead, we’re aiming to develop an emerging set of guidelines, which will exist as design patterns. These then form the foundation of our work.

We’re using colour sparingly and not as the sole indicator of meaning. We’re also aiming for a minimum of WCAG level AA, while achieving the AAA threshold as much as possible.

We’re currently testing pages using the typeface FS-Me which has a wider character stroke. This is proving advantageous as a wider stroke is one factor that makes text easier to read at low contrast. It’s currently set to 20px in height but with the wider stroke, we have flexibility in using the typeface at smaller sizes without having to rely on bold weights to increase stroke width.

Some of the patterns use reversed type (white on a colour background). This is something we need to keep an eye on. Research show that reducing dwell time (time taken for the brain to see and process a word)  aids in comprehension. Reversed type (inverse polarity) has been shown to increase dwell time.
This is an interesting area. Are you working in it? What have you found? We’d love to see what others have done and are doing and what areas you think we may have missed?

Further reading & resrouces

Jenny, Bernhard and Nathaniel Vaughn Kelso. “Color Design For The Color Vision Impaired“. Cartographic Perspectives 58.77 (2007): 61 – 67. Print.

Visualising colour deficiencies on your device: https://michelf.ca/projects/sim-daltonism/

2 comments

  1. Non-Apple users can use tools like Juicy Studio’s Colour Contrast Analyser. This is available on their website, and in their web accessibility toolbar — a Firefox Addon.

    Reply
  2. Great article Tim. Thought this might be useful, if you’ve not already come across it, a flexible way using css to change to line height, font size, letter spacing on responsive site. It could help with making the text easier to read. Here’s an article with the css formula.http://blog.typekit.com/2016/08/17/flexible-typography-with-css-locks/ .

    Also, and might be worth keeping and eye on is OpenType Variable Fonts https://medium.com/@tiro/https-medium-com-tiro-introducing-opentype-variable-fonts-12ba6cd2369#.59tcx53kz, this could also help with improving the legibility of text on screen.

    Reply

Leave a comment