Специальные возможности: подготовка текста и графики
9 мин.
Посетителям с нарушениями зрения может быть трудно отличить передний план от фона страниц сайта. Поэтому мы рекомендуем проверять и при необходимости настраивать цветовой контраст на сайте.
Рекомендации
Чтобы сделать сайт более доступным для посетителей с различными особенностями зрения, мы рекомендуем следующее:
- Изменение контрастности цвета текста и фона до соотношения 4,5:1 для обычного текста и 3:1 для крупного текста.
- Коэффициент контрастности не менее 3:1 для графики и компонентов пользовательского интерфейса (таких как границы полей ввода формы, подсказки и т. д.).
- Уровень AAA требует более высокого коэффициента контрастности: не менее 7:1 для обычного текста и 4,5:1 для крупного текста.
Полезно знать:
Крупным считается текст размером более 14 баллов (примерно 18 пикс.) с полужирным начертанием или текст размером 18 баллов (примерно 24 пикс.).
Поиск цветовых кодов
Вы можете найти коды цветов в любом конструкторе сайтов, который вы используете (редактор Wix, Редактор Studio или редактор Harmony).
Редактор Wix
Редактор Studio
Редактор Wix Harmony
- Выберите соответствующий элемент (текст, фон полоски, бокс-контейнер и т. д.) и перейдите в палитру цветов.
- Наведите курсор на любой из цветов, чтобы увидеть его код.
Проверка цветового контраста:
Существует множество сайтов и плагинов для браузеров, таких как Contrast Checker, которые проверяют цветовой контраст путем сравнения кодов цветов переднего плана и фона. Для проверки цветового контраста текста на фоновом изображении мы рекомендуем использовать Colour Contrast Analyser, который позволяет выбрать цвет фона и провести тест.
Настройка цветовой контрастности
Вы можете использовать Помощник по специальным возможностям в редакторе, чтобы найти и настроить любой низкий контраст цветов на сайте — независимо от того, какой конструктор вы используете. Помощник сканирует сайт на наличие потенциальных проблем со специальными возможностями и предлагает способы их улучшения.
Для большинства элементов изменения можно внести непосредственно в Помощнике. Однако некоторые элементы (например, элементы приложений) в настоящее время не полностью интегрированы с Помощником, поэтому их необходимо проверять или настраивать вручную.
Редактор Wix
Редактор Studio
Редактор Wix Harmony
- Перейдите в редактор.
- Нажмите Настройки в верхней части редактора.
- Выберите Помощник по специальным возможностям.
- Выберите Сканировать сайт.
- Перейдите на вкладку Найденные проблемы.
- Выберите страницу из списка.
- Нажмите Улучшить контрастность цветов.
- Выберите нужный элемент и настройте его:
Настройка контрастности в Помощнике
Настройка контрастности вручную
рядом с нужным цветом.
Проверка цветовой контрастности вручную
На сайте может быть цветовой контраст, который Помощник по специальным возможностям не распознает. Мы рекомендуем вручную проверять контент сайта с помощью Wix Contrast Checker и корректировать контраст по мере необходимости.
Вы можете установить и использовать проверку контрастности в конструкторе сайтов (редактор Wix или Редактор Studio). Если элементы не соответствуют требованиям, вы также можете протестировать новые соотношения с помощью палитры.
Редактор Wix
Редактор Studio
Чтобы проверить контрастность:
- (Только в первый раз) Установите дополнение в редактор.
- Нажмите Инструменты
в правом верхнем углу редактора. - Нажмите Дополнения редактора.
- Нажмите Contrast Checker.
- Используйте цветовые боксы, чтобы выбрать цвет элемента и фона в инструменте проверки, или вставьте соответствующие коды цветов.
Чтобы настроить контрастность:
- Настройте цвета переднего плана и фона в инструменте Contrast Checker в соответствии с рекомендуемым коэффициентом.
- Скопируйте коды цветов в правом нижнем углу палитры.
- Выберите соответствующий элемент в редакторе.
- Откройте палитру цветов в настройках дизайна элемента.
- Нажмите Добавить рядом с разделом Мои цвета.
- Вставьте скопированный код в поле.
Совет:
Способ открытия настроек дизайна зависит от элемента, но обычно их можно найти, выбрав элемент и нажав на иконку Дизайн 
.
.Отображаете графики или данные на сайте?
Высококонтрастные цвета — отличный способ отображения данных на сайте. Однако мы также рекомендуем использовать другие индикаторы (например, текстуры и узоры) для разграничения информации.
Следующий шаг:
Вернитесь к Контрольному списку специальных возможностей, чтобы продолжить работу над доступностью сайта.