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 If you require this information in an alternative format, please contact

Version: A4_2006.3
Learning Technology Development, on 01695 584889 or email
WebCT
Version: CE 4.1 webct_webmaster@edgehill.ac.uk