Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Detect high contrast / ignore colour browser/OS modes - accessibility (Open Media Player) | Authors: Nick Freear, John Snyder | License: MIT
/*!
* Detect high contrast/ ignore colours browser/operating-system modes - accessibility.
* License: MIT
* Copyright 2012 The Open University.
* Author: Nick Freear, 2012-04-17
* Author: John Snyder, 2009-11-04
*
* https://gist.github.com/nfreear/c82581b4485cd303150d
* https://github.com/IET-OU/open-media-player-themes
*/
/*
Based on John Snyder's work (License: public domain)
http://stackoverflow.com/questions/1921047/how-to-check-if-user-is-in-high-contrast-mode-via-javascript-or-css
http://hardlikesoftware.com/weblog/2009/11/04/css-sprites-vs-high-contrast-mode/
http://hardlikesoftware.com/projects/HCMtest.html
*/
/*global window, jQuery */
(function (W, $) {
'use strict';
var $body = $("body")
, interval = $body.data("ignore-color-int") || 4000
, debug = W.location.href.match(/debug=1/) || $body.data("debug")
, C = W.console
, D = C && debug
;
function detect_ignore_color () {
/*
The following code detects high contrast mode.
It works because in high contrast mode the reported background color will not
be the same as it was explicitly set.
*/
var hcmclass = "no-ignore-color"
// (No need to append or remove the element.)
// add an element with explicit background color set, and now get the background color.
, $hcm = $("<p style='position:absolute;top:0;left:-999px;background-color:#878787;'>T</p>")
, testcolor = $hcm.css("background-color").toLowerCase()
;
// different browsers return the color in different ways - beware spaces!
$.isIgnoreColor = (testcolor !== "#878787" && testcolor !== "rgb(135, 135, 135)");
if ($.isIgnoreColor) {
hcmclass = "ignore-color";
}
$body.removeClass('ignore-color no-ignore-color').addClass(hcmclass);
D && C.log('> ', interval, hcmclass);
}
// Resize event seems to be fired on change to/from Windows high-contrast.
$(W).resize(detect_ignore_color);
$(function () {
detect_ignore_color();
// ?? http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
// Experimental: works when MSIE/Mozilla enter 'ignore colour' mode (and Mozilla leaves).
W.setInterval(detect_ignore_color, interval);
});
}( window, jQuery ));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.