Javascript accessibility (contrast)

Question

I have a website that I have to have the following methods:

Increase source, Decrease source, Contrast.

I already got the first two, I now need to contrast with pure javascript.

Has anyone ever done anything like this?

Preferably without using Jquery or another framework. An example I saw was in http://www4.serpro.gov.br/servicos/css/central-de-servicos-do-serpro/accessibility-info

But I could not play only via javascript. Thanks.

Answer 1

"Just Javascript" you mean without messing with CSS? The simplest way seems to be to define the alternate style in CSS and associate it with a class that can be given to the page body.

For example, add this rule to your style sheet:

body.contraste {
    background: #000000;
}

And a button that executes the code:

var
    className = 'contraste',
    el = document.querySelector('body');
if (el.classList) {
    el.classList.add(className);
}
else {
    el.className += ' ' + className;
}

This is the beginning of a way to solve your problem. Javascript code does not depend on any framework or library. Works in current browsers and in IE from 8.

The logic of the solution is that there is a set of rules that style the page in "contrast mode" (whatever it is) and these rules are valid as long as the page body (the element body) has the contrast class...