Creating documents and images which contain high contrast between colours will make images, diagrams and documents more accessible than the same documents with low colour contrast. High colour contrast enables people who have colour vision deficiencies, use a screen reader or have dyslexia to see features they may otherwise miss easily.
Is there a recommended colour palette?
Colour perception will vary from one individual to another, so it is difficult to recommend a colour palette that will work for everybody. Instead, here are some suggestions to help you achieve high colour contrast. These suggestions can be applied to images, documents and applications whether in print or on screen and will help make material accessible to as many people as possible.
High colour contrast
High contrast between colours is crucial to legibility and this can be achieved by enhancing the difference between the lightness and darkness of colours:
-
Black and white produces the highest possible contrast.
-
To help features stand out, exaggerate the lightness of light colours and darkness of dark colours when used next to each other as this will enhance contrast.
-
Avoid using colours which are similar in lightness or similar in darkness next to one another, even if they differ in colour, for example light green and light red, as some people with low vision or colour vision deficiencies may not be able to tell the difference between these colours.
-
Avoid using similar colours together, for example red and orange, or green and blue-green particularly if they do not vary in lightness as they will not be easy to distinguish.
-
Avoid using achromatic colours (black, white, grey) against colours of similar lightness or darkness, for example dark grey against black.
Good colour combinations
-
Light colours against black.
-
Dark colours against white.
-
Light or pale colours against very dark colours, for example, light pink against dark blue.
Poor colour combinations
-
The most common failing in colour recognition is the inability to distinguish or recognise red and green.
-
Avoid pastel colours against white or grey.
-
Avoid dark colours against black.
-
Avoid pastel colours together.
-
Avoid light or pale colours together.
-
Care must be taken with complimentary colours for example orange and blue of similar lightness, as they can appear to be jarring.
Colour and text
-
Avoid using text on an image or patterned background as the colour contrast will vary and the shapes of the letters will be harder to identify or find - background should be solid.
-
Use high contrast between text and background colour.
-
Using a paper colour of 10% - 15% tint can help reduce glare which some people find difficult.
-
Reverse polarity, or white on black, can be beneficial for some users.
For a checklist on using colours see the page on tips for effective colour use and the page testing for colour accessibility for testing colour contrast on screen.