People with low vision, age-related vision impairment or colour blindness can have problems reading text when there is not enough contrast between the text and background colours.
If you publish content using templates that control text and background colours, you won’t have to worry about the contrast of your text. Your web designer or developer should have taken care of it. However, if you use images you should check that the contrast is adequate for any text or important information contained within them.
Images of text
The accessibility guidelines describe an image of text as:
“Text that has been rendered into a non-text form (e.g. an image) in order to achieve a particular visual effect. Note: This does not include text that is part of a picture that contains significant other visual content. Example: A person’s name on a name tag in a photograph”.
While the definition refers to images of text, it is important to ensure good contrast for text within images. Graphs, charts and maps with text legends, labels or captions will not be accessible if the text lacks sufficient contrast.
The guidelines make an exception for text in logos, or text that is decorative or incidental to an image (like the name tag example above).
Information in maps, charts, graphs
The guidelines do not set contrast requirements for lines or data in maps, charts or graphs. However, if you want your graphical content to be accessible, we recommend ensuring you use sufficient contrast.
Use a contrast ratio of 4.5:1, except for large text where you can use a contrast ratio of 3:1. Large text is defined as 18 points or 14 points bold.
To ensure your content is legible, for:
- Thin fonts, use a larger font size or higher contrast ratio
- Patterned backgrounds, use a higher contrast ratio
- Images of text created at 72 pixels per inch, use a text size of 24 points (or 19 points bold) if your contrast ratio is only 3:1
If you are aiming for higher levels of accessibility (for AAA compliance with the Web Content Accessibility Guidelines), you will need to use a contrast ratio of 7:1, or 4.5:1 for large text.
Several free tools let you check colour contrast. Two popular tools are:
- Contrast Analyser: a desktop tool for PC or Mac, developed by The Paciello Group
- Colour Contrast Check: a web-based tool developed by Jonathan Snook
- Contrast (minimum): understanding success criterion 1.4.3
- Contrast (enhanced): understanding success criterion 1.4.6
- Web Content Accessibility Guidelines 2.0