View Full Version : ExtJS 4.0.0 web accessibilty issue in High Contrast mode.

6 Dec 2012, 1:30 AM

We are using ExtJS 4.0.0 in our application. All the background images of extjs does not show up when the application is accessed in High Contrast Mode. For ex: the ext-all.css has trigger.gif as background image and it does not show up in High contrast mode :

.x-form-trigger {
background-image: url("../../resources/themes/images/default/form/trigger.gif");
background-position: 0 0;
border-bottom: 1px solid #B5B8C8;
cursor: pointer;
float: left;
height: 21px;
width: 17px;


Kindly let me know how can we make these background images visible in High Contrast mode also?

8 Dec 2012, 6:25 AM
You will likely have to create your own images then.

10 Dec 2012, 12:43 AM
Is it there any possible solution with some css changes in ext-all.css.?

25 Jun 2014, 6:50 AM
Haven't seen any updates to this so I thought I'd chime in with my $.02, but by switching to Window's High Contrast Theme it might not be possible to use background images at all (so don't go designing your own images just yet).

According to the documentation (http://windows.microsoft.com/en-us/windows7/make-the-computer-easier-to-see-optimize-visual-display) (and also see this article (http://webaim.org/blog/high-contrast) in WebAIM particularly the section on "CSS Background Images") which states that this feature "turns off all unimportant, overlapped content and background images to help make the screen easier to see."

So my suggestion (which is what I use in my apps) is to have a control that allows the user to switch to the Accessibility Theme of ExtJS ( ext-all-access.css ). Make sure that this control is clearly visible when windows is switched to "High Contrast Mode" especially since it's only in Windows 8 that the browser can detect (using the -ms-high-contrast media feature (http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx)) that windows is in high contrast mode.

Hope this helps.

25 Jun 2014, 7:11 AM
I take back some of my comments in my previous post on this topic.
Switching to Windows High Contrast mode (at least in Windows 7) does not fully disable CSS background images (although there is a blog post in the Paciello Group site about making "High Contrast Proof CSS Sprites (http://blog.paciellogroup.com/2010/01/high-contrast-proof-css-sprites/)"), but in using the Kitchen Sink (http://docs-origin.sencha.com/extjs/4.2.2/extjs-build/examples/build/KitchenSink/ext-theme-access) demo in both the Accessibility Theme and the Classic theme in both normal and Windows High Contrast mode I see that you CAN access the controls so perhaps they have some of the bugs worked out on CSS Sprites in Windows High Contrast mode since this post was originally made.

But it also means that you probably shouldn't have to create your own sprite images as the ones that come with the theme apparently do work.