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

Sofia Emelianova

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

Используйте DevTools для:

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

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

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

1. Откройте инструменты разработчика на своей странице.

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

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

Вы можете поэкспериментировать, открыв наш CodePen .

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

Для общего ознакомления:

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

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

   

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

(Предварительный просмотр) Сравнительные вопросы на вкладке «Вопросы»

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

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

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

   

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

Контрастные вопросы в отчете компании Lighthouse

Чтобы сформировать отчет:

1. В инструментах разработчика откройте Другие вкладки > Маяк .

2. Создайте отчет Lighthouse со следующими настройками:

   • Режим : Навигация (по умолчанию)
   • Категории : Доступность
   • Устройство : Настольный компьютер

   

3. Нажмите «Анализ загрузки страницы» и дождитесь, пока Lighthouse сгенерирует отчет.

4. Перейдите в раздел «Контраст» . В списке элементов щелкните ссылку на соответствующий элемент.

   

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

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

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

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

   

   Например, в нашем недоступном демонстрационном примере на CodePen первым затронутым элементом является h1.line1 .

2. Нажмите В правом верхнем углу инструментов разработчика наведите курсор на элемент в области просмотра. Инструменты разработчика отобразят всплывающую подсказку для этого элемента.

   

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

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

   

   Инструмент выбора цвета покажет, что коэффициент контрастности не соответствует уровням AA или AAA согласно рекомендациям WebAIM .

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

   

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

   

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

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

Чтобы сохранить изменения, внесенные в Инструменты разработчика:

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

Что дальше?

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

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