This is actually a copy of an old post from 2007 that originally appeared on the Dojo blog. It has disappeared from the Web but I recreated it with the help of the wayback machine. While it does reference older operating systems, XP and OS X Tiger, the general information is still relevant.
Often when I am explaining accessibility requirements for Web pages, I find that people don’t really understand the issues concerning High Contrast. This post attempts to explain high contrast mode and includes some pictures to demonstrate the potential problems.
What is high contrast mode?
Most operating systems provide a mechanism to heighten the contrast on the screen by changing the screen colors and also increasing the font size. All colors on the screen are generally reduced to just two colors which differ greatly in contrast level. The most common schemes are white on black or black on white but most operating systems allow the user to customize the colors. Changing the color scheme and increasing the font size makes it easier for users with vision problems to interpret the information on the screen.
Setting High Contrast Mode in Windows XP
From the control panel in Windows select Accessibility Options. In the Accessibility Options dialog, select the display pane. Check the high contrast checkbox to turn on high contrat mode, uncheck it to turn off high contrast mode. Select the settings button to modify the high contrast colors and settings. Press OK to close the Accessibility Options dialog and activate or disable high contrast mode. There is also a default key combination, shift-alt-printscreen to quickly turn high contrast mode on and off. This key combination can be enabled/disabled in the high contrast settings dialog.
Setting High Contrast Mode on the Mac OS X Tiger
From the System Preferences panel, select Universal Access. In the Display section select Black on White or White on Black. There is also a slider to modify the contrast settings or to Use grayscale.
High Contrast Mode on the Web
When you change to a high contast scheme at the operating system level all applications should respond to that new scheme, including browsers. When using Firefox 2.0 on Windows you will need to reload the current page for the high contrast settings to completely take effect. In current versions of Firefox you need to modify the display settings.
With high contrast mode turned on, all background colors are mapped to the high contrast background color and all foreground colors are mapped to the high contrast scheme foreground color. This includes all colors specified via CSS stylesheets, directly via the style attribute or inherited. In addition, all background images specified via CSS are turned off. Actual images incorporated into the Web page via img elements remain visible. All color and image information specified via CSS is turned off. Thus, reliance by Web pages on CSS color information and background images can render a page impossible to use in high contrast mode.
Hopefully that helps to demonstrate the problem. The CSS background image of the toolbar buttons is not rendered in high contrat mode so in this mode the user would probably not be aware that a toolbar even exists! This is just one example, many more exist. The plus and minus images to expand and collapse a tree view, the slider or progress bar image or color block to graphically present information and the color palette are a few examples.
How to solve the High Contast Issues?
The easiest solution is to not use CSS background images which convey information necessary to interact with the page. When a real img element is used, the image is still visible in high contrast mode. This can also cause problems for users which have vision issues that cause difficulty interpretting the image. But, if img elements are properly used, the user can turn off images in the browser and the alt attribute of the img element will provide a sufficient description.
One argument against using img elements is the performance hit of downloading many images. With a CSS background image one single image can be used and CSS can be used to position the proper section of the image within an element.
When color is used to distinguish the states of items such as active, selected, disabled, etc, different styles of borders can be used to provide the same information in high contrast mode. The border can be created in the same color as the element’s background so it is not visible in normal, colors on mode. But, in high contrast mode the borders will be visible in the high contast scheme foreground color. This solution is being used for the dijit progress bar.