Assistive Technology Experiment: High Contrast

Several months ago I decided to spend some time using a few common, but often overlooked, assistive technologies and then report on my experiences and insights. The first two posts of this series presented my recommendations on designing for users of ZoomText and Dragon NaturallySpeaking. As the final part of this series, I will cover the High Contrast options in Windows 7.

High Contrast "Themes" and Design Considerations

High contrast settings benefit users with low vision or other visual disabilities. The "High Contrast Themes" present in Windows change or invert web page background and text colors. To enable High Contrast in Windows 7, select the Start menu (Windows Key), enter "Contrast" in the search field, and select "Turn High Contrast on or off".

Transparent backgrounds

GIF and PNG images are commonly used on the web where a transparent background is necessary. This allows the image to be used where the background color may change, or may be a pattern or gradient. Unfortunately, these images are often used in a way that makes them unreadable when the background color is inverted or changed. An example of this issue can, unfortunately, be found on the current version of our own site. At the bottom of this page is a section that displays the logos for the Center for Persons with Disabilities and Utah State University (where WebAIM is housed). These logos are both GIFs with transparent backgrounds. While these logos are readable on the default white background, they become much less readable when the background of this page is changed to black, as shown below:

Contrast this with our own logo, which maintains readability:

The WebAIM oval has a white background, but the edges are transparent. The image blends into the background, yet remains readable in High Contrast Mode. A similar technique should be used on other images with transparent background – an opaque background should be applied to essential content, especially text.

Font and background color

Relying on color alone to convey meaning is typically avoided because it can make content inaccessible to users who have color blindness, as well as users who are blind. While this accessibility principle is well known, there are also times when color can be used in a way that may only present problems to users who rely on high contrast. For example, the following image is a screenshot of two headings, an <h2> and <h3>. The <h2> contains 15pt white text on a green background and the <h3> contains 14pt green text on a white background:

This is accessible to an individual who is blind, because a true heading structure is used, and to someone who is colorblind or has low vision because the colors and contrast are distinctive. But if you view this image in High Contrast Mode, the differences between the headings becomes much less clear:

While there is a slight difference in text size (which is not always the case when this technique is used), it is still very difficult to distinguish heading levels, especially if headings are separated by large amounts of text. In a case like this, the headings could be further differentiated by using indentation (like we do on the WebAIM site), style differences (e.g., font face, bold, italics), and a greater difference in font size.

CSS Background Images

CSS Background images are often used on websites in place of true images, especially for small icons or for elements that are repeated throughout the page. These images are typically hidden in High Contrast Mode. The good news is that this means that decorative background images will usually be hidden, simplifying the visual layout of the page and potentially enhancing accessibility. The bad news is that CSS images, including CSS sprites, that convey meaning will usually be completely invisible. There are several resources online that describe this issue in greater detail and provide recommendations for workarounds. Todd Kloots of Yahoo has written a great article titled Techniques for High-Contrast-Friendly Icons that includes links to several other resources on this topic.

Is High Contrast Testing Necessary?

I highly recommend testing web content in Windows High Contrast Mode. There is no special software to purchase (assuming you have access to the Windows operating system) and almost no learning curve, and It helps uncover accessibility issues that cannot easily be uncovered in another way. Testing with Windows High Contrast is especially important if you are using non-decorative CSS images.

High Contrast Modes differ by program and operating system. On Mac OSX, the High Contrast settings invert all the colors on the screen, including images. This same thing occurs in Windows when colors are inverted using the Magnifier program, or when using a screen magnifier such as ZoomText. It may be worthwhile to test your pages using a variety of programs or operating systems.

Rediscovering the Importance of True Text

I want to highlight the importance of using true text over graphical text when possible. This was reinforced as I used ZoomText, Dragon, and now High Contrast Mode. This has been part of accessibility recommendations for years, and is included in WCAG 2.0 Level AA and AAA specifications. But it seems that the focus of this recommendation is often limited to the reduced readability of graphical text, especially as it is enlarged – something that is less significant due to the ability of modern browsers to enlarge images much more clearly. This is still an important reason to use true text rather than text in graphics, but there are ways graphical text can impact users with various disabilities. A few examples are listed below:

• Some users with cognitive disabilities might find content more readable in a certain font, text size, or color combination. I have met users with cognitive disabilities who prefer to read content with as few images as possible or with body text set to a certain line length. Graphical text cannot readily be modified to the user’s preferred presentation.
• Users with a variety of disabilities benefit from having content read aloud. The presence of an image is often identified by these readers. While this can be helpful in some instances, it can be confusing or distracting if a page has an excessive number of unnecessary images with alternative text.
• The use of true text ensures that there will not be an alternative text mismatch. The dangers of missing or incorrect alternative text are well known, usually because of the problems they pose for screen reader users. While using Dragon NaturallySpeaking, I also discovered that if alternative text did not match the graphical text (this was vert common), it was difficult to quickly navigate to an image link or button.
• True text has the potential to be more readable on various devices, such as phones and tablets. It scales and wraps better, and file size is typically smaller. It can also be translated into other languages more easily. While these are not just accessibility issues, they are still an important part of the overall user experience.

I am not recommending that graphical text be eliminated. There are many instances where images are still the best choice, or where limited CSS support makes the use of true text unrealistic. However, the use of true text has numerous accessibility benefits and should be implemented as often as possible.