Change the site color by clicking the contrast button

Question

Change the site color by clicking the contrast button

Asked 8 years, 4 months ago

Viewed 2,745 times

2

I’m using a website developed in Bootstrap and it will have accessibility. I was able to increase and decrease the font, but I’m not able to create the contrast, IE, by clicking the button Contrast, the site go dark with white fonts. I tried with the code below but could not progress in Javascript.

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="CONTRASTE" onclick='contraste()'><i class="fa fa-adjust" aria-hidden="true"></i> Contraste</button>

Javascript:

 function contraste(){
         document.bgColor = '#000';
    }

2 answers

0

I got that solution:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cor fundo</title>
<link rel="alternate stylesheet" href="css-teste/escuro.css" title="2">
<link rel="alternate stylesheet" href="css-teste/claro.css" title="1">

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/alterar.js"></script>

</head>
<body>

<button id="click">Contraste</button>

<br><br>

Conteúdo do site

</body>
</html>

Jquery

$(document).ready(function() {

       if($.cookie("contrast-bar")) {setActiveStyleSheet($.cookie("contrast-bar"));}

       $('#click').click(function(e) {
               e.preventDefault();
               if ( getActiveStyleSheet() == '1') {
                       setActiveStyleSheet('2');
               } else {
                       setActiveStyleSheet('1');
               }
       });
});

function setActiveStyleSheet(title) {
       var i, a, main;
       for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {

               if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
                       a.disabled = true;
                       if(a.getAttribute("title") == title) a.disabled = false;
               }
       }
       $.cookie("contrast-bar",title, {expires: 365, path: '/'});
}

function getActiveStyleSheet() {
       var i, a;
       for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
               if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
       }
       return null;
}

function getPreferredStyleSheet() {
       var i, a;
       for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
               if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title")) return a.getAttribute("title");
       }
       return null;
}

jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};// JavaScript Document

dark css.

body{
  background-color: #000;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
}

clear css.

 body{
      background-color: #FFF;
      color: #00F;
      font-family: 'Roboto', sans-serif;
    }

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.

by Oralista de Sistemas • **23,115** points · Answer 1 · 2017-06-30T14:23:57+00:00

The code you wrote just arrow the proriness of the document in a way that tends not to affect the page.

You could do what you want with the following code:

function contraste(){
     $("body")
         .css("background-color", "black")
         .css("color", "white");
}

Note that in CSS, color in general affects the color of the text within an element or its children.

But still, it may not be effective. If any element has a CSS rule set to the color of the text, it will override the color set by the function above. You’d have to alter the other elements as well. Even for a simple site the effort tends to grow and become unviable very fast if you want to control everything via Javascript.

The ideal is for you to have two style sheets - one of high contrast and the other not. So you can style not only the text, but the background and details of all the elements of your page in a more comfortable and accessible way for those who have vision problems.

Hence you control which stylesheet will load from some session variable (or user configuration). You will need to code in the backend as well to achieve this goal.