Home » Site Building Guide » Best practices

Accessibility and Drupal

· · · · ·
Last modified: November 9, 2009 - 01:57

To make your site accessible...

Consider Contrast When Pairing Colors

To appreciate the importance of selecting color pairs (foreground and background) carefully, consider these points:

  • According to Vischeck, roughly 1 in 20 people have some sort of color vision deficiency.
  • Only about 52 percent of the people who have tried this self test for color blindness have been able to correctly identify all six numbers.

If you take the self test for color blindness, you might better understand the problems a poor choice of colors can create for people who cannot see all colors well. Even if you get every answer in that test correct, you will probably have to look carefully to see at least one or two of the numbers. If so, you will be experiencing how difficult reading is when the foreground color — the color used for the text — has too little contrast against the background color — the color used for everything else.

What is sufficient color contrast?

As part of its Web Content Accessibility Guidelines (WCAG 2.0), the Worldwide Web Consortium (W3C) has established guidelines for sufficient color contrast. Briefly stated, they are:

  • For large text, such as headings:
    • A color contrast ratio of at least 3:1 normally provides enough contrast.
    • A color contrast ratio of at least 4.5:1 is necessary when you must have enhanced contrast.
  • For regular text:
    • A color contrast ratio of at least 4.5:1 normally provides enough contrast.
    • A color contrast ratio of at least 7:1 is necessary when you must have enhanced contrast.

When would I need enhanced contrast?

Use the guidelines for enhanced contrast when these or similar conditions exist:

  • A heading needs extra emphasis — for example, because the information is urgent.
  • Other text is finer or smaller than normal.
  • The information is likely to be used with poor lighting or high glare.
  • People with poor vision are a significant portion of your audience.

How can I measure color contrast?

Fortunately, there are a number of free tools you can use to check the contrast of color pairs in your Web pages. One is the Paciello Group's free Colour Contrast Analyser, which is available in both a Windows version and a Mac version. When you use this tool:

  • Be sure to set it to measure the luminosity difference. (It also gives values for color difference, the algorithm that was used under WCAG 1.0.)
  • Be aware that it will say that some color pairs fail when their contrast ratio is acceptable under WCAG 2.0. So be sure to read the contrast ratio, not just whether the label is "Pass" or "Fail." (The tool is adjusted for contrast ratios that appeared in an earlier draft of WCAG 2.0.)

To learn more about these issues, go to WCAG 2.0 Guideline 1.4 and scroll down to 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced). There you can also find tips on meeting each guideline and more explanations to help you understand each guideline.

Drupal accessibility resources

Drupal 7 accessibility notes

Although Drupal 7 hasn't been released yet, there are a number of changes in core which will greatly assist with accessibility. Drupal 7 will see improvement in the Forms API (FAPI), but will also come with a standardized way to make descriptive text visible to screen readers and invisible to sighted people. To implement this in your templates you can just wrap elements with the CSS class="element-invisible". To implement within a module you can use this code snippet:

<?php
l(t('Read more...<span class="element-invisible"> about %title</span>', array('%title' => $node->title)), 'node/' . $node->nid, array('html' => TRUE));
?>

an alternative implementation is:

<?php
$link['title'] = '<span class="icon"></span>' . $item['link']['title'];
$link['attributes'] = array('id' => 'toolbar-link-' . $id, 'class' => array('to-overlay'));
if (!empty($item['link']['description'])) {
  $link['title'] .='<span class="element-invisible">' . $item['link']['description'] . '</span>';
  $link['attributes']['title'] = $item['link']['description'];
}
?>

About web accessibility

Techniques and best Practices for HTML, digital media, JavaScript

Standards

Tools for evaluating accessibility

Programming tools for accessibility

Screen readers

» Login or register to post comments
 
 

Drupal is a registered trademark of Dries Buytaert.