This is a test page for a CSS Sprite technique that works with high contrast mode. Below are two disclose icons (click to show details). The first uses normal background positioning and the second uses JavaScript to convert the CSS background into a positioned image. When you go into high contrast mode you will see the first disclose icon disappear (along with the annoying background image under this paragraph). The second icon works even in high contrast mode.

Traditional CSS Sprite

This disclose icon (the box with + or - in it) is a single background image ( ). CSS background position is used to select which part of the image to show (+ or -). In high contrast mode background images are not shown so you see nothing and the user has no idea that there is something to expand.

HCM compatible CSS Sprite

This disclose icon (the box with + or - in it) is a single image ( ). It starts out as a CSS background and JavaScript converts it to an img which is positioned relative to a span with overflow:hidden so that just the desired part of the image is seen. In high contrast mode the image is still seen so no functionality is lost.