Colour & Contrast
Contrast
Colour contrast is the difference in brightness between two or more colours, such as foreground text and its background. Contrast is important because it affects how easy it is for people to see and read content.
- Avoid low contrast colour combinations. Avoid using light colours on lighter backgrounds, such as light gray text on a white background. It can be difficult for people to read, especially those with visual impairments.
- Use high contrast colour combinations. Use darker colours on lighter backgrounds.
- Avoid very high contrast. Very high contrast text can hinder readability, especially for individuals with dyslexia. Instead, opt for black text on an off-white background for example.
- TMU community members should follow brand guidelines when designing content. TMU's brand colour combinations adhere to accessibility standards.
Required contrast ratios
The following contrast ratios are required to meet Level AA of the Web Content Accessibility Guidelines (WCAG) 2.0.
- Normal size text (or body text) requires a contrast ratio of at least 4.5:1.
- Large size text (or heading text) requires a contrast ratio of at least 3:1.
- In Microsoft Office/Google Workspace/Apple iWork, large text is defined as 14.25 points and bold or larger, or 24 points and larger.
- If designing a website with Cascading Style Sheets (CSS), large text is defined as 1.2em and bold or larger, or 2em and larger.
Testing for contrast
Use free tools to automatically check for colour contrast issues.
- Contrast Report (external link) - A straightforward colour contrast checker with Picture-in-picture (PiP) mode.
- Microsoft's Accessibility Checker for Office (external link) - Use the built-in Accessibility Checker in Microsoft Office to automatically identify low contrast text.
- Sa11y (external link) - A website accessibility checker that can identify low contrast text.
Colour alone
Some people perceive colour differently, therefore colour should never be the only way of conveying information or differentiating between elements.
- Use a combination of shapes, high-contrast colours, textures, or text.
- For line charts, use different dash patterns and dot shapes.
- Underline links in addition to colour, so it can be easily distinguished from surrounding text.
Use of colour in graphs and charts
Graphs and charts can be difficult to understand, as meaning is often conveyed exclusively through colour. When graphs rely solely on colour to convey information, individuals with colour blindness may have difficulty interpreting the data.
- A secondary indicator is used to associate the labels with the chart slices. The colour of the slices no longer matter.
- The text labels have strong and consistent contrast.
- Each segment is separated by a subtle yet discernible border to effectively demarcate its boundaries.
Here is the same image in greyscale. It's easy to interpret the data regardless of colour.
- For people who are colourblind, certain colour combinations are challenging to distinguish from another.
- Some labels are difficult to read because of the low contrast.
Here is the same image in greyscale. It's difficult to differentiate some of the slices and match them with the legend items.
Testing colour combinations
- If you have a printer connected to your device, you may be able to use your authoring tool's Print Preview feature to preview the page or document in black and white. The keyboard shortcut Ctrl + P or Command + P should prompt Print Preview.
- Alternatively, in Google Docs and Microsoft Word, you can temporarily recolour the image to black and white. Select the image and view the formatting options.
Are you able to perceive the information easily?
Content editors and web developers
Sa11y is a content accessibility checker designed to highlight issues on web pages. Sa11y includes a feature where you can toggle various colour filters to test colour combinations.
- Install the Sa11y bookmarklet. (external link)
- Test web pages with Sa11y using various colour filters. (external link)
