Browser color override test for Modernizr

July 13, 2011

I’ve been working on a project recently that requires the website to be usable for people with visual and cognitive impairments. One of the tests that we’ve been doing is overriding the text/link and background colors in Firefox and IE.

The way the layout works for various parts of the site design needs to change when in this viewing mode so I’ve needed a way to test for when this happens so I can use different css. Here is a little Modernizr test that adds a high-contrast/no-high-contrast class to the other Modernizr classes.

Modernizr.testStyles('#modernizr {background-color: rgb(171,239,86)} ', function(elem, rule){
  var backgroundColor = jQuery('#modernizr').css('background-color'); 
  Modernizr.addTest('high-contrast', backgroundColor !== 'rgb(171, 239, 86)' 
    && backgroundColor !== 'rgb(171,239,86)'
    && backgroundColor !== '#abef56');
});

One problem I had was getting a reliable way of accessing the backgroundColor property from the DOM so I’ve had to use some jQuery ( not ideal I know ) as well.