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.
- 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.
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.
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.
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.
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.