Colour and Contrast
The Word Check Accessibility tool examines contrast between font and background colours. Colour contrast is expressed as a ratio of the difference in saturation, brightness, and pigment of different elements relative to one another. To be accessible and inclusive, font colour must have a contrast ratio of at least 4.5:1[1] against background colours. Insufficient contrast will be flagged as Hard-to-read text contrast.
Who hard-to-read text contrast impacts
Accessible colour is essential for:
- The 1 in 12 men and 1 in 200 women that have some form of colour vision deficiency.[2]
- Low vision users.
- Users experiencing eye fatigue and other mental strain.
- Those that print material in black and white.
- Users viewing in poor lighting or excess glare.
Learn more about accessible colour use.
The following video demonstrates why colour contrast and use of colour is important.
How to fix it
The Accessibility Assistant will note Hard-to-read text contrast errors for text against page background, shading, and highlighting as well as cell text against cell shading in a table.
The tools needed to address hard-to-read text contrast issues are located on the Home tab (except for table tools which, when a table is selected, appear under the Table Design tab).
Each of those tools offers a range of colours including custom colours for Font Colour and Shading. However, the most useful feature is the High-contrast only toggle present on each menu:
This reduces the number of available colours to choose from to show only those that have sufficient contrast against any other colours present (such as Font Colour against Shading or Highlight Colour against Font Colour).
To resolve a Hard-to-read text contrast issue:
- Select the font.
- Change the Font Colour, the Highlight Colour, or the Shading Colour.
- Once changed verify the issue is resolved in the Accessibility Assistant panel.
Tables
To address hard-to-read text contrast in a table, either select the text in the table and change the font colour as outlined above or:
- Navigate to the Table Design tab.
- Open the Shading menu to choose a new cell background colour.
- The High-contrast only toggle also appears.
Note: changing Shading in a table only applies to selected cells.
How to prevent it next time
Use dark text on light backgrounds or light text on dark backgrounds.
Build a grid of branded colours with Eightshapes Contrast Grid to see what colour combinations are accessible.
Next
Move to the next page to examine Media and Illustrations errors or select the next error you want to fix.
- The requirement reduces to 3:1 for large (size 18 point or larger or 14 point or larger and bold) fonts ↵
- Colour Blind Awareness, "About Colour Blindness" ↵
