For people with low vision (and not only for them), high contrast mode can be a great improvement for browsing the web. But not every page is high contrast mode friendly - he're how to change it.

1. Jakub Tománek
2013 © Skype. Commercially non-confidential.
Accessibility in High Contrast Mode

2. 2013 © Skype. If you have received this presentation in error, please delete it and notify me immediately.
My Account application

3. Why should you make pages accessible?
It‟s the law
It will bring you more users and thus more money
Or just because you actually like your job and want to do it right
2013 © Skype. It„s only logical.

4. Reasons for using High Contrast Mode
Users with low vision
Colour-blind people; 8% of male population has red-green colour blindness1
Users with eyes sensitive to light
Personal preference (night owls)
2013 © Skype. And at last I see the light and it„s like the fog has lifted...
1 http://www.color-blindness.com/2006/04/28/colorblind-population/

5. OS / Browser support
Windows:
• Internet Explorer supports High Contrast Mode
• Firefox supports High Contrast Mode, but doesn„t adhere to system colour settings
• Chrome has only message “Install plugin”. Plugin doesn„t really do high contrast
Mac:
• Mac has “invert colours” instead of High Contrast Mode
2012 © Skype. The year is incorrect on this slide.
Left Alt + Shift + Print Screen
System Preferences → Accessibility → Display → Invert Colors

6. 2013 © Skype. It‟s not what it seems.
Before After

7. 2013 © Skype. On the left, you have reached the end of the internet.
Before After

8. Technical solutions
2013 © Skype. Use 1% solution of copric sulfate to maximize the efficiency.

9. Improving pages for High Contrast Mode
Detecting High Contrast Mode
Transparent border
No background-image for images which need to be shown (CSS sprites)
Overriding default theme
2013 © Skype. You‟re most transparent to me. I can see right through you.

10. Detecting High Contrast Mode
Inject an element with background-image and check periodically if the background-image
is still on the element
• Works only in IE and Firefox on Windows
• Adds unnecessary overhead
Using media queries
• IE10+, Windows 8 only
2013 © Skype. But don‟t forget about XSS.

11. “Transparent” border
Simply add an invisible border to an element
.box {
background: #00AFF0;
border: 1px solid transparent;
color: #FFF;
}
2013 © Skype. The cake is a lie.
Regular
High Contrast without border
High Contrast

12. Replacing CSS background-image sprites
background-image images are removed in High Contrast Mode
Solutions:
• :before element (needs hacks for IE7)
• <img> sprites with overflow
Examples: http://yaccessibilityblog.com/library/high-contrast-friendly-icons.html
2013 © Skype. Talk about images and not a single photo from Flickr with a funny caption. Disgrace.

13. CSS sprites using :before
Pros:
Pure CSS solution
Cons:
Doesn‟t work in IE7
Solutions for IE7:
CSS hacks (conditional CSS or *property): doesn‟t work in High Contrast Mode
Expressions: might affect performance
2013 © Skype. Chicken or an egg? Dinosaurs were first.

14. CSS sprites using <img>
Pros:
Works in all browsers
Cons:
Requires changes and additional markup in HTML
2013 © Skype. Too much sugar in sprites for my taste.

15. Overriding default system theme
You can„t.
Unless you have IE10 or newer on Windows 8 (or newer).
-ms-high-contrast: active mediaquery
http://msdn.microsoft.com/en-us/library/ie/hh771830%28v=vs.85%29.aspx
2013 © Skype. Only five more to go.

16. Mediaquery example
.errorMessage {
background: #FFEED9 url('error.svg') no-repeat 0 0;
border: 1px solid red;
}
@media screen and (-ms-high-contrast: active) {
.errorMessage {
background: #290500 url('error.svg') no-repeat 0 0;
border-color: #FF7272;
}
}
2013 © Skype. Oops.
Regular
High Contrast
High Contrast + override

17. Questions?
2013 © Skype. Please be gentle.

18. Further reading
http://jobs.skype.com
http://www.colour-blindness.com/
http://yaccessibilityblog.com/library/high-contrast-friendly-icons.html
http://msdn.microsoft.com/en-us/library/ie/hh771830%28v=vs.85%29.aspx
http://www.bing.com/search?q=high+contrast+mode
2013 © Skype. Not a shameless promotion at all.