Сделайте ваш сайт более читабельным

Sofia Emelianova

Ключевой момент: Низкоконтрастный текст — основная проблема доступности в Интернете. В феврале 2022 года эта проблема возникла на 83,9% из миллиона самых популярных домашних страниц. Чтобы узнать больше, ознакомьтесь с отчетом WebAIM Million 2022 .

Низкоконтрастные тексты делают ваш сайт менее читабельным для всех пользователей, особенно для пользователей с нарушениями зрения. DevTools может автоматически обнаруживать проблемы с низкой контрастностью и предлагать лучшие цвета, чтобы помочь вам их исправить.

Используйте DevTools, чтобы:

• Обнаружьте проблемы с контрастом . Используйте панель «Обзор CSS» , вкладку «Проблемы » (предварительный просмотр) или отчет Lighthouse , чтобы получить список всех проблем.
• Исправьте проблемы с контрастностью . Просмотрите проблемы с помощью всплывающей подсказки в режиме инспектора и выберите цвета, которые предлагает палитра цветов , чтобы исправить коэффициент контрастности.
• Имитировать недостатки зрения . Посмотрите на свой сайт так, как его видят ваши пользователи.

Откройте для себя низкоконтрастный текст

Чтобы обнаружить низкоконтрастный текст:

1. Откройте DevTools на своей странице. В этом уроке вы можете использовать эту демонстрационную страницу .

2. Получите список всех проблем с контрастностью, используя одну из трех панелей:

   • Обзор CSS
   • (Предварительный просмотр) Проблемы
   • Маяк

Проблемы с контрастностью на панели «Обзор CSS»

Чтобы получить обзор:

1. Откройте обзор CSS .
2. Сделайте обзор .
3. Откройте раздел «Цвета» , прокрутите до пункта «Проблемы с контрастностью» и выберите проблему, если таковая имеется.

4. В таблице «Проблемы контрастности» наведите указатель мыши на элемент и щелкните ссылку рядом с ним.

   

5. Устраните проблему, как описано в разделе «Исправление низкой контрастности текста ».

(Предварительная версия) Проблемы с контрастностью на вкладке «Проблемы»

Примечание. Эта функция предварительного просмотра отключена по умолчанию.

Чтобы получить список проблем:

1. Включите отчеты о проблемах с контрастностью на вкладке «Проблемы» :
   1. Откройте «Настройки» > «Экспериментальный» .
   2. В строке фильтров найдите contrast issue .
   3. Установите флажок Включить автоматическое оповещение о проблемах с контрастностью через панель «Проблемы» .
   4. Нажмите «Обновить DevTools» в командной строке вверху.
2. Откройте вкладку «Проблемы» .

3. Разверните проблемы контрастности, обнаруженные DevTools, затем разверните таблицу элементов и щелкните ссылку рядом с элементом.

   

4. Устраните проблему, как описано в разделе «Исправление низкой контрастности текста ».

Проблемы с контрастностью в отчете Lighthouse

Чтобы запустить отчет:

1. В DevTools откройте Дополнительные вкладки > Маяк .
2. Создайте отчет Lighthouse со следующими настройками:
   • Режим : Навигация (по умолчанию)
   • Категории : Доступность
   • Устройство : настольный компьютер
3. Нажмите «Анализ загрузки страницы» и подождите, пока Lighthouse сгенерирует отчет.
4. Прокрутите вниз до раздела «Контраст» и в списке элементов щелкните ссылку на затронутый элемент.
5. Устраните проблему, как описано в разделе «Исправление низкой контрастности текста ».

Исправить низкоконтрастный текст

Чтобы устранить проблему низкой контрастности:

1. Найдите проблему с контрастностью и щелкните ссылку на затронутый элемент на панели «Обзор CSS» , вкладке «Проблемы » или в отчете Lighthouse . DevTools перенесет вас на панель «Элементы» и выберет соответствующий элемент. Например, на этой демонстрационной странице первым затронутым элементом является h1.line1 .

2. Нажмите Осмотрите правый верхний угол DevTools и наведите указатель мыши на элемент в области просмотра. DevTools показывает всплывающую подсказку для этого элемента.

   

   Обратите внимание на предупреждающий знак рядом со значением коэффициента контрастности во всплывающей подсказке. Коэффициент контрастности измеряет разницу в яркости между цветами переднего плана (цвета текста) и фона.

3. Откройте палитру цветов рядом с объявлением цвета текста элемента и в палитре цветов разверните раздел «Коэффициент контрастности» .

   

   Палитра цветов сообщит вам, что коэффициент контрастности не соответствует уровням AA или AAA, указанным в рекомендациях WebAIM .

4. Нажмите кнопку Используйте кнопку предложенного цвета рядом с уровнем AAA. Палитра цветов применяет цвет текста, соответствующий рекомендациям по коэффициенту контрастности.

   

5. Альтернативно, чтобы выбрать цвет вручную, вы можете перетащить кружок в предварительном просмотре оттенков. Чтобы оставаться в пределах уровня AA или AAA, выберите цвет ниже верхней или нижней линии соответственно.

   

6. Аналогичным образом исправьте все проблемы с контрастностью, которые вы обнаружили на панели «Обзор CSS» , вкладке «Проблемы » или отчете Lighthouse .

Сохраните изменения

Чтобы сохранить изменения, внесенные в DevTools:

• Скопируйте все изменения CSS сразу и вставьте их в свой код.
• Рассмотрите возможность настройки рабочей области , которая позволит DevTools сохранять файлы непосредственно в ваши источники.

Что дальше?

Узнать больше:

• Изучите доступность в целом
• В частности, доступность цвета и контрастности