Советы DevTools: обнаружение и исправление низкоконтрастного текста

София Емельянова
Sofia Emelianova

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

Chrome DevTools позволяет сразу обнаружить все проблемы с контрастностью и исправить их одним нажатием кнопки.

Посмотрите видео, чтобы узнать, как:

  • Просмотрите коэффициенты контрастности во всплывающей подсказке режима инспектора и рекомендуемые значения коэффициентов в палитре цветов .

    Коэффициенты контрастности доступны во всплывающей подсказке с помощью палитры цветов для измерения соотношения альтернативных цветов. Доступна оценка рациона AA и AAA.

  • В палитре цветов выберите предлагаемые цвета или выберите цвет ниже линий коэффициента контрастности, чтобы он соответствовал рекомендациям WebAIM .

    Рекомендуемые линии коэффициента контрастности доступны в предварительном просмотре оттенков в палитре цветов.

  • Узнайте обо всех проблемах с контрастностью на панелях «Обзор CSS» и «Проблемы » (предварительная версия).

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

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

    Размытое изображение выбрано на вкладке «Рендеринг» и эмулировано в окне просмотра.

Более подробную информацию о практическом обучении можно найти в руководстве «Сделайте свой веб-сайт более читабельным» .

Чтобы узнать больше, см.: