High Contrast Mode Primer

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.

The following is a editor toolbar that has been created using a CSS background image. The mouse is hovering over the Bold button.
editor toolbar with several buttons, cut,copy, paste, bold, italics, etc

And here is the same toolbar when the system is set to white on black high contrast mode. The mouse is hovering over the Bold Button: editor toolbar in high contast mode, the toolbar buttons are no longer visible

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.

Progress bar with background image in standard mode: progress bar at 25%

Here is the same progress bar in high contrast mode with with a border added around the bar: high contrast mode progress bar at 25% with a visible border around the bar

These are some of the techniques which are being used in the Dojo JavaScript Toolkit Core Widget set to enable them for high contrast accessibility. In addition to high contrast mode, the Dojo / Dijit Core Widget set are fully accessible to keyboard and screen reader and other assistive technology users.

About Becka11y

Web Accessibility Consultant with 30+ years in the software industry and 12+ years of direct accessibility innovation.


  1. High contrast mode reduces all colors 3: foreground color, background color, and selection color. It also removes all CSS background images. Thus, if the site uses a background image to provide the button text, it will not be visible in high contrast mode. The only way to understand how a site is working is to inspect it via the Web inspector or developer tools in your browser. However, you will need coding experience in order to use this method. The only other option is to complain to the site owner.

  2. wHEN ACCESSING PROGRAM SUCH AS MY BANK ACCOUNT .. THE BUTTON BOXES DON’T SHOW THEIR NAMES and in others the button boxes are invisible .. I have been trying to correct this by using high contrast color sttinmgs ,but the logic of the schemes eludes me .. is there a location where these functions and their means of use are explained .. tnx John

Leave a Reply

Your email address will not be published. Required fields are marked *