Choosing Accessible Colour Schemes

Using Colours in an Accessible Way

Introduction
Students with different needs may have problems seeing certain colours or combinations of colour. While we cannot create materials that are perfect for all, there are certain steps that we can take to make them as accessible as possible.

There are three ‘groups’ of needs identified here. Partial Sightedness, Colour Deficiencies and Dyslexia. Because partially sighted students would generally have software on their computers to change colours, we can focus on the requirements of the other two groups. Dyslexic students may require dark text on a light background, although a white background may be too contrasting. A light yellow or blue is recommended for both printed and on screen materials. This document looks at creating appropriate contrast between the text and background colours that you might use. It is based on, and follows on from the article ‘Effective Color Contrast’ by Aries Ardati, which can be found at http://www.lighthouse.org/color_contrast.htm; ‘Effective Color Contrast’ sets out 3 rules of good colour contrast, with the aim of the reader understanding the needs of people with partial sight and colour deficiencies. Here I present the ideas and attempt to demonstrate how these ideas can help us use colours in a more accessible way.

The Rules
The first rule is to avoid using colours of similar lightness on the foreground and the background. This is because people with colour deficiencies see less contrast between colours. Differences between the lightness of colours increases contrast. The second rule is to try to choose the light colours from Blue-Green, Green, Yellow or Orange and dark colours from: Blue, Violet, Purple or Red. This is because to people with colour deficiencies, Blue, Violet, Purple or Red tend to appear darker. Because the foreground colours are usually dark and the background colours light, it follows that if we would use Blue, Violet, Purple or Red as foreground colours, and it would be best to make them especially light. I would recommend using shades of Blue-Green, Green, Yellow or Orange as background colours. The third rule is to use contrasting hues from the colour circle below. This means using colours opposite to each other and not hues from next to each other. From this we can suggest 4 generally good colour combinations: • • • • Dark Blue on Light Orange Dark Violet on Light Yellow Dark Purple on Light Green Dark Red on Light Blue-Green

These background colours (e.g. Light Orange) are good background colours, because they do not look darker to those with colour deficiencies. Black would be a fine colour to use as a foreground colour, with one of these 4 background colours.

Examples
These images show sans-serif text, size 12, as it would look on a WebCT Homepage. The codes (e.g. #002328) are the hexadecimal codes for the colours that WebCT uses to set the colours. To do this to the WebCT course you can use go to ‘Control Panel’ and select ‘Customise course colours’. If you want to understand the hexadecimal colour codes so that you can experiment with different colours visit the online tutorial at: http://www.w3schools.com/html/html_colors.asp Remember that in the introduction that we noted most students who are partially sighted have software on their computers to change the colours automatically. Black (e.g. #000000) on White (e.g. #FFFFFF): It has been accepted in LTD for a while, that this is too contrasting causing difficulties for some dyslexic students, as was noted in the introduction. Black text is the more accessible that the coloured text, but if you would like to use coloured text it is best to use similar combinations to those below.

Dark Blue (e.g. #002328) on Light Orange (e.g. #FFF3EB)

Dark Violet (e.g. #1C2348) on Light Yellow (e.g. #FFFDEB)

Dark Purple (e.g. #401029) on Light Green (e.g. #EBFFF5)

Dark Red (e.g. #500004) on Light Blue-Green (e.g. #EBFFFC)

Black (e.g. #000000) on Light Blue-Green (e.g. #EBFFFC): This is here to let you compare the contrast of using black with using red.

We have focused on light backgrounds and dark text, because that is the usual way text and information is presented. However it is worth knowing that some partially sighted people prefer the opposite when they are reading. An example of how this might look is below. However remember that in the introduction that we noted most students who are partially sighted have software on their computers to change the colours automatically, so this might only be an issue for specific students using printed materials. Light Yellow (e.g. #FFFDEB) on Dark Violet (e.g. #1C2348)

Documentation Version: A4_2006.3 WebCT Version: CE 4.1

If you require this information in an alternative format, please contact Learning Technology Development, on 01695 584889 or email webct_webmaster@edgehill.ac.uk