Title: Contrast Errors in Chrome
Last modified: August 30, 2016

---

# Contrast Errors in Chrome

 *  Resolved [Caorda](https://wordpress.org/support/users/caorda/)
 * (@caorda)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/contrast-errors-in-chrome/)
 * We noticed that occasionally, the Chrome browser failed to allow us to swap out
   of high contrast mode when in high contrast mode.
 * The issue was in the /toolbar/js/a11y.js file. The Javascript executed with an
   error on the click handler.
 * We recommend changing the code as follows (changed functions are the click handlers
   for the toggle contrast links):
 * > function createCookie(name, value, days) {
   >  if (days) { var date = new Date();
   > date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = “;
   > expires=” + date.toGMTString(); } else { var expires = “”; } document.cookie
   > = name + “=” + value + expires + “; path=/”; }
   > function readCookie(name) {
   >  var nameEQ = name + “=”; var ca = document.cookie.
   > split(‘;’); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(
   > 0) == ‘ ‘) c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return
   > c.substring(nameEQ.length, c.length); } return null; }
   > function eraseCookie(name) {
   >  createCookie(name, “”); }
   > jQuery(document).ready(function ($) {
   >  if (readCookie(‘a11y-desaturated’)) {
   > $(‘body’).addClass(‘desaturated’); $(‘#is_normal_color’).attr(‘id’, ‘is_grayscale’).
   > attr(‘aria-checked’, true).addClass(‘active’); } $(‘.toggle-grayscale’).on(‘
   > click’, function () { if ($(this).attr(‘id’) == “is_normal_color”) { $(‘body’).
   > addClass(‘desaturated’); $(this).attr(‘id’, ‘is_grayscale’).attr(‘aria-checked’,
   > true).addClass(‘active’); createCookie(‘a11y-desaturated’, ‘1’); return false;}
   > else { $(‘body’).removeClass(‘desaturated’); $(this).attr(‘id’, ‘is_normal_color’).
   > removeAttr(‘aria-checked’).removeClass(‘active’); eraseCookie(‘a11y-desaturated’);
   > return false; } }); // Contrast handler if (readCookie(‘a11y-high-contrast’)){
   > $(‘body’).addClass(‘contrast’); $(‘head’).append($(“<link href='” + a11y_stylesheet_path
   > + “‘ id=’highContrastStylesheet’ rel=’stylesheet’ type=’text/css’ />”)); $(‘#
   > is_normal_contrast’).attr(‘id’, ‘is_high_contrast’).attr(‘aria-checked’, true).
   > addClass(‘active’); $(‘.a11y-toolbar ul li a i’).addClass(‘icon-white’); } 
   > $(document).on(‘click’, ‘.toggle-contrast’, function () { if ($(‘#highContrastStylesheet’).
   > length === 0) { $(‘head’).append($(“<link href='” + a11y_stylesheet_path + “‘
   > id=’highContrastStylesheet’ rel=’stylesheet’ type=’text/css’ />”)); $(‘body’).
   > addClass(‘contrast’); $(‘.a11y-toolbar ul li a i’).addClass(‘icon-white’); 
   > createCookie(‘a11y-high-contrast’, ‘1’); $(‘.toggle-contrast, .toggle-contrast1’).
   > removeClass(‘active’).removeAttr(‘aria-checked’); $(this).addClass(“active”).
   > attr(‘aria-checked’, ‘true’); } return false; }); $(document).on(‘click’, ‘.
   > toggle-contrast1’, function () { if ($(‘#highContrastStylesheet’).length !=
   > = 0) { $(‘#highContrastStylesheet’).remove(); $(‘body’).removeClass(“contrast”);
   > $(‘.a11y-toolbar ul li a i’).removeClass(‘icon-white’); eraseCookie(‘a11y-high-
   > contrast’); $(‘.toggle-contrast, .toggle-contrast1’).removeClass(‘active’).
   > removeAttr(‘aria-checked’); $(this).addClass(“active”).attr(‘aria-checked’,‘
   > true’); } return false; });
   >  if (readCookie(‘a11y-larger-fontsize’)) {
   >  $(‘body’).addClass(‘fontsize’);
   > $(‘#is_normal_fontsize’).attr(‘id’, ‘is_large_fontsize’).attr(‘aria-checked’,
   > true).addClass(‘active’); }
   >  $(‘.toggle-fontsize’).on(‘click’, function () {
   >  if ($(this).attr(‘id’) ==“
   > is_normal_fontsize”) { $(‘body’).addClass(‘fontsize’); $(this).attr(‘id’, ‘
   > is_large_fontsize’).attr(‘aria-checked’, true).addClass(‘active’); createCookie(‘
   > a11y-larger-fontsize’, ‘1’); return false; } else { $(‘body’).removeClass(‘
   > fontsize’); $(this).attr(‘id’, ‘is_normal_fontsize’).removeAttr(‘aria-checked’).
   > removeClass(‘active’); eraseCookie(‘a11y-larger-fontsize’); return false; }});
   >  var sections = document.getElementsByTagName(“section”);
   >  for (var i = 0, 
   > max = sections.length; i < max; i++) { sections[i].setAttribute(‘tabindex’,-
   > 1); sections[i].className += ‘ focusable’; } if (document.location.hash && 
   > document.location.hash != ‘#’) { var anchorUponArrival = document.location.
   > hash; setTimeout(function () { $(anchorUponArrival).scrollTo({ duration: 1500});
   > $(anchorUponArrival).focus(); }, 100); } });
 * The new binding will keep the ID constant between the two modes, and relies instead
   on classes to keep it up to date.
 * [https://wordpress.org/plugins/wp-accessibility/](https://wordpress.org/plugins/wp-accessibility/)

Viewing 1 replies (of 1 total)

 *  Plugin Author [Joe Dolson](https://wordpress.org/support/users/joedolson/)
 * (@joedolson)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/contrast-errors-in-chrome/#post-6731914)
 * Hi! If you wanted to make a pull request against [https://github.com/joedolson/wp-accessibility](https://github.com/joedolson/wp-accessibility),
   that would be a great way to help me out with this.
 * Thanks!

Viewing 1 replies (of 1 total)

The topic ‘Contrast Errors in Chrome’ is closed to new replies.

 * ![](https://ps.w.org/wp-accessibility/assets/icon-256x256.png?rev=1097582)
 * [WP Accessibility](https://wordpress.org/plugins/wp-accessibility/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-accessibility/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-accessibility/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-accessibility/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-accessibility/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-accessibility/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Joe Dolson](https://wordpress.org/support/users/joedolson/)
 * Last activity: [10 years, 5 months ago](https://wordpress.org/support/topic/contrast-errors-in-chrome/#post-6731914)
 * Status: resolved