Change site color by clicking contrast button

Question

Change site color by clicking contrast button

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

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

<buttontype="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';
    }

javascript jquery

asked by anonymous 30.06.2017 / 16:16

2 answers

1

The code that you just wrote down the prority of 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 generally affects the color of text within an element or its children.

But still, this may not be effective. If any element has a CSS rule defined for the text color, it overlaps the color defined by the above function. You would have to change the other elements as well. Even for a simple website the effort tends to grow and become unfeasible very fast if you want to control everything via Javascript.

Ideally you should have two style sheets - one high-contrast and one 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 style sheet will load from some session variable (or user configuration). You will need to encode in the backend also to achieve this goal.

30.06.2017 / 16:23

Python wordlist generation problem (2.7) Use an activity / fragment on a bottom sheet

score 0 · Accepted Answer

I've got this 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><scripttype="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;
}

claro.css

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