May 27, 2015

Accessibility - Detecting high contrast mode to work around a bug in Firefox

Visually impaired users might want to watch your website in high contrast mode. This display mode aims to increase the contrast of displayed content by overriding your styling.

Here is how you enable high contrast mode in Windows:

Unfortunately there is a bug in Firefox, which prevents borders from being rendered in  high contrast mode:

In order to work around that bug my colleague Alexander Krauss came up with 2 step workaorund:
  1. check if the browser is in high contrast mode 
  2. style with border:inset instead of regular borders

Check if the browser is in high contrast mode

The JavaScript snippet checks if the background image of a hidden div has been removed. If so we can assume the browser is operating in high contrast mode. Therefore we add a high-contrast-mode css class to the html element.

Style with border inset instead of regular borders

Now we can add special styles for high contrast mode to our style sheet. In this case we want to make sure the borders are visible. Since the above bug prevents regular borders we use inset borders instead.