Contrast - accessibility for web writers
Use colours that offer a sufficient contrast ratio between text and background colours, unless the text is decorative, incidental or part of a logo.
Benefits of using high contrast
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.
Stronger contrast might also help mobile device users when they're outside or in poor lighting conditions.
If you publish content using templates that control text and background colours, you shouldn't have to worry about the contrast of your text. Your web designer or developer should have taken care of it.
Images of text
If you use images of text, you must check that the contrast is adequate—except if the text is part of a logo, or is decorative or incidental to the image.
The accessibility guidelines describe an image of text as:
Take care to check that graphs, charts and maps with text legends, labels or captions offer sufficient contrast.
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 for these elements too.
A line graph with data points that have poor colour contrast[/caption]
The accessibility guidelines set minimum and enhanced contrast requirements. In Australia, you must meet the minimum requirements.
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 level-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:
- 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