High contrast mode is an accessibility
feature in the Windows operating system that changes background and
foreground colors so that they are easier to perceive by low vision
users who require a particular contrast scheme. Browsers generally
inherit this scheme, usually by overriding background and foreground
color and removing background images.
The plan is to follow a similar approach as DOJO does, which in a
nutshell would mean the following:
1. When jQuery loads, create a test div element that is positioned
off-screen. Set different border colors for individual sides of the
div. Also set a background image.
2. After creation, check the element's computed styles. If the border
colors are now the same for each side of the div, or the background
image is no longer set, this means high contrast mode is active. This
is then indicated as a globally accessible flag somewhere on the
jQuery object (for example, "$.highContrast = true").
3. When the high contrast flag is set to true, widgets that normally
have problems displaying correctly in high contrast mode will apply
specific HTML and/or CSS changes to solve these issues.
Examples of changes that could be made when high contrast mode is on:
- Adding border styles. Border styles remain visible in high contrast
mode. this is specifically useful for widgets that indicate selection
using background styles.
- Inserting text. For example, the progressbar widget is difficult to
see in high contrast mode because it uses background images. To get
around this we could ensure that the current value of the progressbar
is shown as text as well when high contrast mode is active (e.g.
"54%"). The text would then correctly inherit the high contrast
- Inserting images. For example, some components may normally use
background images, but in high contrast mode the widget could instead
inject a high contrast version of the image into the DOM (images in
the DOM will still be visible in high contrast mode)
- Unhiding content. for example, icon buttons are implemented using a
background image. These buttons also have a hidden span element that
contains the button's textual name. In high contrast mode, we can
unhide this element, so that the button would still be usable as a
- Applying focus styles. To make it easier to see which element has
focus, we could add thicker outline or border styles for focused
The point is, there will be a flag set that will allow us to do
whatever is necessary to make widgets usable in high contrast mode.