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 well contrasted with its background, it is much easier to read. Poor colour contrast can make text inaccessible to people with visual disabilities and difficult to read even for people with very good vision.
Best practice
The ITS templates provided by the University use thoroughly tested colour combinations for text, links, and buttons. If you create content elsewhere, such as on a third-party website or in an email, use a colour contrast checker. We recommend 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.”