Поделиться через

Проверка контрастности текста и цвета в состоянии по умолчанию с помощью средства "Проверка"

  • Статья

Проверьте контрастность цветов текста в состоянии по умолчанию с помощью средства "Проверка ". Наложение сведений средства проверки на веб-странице содержит раздел Специальные возможности , включающий сведения о контрастности .

Для элементов с текстом наложение сведений средства проверки показывает следующее:

  • Коэффициент контрастности текста и цвета фона.
  • Зеленый значок проверка метки для элементов с достаточной контрастностью.
  • Желтый значок оповещения для элементов, не имеющих достаточной контрастности.

В некоторых случаях на контрастность влияет установка в браузере светлой темы или темной темы.

Например, на демонстрационной веб-странице тестирования специальных возможностей синие ссылки меню навигации на боковой панели имеют достаточную контрастность, но зеленая ссылка Собаки в разделе Состояние пожертвования не имеет достаточной контрастности. Проверьте эти элементы с помощью средства "Проверка ", как показано ниже.

  1. Откройте демонстрационную веб-страницу тестирования специальных возможностей в новом окне или вкладке.

  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей.

  3. Нажмите кнопку Проверить (проверить) в левом верхнем углу средства разработки, чтобы значок был выделен (синий).

  4. На отображаемой веб-странице наведите указатель мыши на синюю ссылку Cats меню навигации на боковой панели. Появится наложение сведений средства проверки . В разделе Специальные возможности наложения информации в строке Контрастность появится зеленая галочка, указывающая, что этот элемент имеет достаточную контрастность цвета текста и цвета фона:

    Элементы меню имеют достаточную контрастность, как показано в средстве

  5. На отображаемой веб-странице в разделе Состояние пожертвования наведите указатель мыши на ссылку Собаки . Наложение информации средства "Проверка " показывает оранжевый восклицательный знак в строке Контрастность , указывая, что этот элемент не имеет достаточной контрастности текста и цвета фона:

    Элемент, который не имеет достаточной контрастности, как показано в предупреждении в средстве проверки

Различные параметры для проверки контрастности текста и цвета в средствах разработки

Используйте следующие функции DevTools для проверки контрастности текста и цвета:

  • Используйте средство "Проверка" (в качестве наложения информации на веб-странице), чтобы проверка, имеет ли отдельный элемент страницы достаточный контраст между текстом и цветом. Наложение информации средства проверки включает раздел Специальные возможности , содержащий строку сведений о контрастности . Средство "Проверка " отображает только сведения о контрастности текста для текущего состояния. Этот подход описан в текущей статье.

  • Средство "Проблемы" автоматически сообщает о любых проблемах цветовой контрастности для всей веб-страницы, когда текст и цвет фона недостаточно контрастирует. Этот подход описан в разделе Проверка достаточной контрастности цветов текста.

  • Эмулировать состояние, отличное от состояния по умолчанию, например hover состояния. Для этого нажмите кнопку Переключить состояние элемента (:hov) в области Стили , в которой отображается раздел Флажки Принудительное состояние элемента . Эта функция описана в разделе Проверка доступности всех состояний элементов.

См. также