Конфигурация панели ВДС

По-умолчанию размер шрифта задан 1rem, что соответствует размеру шрифта в настройках браузера. Тем самым эти настройки не нарушаются новым значением.
Значения шрифта 150% и 200% панели ВДС равны соответственно 1.5rem и 2rem базового размера шрифта.
Межстрочный интервал всегда больше размера шрифта в 1.25 раза.
Размеры элементов сайта (заголовков, списков и т.п.) данная конфигурация не затрагивает. Мы рекомендуем при разработке указывать размеры шрифта в rem единицах, чтобы они корректно масштабировались в зависимости от настроек панели ВДС.

В конфигурации предусмотрено пять цветовых схем: белая, черная, синяя, песочная, коричневая.
В каждой цветовой схеме предусмотрено два цвета для текста и два цвета для фона. Условно можно назвать их "более" и "менее" глубокими цветами.
Текст по-умолчанию задан менее глубоким цветом. Ссылки в тексте заданы более глубоким цветом, чтобы выделяться.
Фон по умолчанию представлен менее глубоким цветом. Можно использовать более глубокий для визуального выделения блока, добавив к тегу атрибут data-wcag="alternative-background".
Цвет границ всех элементов задан менее контрастным цветом.
По-умолчанию, при отсутствующей панели ВДС на странице и ее JS обработчика, используется белая цветовая схема.
Для белой схемы цвет подчеркивания ссылок выбран голубым. Это сделано чтобы подчекнуть ссылки.

При выключении изображений они лишь скрываются, но продолжают занимать место на странице, гарантируя корректное отображение верстки.
При выключенных изображениях скрываются не только теги , но и SVG изображения, фоновые изображения для всех блоков и их :before, :after элементов.

Для увеличенного интервала используется межбуквенное расстояние равное 0.1 размера шрифта.

При навигации с клавиатуры или иной фокусировки на элементах, они подсвечиваются желтым цветом и имеют двухпиксельную внешнюю границу, цветом как у ссылок.
Hover на интерактивных элементах дополняется двухпиксельной внешней границей, цветом как у ссылок.

Файл стилей – wcag-config.css

Минифицированный файл стилей – wcag-config.min.css

Файл стилей оформленный в препроцессоре SASS – wcag-config.scss

Файл стилей оформленный в препроцессоре SASS – mixins.scss

Файл стилей оформленный в препроцессоре SASS – variables.scss