Colour and Colour Contrast

In the online environment colour provides interest as a visual tool to identify an item and for decorative perspectives.  However, colour should not be the only means to convey information, like an action or prompt.  If the contrast between the text and the background is not correct, colour can lose its appeal and make it difficult for a student to read the text.

Tips

  • Do not rely on colour to convey information.
  • Add text labels, patterns or symbols
  • Avoid using red to attract attention – looks dull, not bright
  • Ensure there is sufficient contrast between text and the background. Contrast helps older students and students using mobile devices particularly in poor lighting conditions.
  • Use large, bold fonts on uncluttered pages with plain backgrounds.
  • Use colour combinations that are high contrast and can be read by those who are colour blind.
This is an example of a diagram which has been well designed to show use of patterns in the black and white colour pallete
Notice the use of different patterns, labels and shades to ensure that the image is still usable and accessible, even though it’s essentially ‘black and white’?

More on Appropriate Contrast

The International Standards (WCAG 2.1) for contrast are measured by the difference in perceived ‘luminance’ or brightness between two colours.  The brightness difference is expressed as a ration ranging from 1:1 (eg white text on a white background) to 21:1 (eg. Black text on a white background).  Contrast requirements also apply to images of text.

Examples:

Pure red (#FF0000) has a ration of 4:1. This is red text.

Pure green (#00FF00) has a very low ration of 1.4:1.  This is green text.

Pure blue (#000FF) has a contrast ration of 8.6:1.  This is blue text. 

The exceptions:

Use a contrast ratio of at least 4.5:1 for text and images of text, unless the text is decorative or part of a logo.

Large text (18 point or 14 point bold) is easier to read, so use a contrast ration of at least 3:1.

Contrast Checker

Test your content to ensure none of the meaning is lost when you remove the colours.  Print your page in black and white, making sure the printing preferences are set to print background colours.

Use a colour blindness checker, such as Colbis or The Paciello Group Colour Contrast Analyser which removes all page colour or that will simulate colour blindness.

Image sourced from 

http://www.activityalliance.org.uk/news/3016-the-fa-releases-guidance-on-colour-blindness-in-football

 

 

 

Resources – See these sites for further information

https://www.color-blindness.com/category/tools/

https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#distinguishable

https://webaim.org/resources/contrastchecker/

Leave a Reply

Your email address will not be published. Required fields are marked *