Версия сайта для слабовидящих

Создадим блок с настройками в котором будут изменятся параметры сайта, такие как цветовая схема и размер шрифта.

Для полноценной работы данного решения потребуется подключение jquery.cookie.js.

Блок настроек

Данный блок я спроектировал как выдвигающаяся панель с иконкой слева на экране.

Верстка панели:

<div class="visual-select">
	<div class="visual-select-btn" title="Версия сайта для слабовидящих"><i class="far fa-eye"></i></div>
	<div class="visual-select-block"><div>
		<div class="pic-monochrome-btn">
			<label for="pic-monochrome">Сделать изображения монохромными</label>
			<input id="pic-monochrome" type="checkbox" name="pic-monochrome">
		</div>
		
		<div>
			<p>Цветовая схема сайта</p>
			<select id="color-scheme" name="color-scheme">
				<option value="">Стандартный</option>
				<option value="black-white">Чёрным по белому</option>
				<option value="white-black">Белым по чёрному</option>
				<option value="barkblue-skyblue">Тёмно-синим по голубому</option>
				<option value="green-darkbrown">Зелёным по тёмно-коричневому</option>				
			</select>
		</div>
		
		<div>
			<p>Размер шрифта</p>
			<div class="site-text-size-block">
				<div class="minus-btn"><i class="far fa-minus"></i></div>
				<input type="number" name="site-text-size" id="site-text-size" step="2"	min="12" max="24" value="16">
				<div class="plus-btn"><i class="fal fa-plus"></i></div>	
			</div>	
		</div>
		
	</div></div>
</div>

Стили панели

.visual-select {
    position: fixed;
	z-index: 9999;
    top: 50%;
    height: 300px;
    margin-top: -150px;
    left: -280px;
    width: 280px;
	transition: all 0.3s ease;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s ease 0s;
}
	
.visual-select.visual-select-open {left: 0;}	
	
.visual-select-btn {
    background: #8bc34a;
    border: 1px solid #8bc34a;
	border-left: 0;
    color: #fff;
    border-radius: 0 5px 5px 0;
    position: absolute;
    right: -50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}
	
.visual-select i {margin: 0;}	
	
.visual-select-block {
    background: #4daf50;
	border: 1px solid #8bc34a;
	color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
	padding: 30px 30px 0;
}
	
.visual-select-block > div > * {
    display: flex;
    justify-content: space-between;
	margin-bottom: 30px;
	align-items: center;
}	
	
.visual-select-block > div > * > * {width: 50%;}	

Скрипт открывания панели

jQuery(document).ready(function($){
	
	$('.visual-select-btn').on('click', function(){
		$('.visual-select').toggleClass('visual-select-open');
	});
});

Настройки изменения сайта

Скрипты (добавляем после скрипта раскрытия панели в document.ready):

	// Монохром изображений
	
	$('#pic-monochrome').change(function(){ //функция работает при изменении checkbox

		if ($('#pic-monochrome').is(':checked')) { 
			$('body').addClass('pic-monochrome');
			$.cookie('pic-monochrome', 'true', { path: '/', expires: 7 });
		} else {
			$('body').removeClass('pic-monochrome');
			$.removeCookie('pic-monochrome', { path: '/' });
		}

	});
	
	
	// Цветовая схема
	
	$('#color-scheme').change(function(){ //функция работает при изменении select

		var colorVar = $("#color-scheme option:selected").val();

		if($("#color-scheme").val()=="") { 
			$('body').removeClass('black-white white-black barkblue-skyblue green-darkbrown');
			$.removeCookie('color-scheme', { path: '/' });
		} else {
			$('body').removeClass('black-white white-black barkblue-skyblue green-darkbrown');
			$('body').addClass(colorVar);
			$.cookie('color-scheme', colorVar, { path: '/', expires: 7 });	
		}

	});
	
	
	// Изменение размера шрифта
	
	$('.site-text-size-block').on('click', '.minus-btn', function() {
		$input = $(this).nextAll('input[name=site-text-size]');
		var val = parseFloat($input.val());
		var step = parseFloat($input.attr('step'));
		var min = parseFloat($input.attr('min'));
		if (val > min) { $input.val( val-step ).change(); } 
	});

	$('.site-text-size-block').on('click', '.plus-btn', function() {
		$input = $(this).prev('input[name=site-text-size]');
		var val = parseFloat($input.val());
		var step = parseFloat($input.attr('step'));
		var max = parseFloat($input.attr('max'));
		if (val < max) { $input.val( val+step ).change(); }
	});	
	
	$('#site-text-size').change(function(){ //функция работает при изменении input

		var sizeVar = $("#site-text-size").val();

		if(sizeVar=="16") {
			$('html').css('font-size','16px');
			$('body').css('font-size','16px');
			$.removeCookie('text-size', { path: '/' });
		} else {
			$('html').css('font-size', sizeVar + 'px');
			$('body').css('font-size', sizeVar + 'px');
			$.cookie('text-size', sizeVar, { path: '/', expires: 7 });	
		}

	});

Стили

/* Монохром изображений */

body.pic-monochrome img, body.pic-monochrome i, body.pic-monochrome :before, body.pic-monochrome :after {filter: grayscale(1);}


/* Цветовая схема */

body.black-white {background: #fff; color: #000;}
body.black-white div, body.black-white a {background: #fff !important; color: #000 !important;}


body.white-black {background: #000; color: #fff;}
body.white-black div, body.white-black a {background: #000 !important; color: #fff !important; border-color: #222 !important;}
body.white-black .visual-select-btn {background: #8bc34a !important;}


body.barkblue-skyblue {background: #9dd1ff; color: #143565;}
body.barkblue-skyblue div, body.barkblue-skyblue a {background: #9dd1ff !important; color: #143565 !important; border-color: #80b4e2 !important;}
body.barkblue-skyblue .visual-select-btn {background: #fff !important;}

body.green-darkbrown {background: #3b2716; color: #a1e650;}
body.green-darkbrown div, body.green-darkbrown a {background: #3b2716 !important; color: #a1e650 !important; border-color: #2d1d0f !important;}
body.green-darkbrown .visual-select-btn {background: #fff !important; color: #659c24 !important; }


/* Изменение размера шрифта */
	
.site-text-size-block {display: flex; width: 50%;}
	
.site-text-size-block div {
    background: #8bc34a;
    display: flex;
    align-items: center;
    width: 40px;
    justify-content: center;
    cursor: pointer;
}
	
.site-text-size-block input {width: 50%; text-align: center; padding: 3px;}

Извлечение настроек из Cookies

Добавляем после скриптов по изменению стилей (внутри document.ready)

	// Блок включения с Cookie
	
	var picmonochrome = $.cookie('pic-monochrome');
	var colorscheme = $.cookie('color-scheme');
	var fontsize = $.cookie('text-size');
	
	if(picmonochrome == null){
	} else {
		$('body').addClass('pic-monochrome');
		$('#pic-monochrome').attr( 'checked', 'checked' );
	}
	
	if(colorscheme == null){
	} else {
		$('body').addClass(colorscheme);
		$('#color-scheme option[value="' + colorscheme + '"]').attr( 'selected', 'selected' );
	}
	
	if(fontsize == null){
	} else {
		$('html').css('font-size', fontsize + 'px');
		$('body').css('font-size', fontsize + 'px');
		$('#site-text-size').val( fontsize );
	}

[site-socialshare]