The High Contrast Mode Detection JavaScript file performs a series of tests that help determine whether or not styles defined by the website are being overwritten. In most cases when the website's styles are being overwritten, it is due to users applying a high contrast theme on the Windows operating system, utilizing their browser or a browser extension to disable images, or applying a user-defined style sheet. After the tests are performed, a collection of attributes get applied to the <html> element, allowing developers to reference them and correct any issues that are introduced.


The High Contrast Mode Detection Script is executed on page load. This demonstration will show the test results below after a short delay. Each test can then be used in reference to the samples below to see how each affects the samples as the test values change. Enabling and disabling a high contrast Windows theme as well as applying a user-defined style sheet to see these tests change. Each time a setting is changed, the page must refresh to execute the function.

Detection Results:

Please wait for detection results...


The following samples provide test cases for common pitfalls related to author styles being overwritten.

Sample 1

The following sample contains a background gradient specific to Internet Explorer. The script detects that this gradient is present and removes it in order to prevent color contrast issues introduced by something changing the font color and that new color appearing on top of this gradient.

Text on top of gradient color

Sample 2

The following sample contains a background image with hidden text ("valid"). When a high contrast theme is detected, the background image is removed and the hidden text should become visible.


Sample 3

The example below contains 2 font glyphs. The first font glyph resembles a printer and has been placed inside of a link containing link text of "Print" that has been hidden with CSS. The second font glyph resembles a pencil and has a text description of "Pencil" that has been hidden with CSS.

When the script detects that a Windows high contrast theme or a user-defined style sheet that doesn't change the font-family CSS property has been applied, both font glyphs should remain visible; however, their color might change based on the link and foreground colors defined in the applied theme.

If a user-defined style sheet has been applied that does change the font-family CSS property, the font glyphs will disappear. Doing this will allow font glyphs to remain visible in all browsers except for Internet Explorer. Fallback text is necessary for IE and is illustrated in Sample 4 by using the Adobe Blank font.

Sample 4

Below are the same font icons as in sample 3, but now the fallback text is hidden using the Adobe Blank font. The Adobe Blank font is invisible until a user changes the font-family controlling the text. Once a new font-family is used, the font becomes visible and takes on the styles given by CSS. This is only needed for IE as IE will not allow the developer to override the user-defined style sheet.

How the Script Works

When the page loads, a <div id="hcTest "> element and attribute are prepended to the <body> tag. As this "test " <div> is built, the function will add styles necessary to perform each test. The tests are then executed and compare the set styles against the computed styles of the browser. If the styles are different, then specific classes are added to the <html> element.

The tests which are performed are as follows:

  1. imageResult - This tests to see if an inline HTML image tag has been changed or is not being displayed.
  2. backgroundImageResult - This tests if the CSS background image has been changed or is not being displayed.
  3. borderColorResult - This tests to see if the color of the border of the test <div> has been changed.
  4. lightOnDarkResult - This test compares the color of the text against the color of the background. Currently, this test uses yellow, green, white and black for text colors while using black or white for the background color.
    • If the text is lighter than the background, the script will add a class of lightOnDark to the <html> element.
    • If the text is darker than the background, the script will add a class of darkOnLight to the <html> element.
  5. sampleFontFamilyResult - This test checks the font-family set in CSS on the <div>. If the font-family has changed the script will add a class of ui-helper-nocustomfonts to the <html> element.
  6. highContrastModeResult - This test checks the status of any of the previous tests. If any are true, the script will add a class of ui-helper-highcontrast to the <html> element.

The ui-helper-nocustomfonts class is the only indicator that a user has applied a user-defined style sheet. The ui-helper-highcontrast is added to the <html> element when any of the tests show a change in styles or when images are disabled.

Each browser allows users to disable images, which disables background images in addition to HTML images and results in the imageResult test returning false. For instructions about how to disable images in a particular browser, see the Testing Procedure for Each Browser section.

About High Contrast Themes

High contrast themes are available on the Windows operating system and serve as an accessibility feature for low vision users. When these themes are applied, background colors and font colors are changed in order to create a higher color contrast, making text and borders easier to see. These changes are also inherited for web content in Internet Explorer and Firefox. Opera and Chrome do not inherit high contrast themes; however, both have browser extensions available that allow users to change the theme.

About User-Defined Style Sheets

All browsers allow users to load their own style sheets, either through a browser setting or through browser extensions that the user can install. These style sheets can be used to override a web page's CSS styles defined by the website. This way, users can enhance the appearance of a web page to better fit their needs. Examples of modifications that user-defined style sheet are likely to contain are:

Such user styles will often be defined with the !important keyword to ensure that they will be guaranteed to override author defined styles, regardless of how high the specificity of those style declarations are. If a user style uses the !important keyword, there is no way for a web author to override it. If the keyword is not used, it's possible for web authors to still override the styles through the use of !important.

Note: It's up to the user (or to the tools installed by the user) to determine what styles a user style sheet contains. The user styles will be different from person to person, depending on what works best for them. Because of this, it is not possible for a web developer to predict what kind of styles a user might load, or whether they will use the !important keyword.

Common Issues with User-Defined Style Sheets

There is good chance that a user style sheet contains styles that modify background and foreground colors to increase contrast or remove background images. In that respect, the issues that can be expected are similar to issues that can be expected when a high contrast theme is applied. This means that the High Contrast Mode Detection script can also be used to determine whether or not a custom style sheet is active and is overriding background and foreground colors.

Additionally, a common issue occurs when a web page uses font based icons (i.e. icons that are actually text characters in a custom font set). Such font icons only work if the correct font-family is set. If a user-defined style sheet were to override font-family for all elements using the !important keyword, then font based icons would break.

Note: The !important declaration is a way to have the rules you feel are most crucial always be applied. !important declarations should be reserved for special needs and users who want to make web content more accessible by overriding default user agent or website stylesheets. In short, code CSS properly and avoid using !important wherever possible.

Enabling High Contrast Themes

In Windows XP

  1. In Control Panel, make sure you are in Classic View, with all Control Panel icons showing. If not, click Switch to Classic View in the left pane of Control Panel.
  2. Click Accessibility Options to open the Accessibility Options dialog box. Click the Display tab and select the Use High Contrast check box.
  3. Click Settings to open the Settings for High Contrast dialog box. Select the check boxes for the options you want.
  4. Click OK, click OK again, and then click the Close button.

In Windows 7

  1. Right click on the desktop, select "Personalize " from the context menu.
  2. Under "Basic and High Contrast Themes ", select one of the available high contrast themes

Note: It is also possible to turn a high contrast theme on or off using the Left Alt + Left Shift + Print Screen keyboard shortcut.

Testing Procedure for Each Browser

Safari OSX:


Testing Procedure

IE 8+:


Testing Procedure

Chrome Windows:


Testing Procedure

Firefox Windows:


Testing Procedure

Opera Windows:


Testing Procedure

General Notes:

Problems Caused by High Contrast Themes

When a high contrast theme is enabled, the following changes are applied to the styles on a web page for browsers that inherit high contrast themes:

These changes can cause the following issues: