<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.
Please wait for detection results...
The following samples provide test cases for common pitfalls related to author styles being overwritten.
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
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.
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.
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.
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
The tests which are performed are as follows:
imageResult- This tests to see if an inline HTML image tag has been changed or is not being displayed.
backgroundImageResult- This tests if the CSS background image has been changed or is not being displayed.
borderColorResult- This tests to see if the color of the border of the test
<div>has been changed.
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.
sampleFontFamilyResult- This test checks the
font-familyset in CSS on the
<div>. If the
font-familyhas changed the script will add a class of
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-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.
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.
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:
font-family(e.g., to a sans-serif font that is easier for the user to read).
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
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
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.
!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.
Note: It is also possible to turn a high contrast theme on or off using the Left Alt + Left Shift + Print Screen keyboard shortcut.
falsein this case, the others incorrectly expose
truehere. For this reason,
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:
filterproperty to create a gradient background, this gradient is not removed or modified. Since the background color does not change and the foreground does, this may result in text being difficult or impossible to read.