Ya solucione mi problema gracias a Daniel Ulczyk mientras estuve solucionando el problema me conseguí con este código es mas fácil de entender pero la solución esta en la pagina dada por Daniel Ulczyk
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
/* CSS */
body {
color:#E7E4E4;
background-color:#CCCCCC;
}
/* El titulo tiene otro color suave para efectos del ejemplo */
h1 {
color:#E6C3C3;
}
/* DISEÑO ACCESIBLE */
body.accesible {
color: #000000; /* negro. También puedo poner black */
background-color:#FFFFFF; /* blanco */
/* font-size: 1.5em; */ /* aumenta tamaño de fuente */
}
/* si el H1 está en un body con clase accesible, también cambia */
.accesible h1 {
color: #FD0404; /* rojo */
}
</style>
<script type="text/javascript">
function accesibiliza(){
var body = document.getElementsByTagName("body")[0];
var class_name = "accesible";
var ya_tiene = new RegExp('\\b'+class_name+'\\b').test(body.className);
if(ya_tiene){//ya la tiene. Remueve.
var rep = body.className.match(' '+class_name)?' '+class_name:class_name;
body.className = body.className.replace(rep,'');
}
else {//no tiene, agrega clase.
body.className += " "+class_name;
}
}
</script></head><body class="accesible">
<h1>Miren mi estupendo diseño</h1>
<p>
Si puedes leer esto tienes buena vista.
</p>
<button type="button" onclick="accesibiliza()" id="bot-accesible">Accesibilidad</button>
</body></html> Se que no debo de colocar programación que no sea css en este foro pero creo que la solución se da con javascript espero que a otros que tienen el mismo problema que yo esto les ayude un poco