Accessibility consideration in Digital
There are 8.5 million disabled people in Britain with an annual spending power of £40 billion and with up to 50% of people affected by age-related vision loss and those over 50 having a combined annual income upwards of £160 billion it is not only good practice to make your site accessible to all but also potentially very profitable.
Some of the more common low vision conditions include Diabetic Retinopathy, Cataracts, Retinitis Pigmentosa and Macular Degeneration and in most cases these conditions reduce sensitivity to contrast, and in some cases reduce the ability to distinguish colors.
The main issue with contrast on websites is between the text colour and the colour of the background it sits on. The example below which is a template theme from alpadeo is suppose to be “The Most Amazing WP Theme” but its contrast is poor, the grey text is very light and you can hardly see it, particularly on the grey background. When tested the contrast ratio came out at 1.9, however for a small font like this it should be at least 4.5 otherwise it would be unreadable for people with low vision conditions. The black navigation bar and blue button are examples which offer greater contrast.
At Nudge we work on a number of Council and Government websites where we have to meet the minimum color-contrast ratio as described in the WCAG 2.0 Level AA regulations but we now make it our goal to implement this on the websites we create so that they are accessible by everyone.
I have to admit that before I started working at Nudge I didn't always comply with these standards and placed aesthetics ahead of accessibility, this was naïve of me. I love designing websites and my passion for visually exciting designs has in the past led me to ignore contrast issues, however I have come to realise that in order to create great user experiences it doesn't matter how good something looks if a proportion of the users are unable to use it correctly.
Here are some examples of good & bad contrast on websites
Apple’s website is a great looking website and with their large black headlines and good-sized body text on the light grey background it has a good contrast ratio.
The white text on the black has great stand out and they have also been able to use a more intricate font because the contrast is good. Also the blue button really stands out on the dark background. Overall I found Topshop’s website a really good example for accessibility.
This research and consultancy website, Seim use light green headers have a contrast ratio of 1.5 and is hard to read even for people with 20:20 vision, also lower down on the page the semi transparent boxes, use of light green and small text size make the text on these boxes difficult to read.
Surprisingly for a colourful brand like Swatch they are using very low contrast greys on important elements like their navigation and buttons. I think going for a slightly darker shade of grey wouldn’t have affected their clean modern design.
And I have to say the good contrast examples are just as good if not better to look at, so designing great aesthetic designs while being compliant is possible!
There are also other benefits to using high contrasts apart from helping with bad vision, they work better on lower quality monitors, they are better in bad lighting and glare and can also be easier to read on smaller screens like phones.
Some great tools to help you check your sites are accessible for these users are:
• http://snook.ca/technical/colour_contrast/colour.html - The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast.
• http://www.paciellogroup.com/resources/contrastanalyser/ - Contrast Analyser provides two useful functionalities:
1. It provides a pass/fail assessment against WCAG 2.0 color contrast success criteria.
2. It simulates certain visual conditions including dichromatic color-blindness and cataracts, to demonstrate how your web content appears to people with less than 20/20 vision.
Colour blindness is also something to consider when designing. It affects approximately 2.7 million people in the UK and the most common form is red/green colour blindness. This doesn’t mean they mix up red and green but they find it hard to distinguish colours which have some red or green as part of the whole colour, for example it can be hard to distinguish between blue and purple because they can’t see the red element in the purple. The example below gives you an idea of how people with colour blindness see colours.
As you can see the red and green are almost indistinguishable and these are usually used to symbolise stop and go or incorrect and correct. Blue and pink are often used to indicate gender however these are also difficult to tell the difference. In instances like these you should consider combining colours with distinctive icons or words to help make them appear different.
Photoshop is a great tool to check your sites are accessible:
You can simulate color blindness by going to View - Proof setup - and selecting Colour Blindness Protanopia type or Colour Blindness Deuteranopia type.
Here is also an example of a website we designed for the Government in its original state and then how a colour blind person would view it by applying the filter over it in Photoshop:
Don’t forget to test them early on in the design process, you don’t want that sinking feeling after you finished your wonderful creation to find your colours don’t pass the test!