Ensure text colour contrasts with background colour
Accessibility
Text should always be rendered on the page in a colour that contrasts well enough with the background to make it most legible.
Reason
When text is presented in a colour well contrasted to the background, it makes it much easier to read. With a colour combination that is not clearly contrasted, people with visual disabilities lose access or have to take further unnecessary steps to view the text. In fact, poor colour contrast can lead to people with what is deemed to be very good vision not being able to read text.
Best practice
In the templates provided by the University via ITS, the colours of text against different colours of available background are throughly tested. This is for ordinary text, link text, link text on different coloured buttons, etc.
If you have a need to create text elsewhere, for example on a third-party website, or in an email the best practice is to use a colour contrast checker. These are easy to find on the web, but we recommend you use WAVE’s Color Contrast Checker.
Example of less accessible practices
Poor examples are sometimes easy to spot. For example, this screenshot illustrates how hard it is to read text when the contrast is too low:
An individual does not need to have a very severe visual disability to find it difficult to read text rendered in this colour against this background.
Additional benefits
- Usability: Great colour contrast helps everybody. It makes information easier to perceive.
- SEO: This has a neutral effect on SEO.
- Marketing: A positive experience, like being able to read text more easily, helps create a positive impression for users.
What WCAG says
(Be sure to learn more about errors and alerts.)
From WCAG:
“The visual presentation of text and images of text has a contrast ratio of at least 4.5:1… This is to provide enough contrast between text and its background, so that it can be read by people with moderately low vision or impaired contrast perception, without the use of contrast-enhancing assistive technology.”