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