Проверьте наличие проблем с контрастностью с темной темой и светлой темой

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

Большинство операционных систем поставляются с темным режимом и светлым режимом. Веб-страница может реагировать на этот параметр операционной системы с помощью запроса мультимедиа CSS. Вы можете протестировать эти темы и протестировать запрос к мультимедиа CSS, не изменяя параметры операционной системы, с помощью раздела Эмуляция css media prefers-color-scheme в средствеотрисовки .

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

Чтобы эмулировать выбор выбранной пользователем цветовой темы, выполните следующие действия:

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

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

3. Нажмите клавишу ESC , чтобы открыть панель Быстрого просмотра в нижней части devTools.

4. На панели быстрого просмотра нажмите кнопку Другие инструменты () и выберите Отрисовка. Средство отрисовки откроется на панели Быстрого просмотра .

5. Прокрутите вниз до раскрывающегося списка Эмуляция css media features-color-scheme и выберите prefers-color-scheme: light. Веб-страница повторно отрисовывается с помощью light-theme.css:

   

6. На панели Быстрого просмотра выберите средство Проблемы , а затем разверните раздел Специальные возможности . В зависимости от различных факторов могут появиться Insufficient color contrast предупреждения. В разделе ЗАТРОНУТЫЕ РЕСУРСЫ проблемы есть 6 элементов с недостаточной контрастностью цветов:

   

   На демонстрационной веб-странице раздел состояние пожертвования страницы не читается в легком режиме и должен измениться:

   

7. В средствах разработки откройте инструмент Элементы , а затем нажмите клавиши CTRL+F в Windows/Linux или COMMAND+F в macOS. Появится текстовое поле Найти для поиска в дереве DOM HTML:

   

8. Введите схему. Найдены следующие запросы мультимедиа CSS, и теперь можно обновить соответствующие CSS-файлы:

   <link rel="stylesheet" href="css/light-theme.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
   <link rel="stylesheet" href="css/dark-theme.css" media="(prefers-color-scheme: dark)">
   

См. также

• Эмулировать темные или светлые схемы на отображаемой странице