Web Accessibility - Part 2: Colour
Working backwards
In our blog Web Accessibility- Part 1: Why? we talked about our company’s commitment to embedding accessibility into our policies and processes. We want to ensure accessibility is considered at the beginning of, and throughout, a project and not just at the end. This is exactly what we hadn’t done with our own website and one of the reasons we decided to change the way we work. Unable to travel back in time, we began the process of making our site more accessible after it had been designed and built. The first thing we looked at was colour.
Making links recognisable
We made changes to ensure that links in our site are easily recognisable as links. There had been parts of the site where headings and links looked too similar. We adjusted the colour of our links and added an underline. These small changes make it easier for all users to identify elements on the page with which they can interact.
Colour contrast
We also looked at the colour contrast ratios throughout our site. The ratio in question is that between the colour of the text on a page and the colour of the background of the page. The Web Content Accessibility Guidelines (WCAG) 2.0 provide guidance on the recommended minimum colour contrast ratios and there are plenty of tools on the web that make checking colour contrast very easy.
We worked our way through the site and found some colour combinations didn’t meet the recommended minimum contrast ratios. The design with which we had launched our site had included several shades of grey backgrounds and some fairly pale colours. We hadn't been unhappy with the original colours but when we made the changes we all much preferred the new look. The site felt bolder. We still have a few more changes to make.
before
after
Text over images
There are lots of websites that feature text over a background image and the words can be really hard to make out. It could be that, in the original design, the text was over a different image and the words were easier to read. I think it's best avoided.
Colour theme switcher
We added a colour theme switcher in our accessibility settings to allow the user to change the text and background colours throughout the site to one of three additional themes. The glare of a white background is known to cause a problem for many users with dyslexia so one of the themes has a creamy background. For some users a theme with less than the recommended contrast between text and background will make a web page easier to view. We worked to ensure that the theme switcher continued to work in different areas of our site e.g. in our Contact Form.
Colour vision deficiency
Put very simply, colour vision deficiency can make it difficult to distinguish between certain colours. It can also make some colours appear much duller. Most people have probably heard of red/green colour deficiency. But for those with red/green colour deficiencies it's not just red and green that are difficult to distinguish. It can be reds, greens, browns and oranges and different types of blue and purple hues. To experience how people with different types of colour vision deficiency see different colours have a look at the Colour Blind Awareness website.
If your aren't sure whether your form, chart, graph, diagram will make sense to those with colour blindness view/print it in greyscale and see if you can still understand it.
Colour based instructions
Colour vision deficiency is why it's important not to have any instructions on a website that are solely colour based. Our Contact Form relied only on red and green colour clues to indicate which fields needed to be completed before the send button could be pressed. No use if you cannot distinguish between the colours. We added text as an alternative to the colour clues. We also improved our error messages and added WAI-ARIA to the markup to assist those who use a screen reader, but more about this in a later blog....
don't rely on colour alone to convey instructions or messages
Sources and resources:
Blog: Accessibility and me: Marian Foley
Angela Kilmurray
27 Feb, 2017
Tags: accessibility web development website development
Updated October 2017