Contrast: accessibility for web writers, part 6

Comments Off Written on May 31st, 2011 by
Categories: Accessibility

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

Example: an image used to show distorted 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.

Example: A line graph with text labels that have poor colour 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.

Example: A line graph with data points that have poor colour contrast

Contrast requirements

Minimum 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

Enhanced contrast

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.

Checking contrast

Several free tools let you check colour contrast. Two popular tools are:

The Contrast Analyser tool lets you select colours directly from your web pages

References

Next article in this series

You can subscribe to any comments to this entry via RSS 2.0. Both comments and pings are currently closed.