Chances are that if you work as a designer in the creative industry, someone will have asked you “Is that accessible?” While design is subjective, accessibility (AA) is non-negotiable, and there are strict rules in place if you want to hit AA standards online. Recently we launched The National Trust for Scotland website, a great example of Accessible design.

One misconception when it comes to accessible design is that it only concerns the contrast ratio between text and backgrounds. In reality, accessible design covers a broad spectrum of elements, including: colour contrast ratio, highlight states, how text appears on images, and how users navigate through a site using whatever means easiest to them.

In this article, we’ve put together a few of our top tips to help you to meet AA accessible standards from a design perspective.

 

Colour Contrast

 

To meet accessibility standards, two colours that interact with each other have to have a contrast ratio of 4.5:1. This ensures that information is legible for users with varying degrees of eyesight.

The Sketch plug-in Stark lets us easily check the contrast ratio of colours while we produce designs. We also use online tools such as Contrast Checker.

Top Tip: The lightest shade of grey for small text that can be used on white is #767676.

 

 

Image Contrast

 

This is much harder to achieve, as the image itself could be high contrast, or contain thousands of colours. The content of the image itself, and style of photography or illustration play a big part in this. But, there are a few ways to increase legibility of text on top of images as a general rule.

  • Blur the full image or where text overlays it, this reduces the complexity of the image.
  • Radial Gradient, dark from the centre to light at the outside.
  • 40% Black overlay, this can be over the entire image or with a gradient fading away.
  • Drop shadow, a classic design technique.
  • Don’t overlay the text at all, find an alternative solution.

For more information, these guys are the experts.

 

 

State Changes

 

When it comes to interactive objects, for example buttons (see Fig 1) within a digital environment, a common example of a pointer hover state would be a colour change (see fig 2). This may not meet AA standards however, as a colour change might not be viewable by someone who is colour blind, or to those who are unable to distinguish between subtle changes in colour. This is where we start to introduce physical state changes to objects (see Fig 3).

Take buttons, found on every website. A common mistake is to simply change the button colour on focus, but if a user was using a keyboard to tab through the site they may not know that the button had been focused. Instead, we need to introduce a difference in its overall appearance which can be recognised without relying on the transition itself.

The same can be said for hyperlink text (see Fig 4). In fact, the importance can be even greater here, as the call-to-action is disguised within paragraphs of regular (unclickable) text.

Simply changing the underline colour a few shades (see Fig 5) is not an accessible solution, as it is too subtle a transformation. Highlighting the text with block colour however, makes the link standout in a way which is much more user friendly.

 

 

In Summary

 

Many different elements combine to create an accessible interface, and while we have summarised some of the more prevalent concerns affecting modern design choices, the nuances of accessibility and usability go much deeper.

Even if you follow the above tips, you could create a fully accessible button which passes a validation tool. But, if the label or call-to-action is misunderstood, then you’ve caused usability issues.

As designers, we have creative and aesthetic control when creating user interfaces. On typography alone we need to consider: font choice, weight, pairing, letter spacing, line height and line length. Get one, or any combination of these wrong, and it might create readability issues. Let’s face it, if Lobster script is your starting point then you’ve probably got your work cut out for you!

It’s only with experience – and a constant appreciation of the ways in which humans interact with the web – that accessible and pleasing-to-use interfaces are made possible.

 

Keep in mind that this is just the tip of the iceberg when it comes to accessibility! If you're interested in our services, and would like your next site to be accessible, usable and above all, still look great, why not get in touch?