CSS-медиафичи для улучшения доступности

  • CSS
  • Юзабилити

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

Медиафича (media feature) — это условие для CSS-директивы @media. Указывает на определённую характеристику устройства или браузера. К примеру, ориентацию экрана (orientation) или режим отображения (display-mode).

В этом посте расскажу про несколько медиафич: prefers-reduced-motion, prefers-color-scheme, inverted-colors, forced-colors, ms-high-contrast, prefers-contrast и prefers-reduced-transparency. Они отслеживают настройки операционной системы. Настройки изменяют пользователи, которых не устраивает дефолтное поведение системы. К примеру, люди с особыми потребностями и те, кто испытывает дискомфорт из-за дефолтного дизайна.

Так, пользователи с эпилептическими приступами отключают анимацию из-за того, что она может вызвать приступ. А некоторые люди с астигматизмом выбирают тёмную тему и уменьшают контрастность, чтобы не болели глаза.

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

Большинство настроек применяется только к операционной системе. Многие из них, те же анимация и уровень контрастности, не изменяют интерфейсы сайтов. Всё зависит от того, учли ли их разработчики. Как раз здесь помогают медиафичи.

Отслеживать пользовательские настройки можно и с помощью JavaScript, но не хочу раздувать пост ещё больше. Остановлюсь только на возможностях CSS.

Пользовательские настройки

Давайте сначала разберёмся, какие системные настройки можно учитывать в веб-интерфейсах уже сейчас или в будущем.

Анимация

Настройки анимации позволяют изменять её скорость или полностью отключить в системе. Не влияют на сайты, если нет специальных стилей.

Кто пользуется настройкой:

  • Пользователи с вестибулярными нарушениями и эпилептическими приступами.
  • Люди с когнитивными особенностями. Особенно пользователи с синдром дефицита внимания.

Эта настройка есть в большинстве операционных систем.

Цветовая схема

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

Тёмную и светлую цветовые схемы не стоит путать с ночным и дневным режимами. Это другая группа настроек — режим экранных фильтров (filtered display mode). Изменяют интенсивность синего света.

Кто пользуется настройкой:

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

Схемы можно выбрать во всех популярных операционных системах. В macOS и iOS есть дополнительная автоматическая тема. Если она выбрана, то днём применяется светлая тема, а ночью — тёмная.

Инвертирование цветов

Режим инвертированных цветов (inverted colors mode) заменяет системные цвета на противоположные, как на негативе. Относится к режиму экранных фильтров.

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

В режиме инверсии жёлтые оттенки стали синими, зелёный — малиновым, белый — чёрным.
Дока с инверсией в Vivaldi на Windows 10.

Кто пользуется настройкой:

  • Люди с особенностями зрения. Например, с глаукомой или глазными болями.
  • Люди с мигренями и головными болями.
  • Другие пользователи из-за привычек или освещения.

Эта настройка есть в большинстве операционных систем. На iOS даже два вида инверсии — «Смарт-инверсия» (Smart Invert) и «Классическая инверсия» (Classic Invert). В режиме умной инверсии картинки и видео не инвертируются. В классическом инвертируется весь контент.

Цветовой режим

Режим принудительных цветов (forced colors mode) ограничивает количество цветов, чтобы повысить читаемость текста за счёт изменения контраста текста и фона. В основном используются цвета с высоким контрастом. Этот режим изменяет цвета и в системе, и на сайтах.

Кто пользуется настройкой:

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

Пока цветовой режим можно выбрать только в Windows. В Windows 10 и более ранних версиях это режим высокой контрастности (Windows High Contrast Mode, коротко WHCM). В Windows 11 — контрастные темы (Contrast Themes).

В режиме высокой контрастности есть несколько готовых наборов цветов:

  • чёрный режим высокой контрастности (High Contrast Black);
  • белый режим высокой контрастности (High Contrast White);
  • высокая контрастность 1 и 2.

Технология замены цветовой палитры зависит от браузера. Она отличается в браузерах на Chromium, Firefox (Quantum), Internet Explorer (Trident) и в старых версиях Edge (EdgeHTML).

Раздел с подкастами с главной страницы «Веб-стандарты» с системными цветами. Белый фон стал чёрным, ссылки и границы ярко-жёлтые, а обычный текст белый вместо тёмно-серого.
«Веб-стандарты» с чёрным режимом высокой контрастности в Vivaldi на Windows 10.
Раздел с подкастами с главной страницы «Веб-стандарты» с системными цветами. Белый фон остался того же цвета, ссылки и границы теперь ярко-синие, а обычный текст чёрный вместо тёмно-серого.
Так своеобразно интерпретирует по умолчанию чёрный режим высокой контрастности Firefox на Windows 10. Поведение по умолчанию можно изменить. Нужно выбрать в настройках языка и внешнего вида (Language and Appearence) опцию «Использовать системные цвета» (Use system colors).

В Windows 11 набор контрастных тем изменился:

  • Водная (Aquatic).
  • Пустыня (Desert).
  • Сумерки (Dusk).
  • Ночное небо (Night sky).
Раздел с подкастами с главной страницы «Веб-стандарты» с системными цветами. Белый фон стал чёрным, ссылки и границы фиолетовые, а обычный текст белый вместо тёмно-серого.
«Веб-стандарты» в режиме ночного неба в Vivaldi на Windows 11.

Если не подходят готовые темы, то можно настроить их самостоятельно. В том числе уменьшить контрастность.

Контрастность

Пользователи могут отдельно повысить или понизить уровень контрастности в системе без изменения яркости экрана.

Кто пользуется настройкой:

  • Люди с особенностями зрения. Например, с глаукомой.
  • Люди с мигренями и головными болями.
  • Пользователи со старыми или некачественными дисплеями.
  • Другие пользователи, которым не хватает уровня контрастности из-за освещения.

В macOS и iOS есть режим повышенной контрастности (Increased Contrast Mode). Он увеличивает разницу между оттенками серого и делает границы элементов чётче.

Настройки влияют на внешний вид системы и веб-интерфейсов. В отличие от системных окон, на сайтах изменяется только уровень контрастности. Границы элементов, конечно, чётче сами по себе не становятся.

Сравнение окон в обычном режиме и в режиме повышенной контрастности в macOS. В обоих окнах открыта картинка с кричащим котом, которая называется «cute-cat.jpeg». Видны элементы управления для закрытия, разворачивания, увеличения и уменьшения, а ещё дополнительные настройки.
В режиме повышенной контрастности, как ни странно, всё стало более контрастным. Вокруг окна и элементов управления появились чёрные рамки.

Прозрачность

Пользователи могут включить или выключить прозрачность фона (transparency). Непрозрачный фон часто выбирают те, кто повышает контрастность.

Прозрачный фон может увеличить когнитивную нагрузку и уменьшить читаемость текста. Поэтому этой настройкой пользуются:

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

Прозрачность настраивается в Windows и macOS.

Эти настройки влияют только на прозрачность в интерфейсе системе.

Сравнение окон с включённой настройкой прозрачности и без неё в Windows. Оба с системными настройками экрана. В окне слева расположена панель навигации, справа — настройки.
Так работает настройка прозрачности в Windows 10. Фон навигации первого окна полупрозрачный, второй непрозрачный и однотонный.

Пара слов про медиатипы

У директивы @media есть несколько медиатипов. Они описывают устройство, на котором отображается документ.

  • all. Все устройства. Задаётся автоматически, если не указать другой тип.
  • screen. Устройства с экранами. Например, телефоны и ноутбуки.
  • print. Устройства с предварительным предпросмотром и функциями печати. Те же принтеры.
  • speech. Устройства с синтезом речи. К примеру, скринридеры и голосовые помощники.

Медиатип speech может быть интересен с точки зрения доступности. Пока что он не поддерживается браузерами. Раньше поддерживался браузером Opera на движке Presto, но перестал после перехода на Blink.

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

Медиафичи

А вот теперь переходим к медиафичам, которые помогут сделать веб-интерфейсы доступнее.

У части из них пока не очень впечатляющая поддержка. Что-то может измениться в будущем с развитием CSS. В любом случае про них полезно знать. Может даже захочется поэкспериментировать с этими медиафичами в небольшом пет-проекте уже сейчас.

prefers-reduced-motion

Отслеживает, выбраны ли настройки анимации для уменьшения её интенсивности.

Есть два значения:

  • no-preference, настройки анимации по умолчанию.
  • reduce, изменённые настройки анимации.

У prefers-reduced-motion хорошая поддержка браузерам — 91.75 %.

Она может пригодиться для любой анимации на сайте. Можно её замедлить или полностью отключить.

Если задать элементам с анимацией animation: none, то это полностью её остановит.

@media (prefers-reduced-motion: reduce) {
  .danger-animation {
    animation: none;
  }
}

Другой пример. На сайте используется scroll-behavior для плавной прокрутки к блокам. Если на странице много контента, то от такой анимации может укачать. В этом случае можно анимировать прокрутку, когда в системе анимация не настроена.

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

Параллакс часто вызывает у пользователей чувство тошноты и головокружение. Чтобы никому не было плохо от картинки с position: sticky, можно заменить значение на relative.

.parallax-scrolling-image {
  position: sticky;
}

@media (prefers-reduced-motion: reduce) {
  .parallax-scrolling-image {
    position: relative;
  }
}

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

Про эту мадиафичу и требования к анимации подробнее писала в посте про доступность для людей с вестибулярными нарушениями и эпилептическими приступами.

Тестирование prefers-reduced-motion

Быстро протестировать можно в инспекторе браузеров на Chromium. Зайдите в «Другие инструменты» (More tools), выберите вкладку «Отрисовка» (Rendering) и включите «Эмулировать медиафункцию CSS prefers-reduce-motion» (Emulate CSS media feature prefers-reduce-motion).

Изменить настройки анимации можно также вручную.

  • Windows 10: Настройки (Settings)Специальные возможности (Ease of Access)Экран (Display)Показывать анимацию в Windows (Show animations in Windows).
  • Windows 11: Настройки (Settings)Специальные возможности (Accessibility)Визуальные эффекты (Visual effects)Эффекты анимации (Animation effects).
  • macOS: Системные настройки (System Preferences)Универсальный доступ (Accessibility)Монитор (Display)Уменьшить движение (Reduce Motion).
  • iOS: Настройки (Settings)Универсальный доступ (Accessibility)Движение (Motion)Уменьшение движения (Reduce Motion).
  • Android: Настройки (Settings)Специальные возможности (Accessibility)Экран (Display)Удалить анимации (Remove animations).

prefers-color-scheme

Определяет выбранную цветовую схему.

Тёмная схема не обязательно берётся из системы. Если в системе выбрана по умолчанию светлая схема, а в приложении тёмная, то веб-интерфейс применит тему приложения. Так что настройки приложения могут быть приоритетнее, чем системные.

Доступные значения:

  • light, для светлой схемы.
  • dark, для тёмной схемы.

У prefers-color-scheme высокая глобальная поддержка — 91.68 %.

Разработчики могут управлять всеми стилями при работе с тёмными темами сайта. Особенно важно обратить внимание на цвета:

  • фонов,
  • текстов,
  • интерактивных элементов в разных состояниях,
  • иконок и изображений,
  • других декоративных элементов.

Например, картинки в тёмной теме можно сделать не такими контрастными с помощью filter, а ещё поменять значения background-color и color.

.body {
  color: black;
  background-color: white;
}

@media (prefers-color-scheme: dark) {
  .body {
    color: white;
    background-color: black;
  }

  .image {
    filter: brightness(.8) contrast(1.2);
  }
}

В примере использую чистый чёрный и белый для читаемости кода. В реальном мире настолько контрастных цветов лучше избегать. Белый текст на чёрном фоне обычно труднее читать большинству пользователей.

Тестирование prefers-color-scheme

Быстро протестировать можно в инспекторе браузеров на Chromium. Найдите в «Другие инструменты» (More tools) вкладку «Отрисовка» (Rendering) и выберите тёмную тему в опции «Эмулировать медиафункцию CSS prefers-color-scheme» (Emulate CSS media feature prefers-color-scheme).

В Firefox темы находятся в первой вкладке с инспектором. Переключатели расположены над стилями. Переключатель с иконкой луны включает имитацию тёмной схемы, с солнцем — имитацию светлой.

Вкладка «Инспектор» в Firefox. Видна панель со стилями. Сверху расположены поиск стилей, :hov, .cls, кнопка для добавления нового селектора, переключатель светлой и тёмной схем и стилей для печати.

В Safari эмуляция тёмной схемы включается в веб-инспекторе во вкладке «Элементы» (Elements). Переключатель называется «Force Dark Appearance» и находится в панели под вкладками.

Вкладка с элементами в веб-инспекторе Safari. Видны переключатель для режима печати, тёмной схемы и другие настройки.

Можно переключить схему и вручную.

  • Windows: Настройки (Settings)Персонализация (Personalization)Цвета (Colors)«Тёмный» в пункте про режим приложения.
  • macOS: Системные настройки (System Preferences)Основные (General)«Тёмное» или «Автоматически» в разделе про оформление (Appearance).
  • iOS: Настройки (Settings)Экран и яркость (Display and Brightness)«Тёмное» (Dark) в пункте про оформление (Appearance).
  • Android: Настройки (Settings)Экран (Display)Тёмная тема (Dark Theme).

inverted-colors

Отслеживает режим инвертированных цветов.

Есть два значения:

  • none, режим не выбран, в системе отображаются цвета по умолчанию.
  • inverted, режим инвертированных цветов выбран.

Глобальная поддержка inverted-colors — 17.56 %. Пока поддерживается только в десктопном и мобильном Safari.

Обычно для этого режима не требуются дополнительные стили, кроме отмены инвертирования видео и картинок. Это можно сделать при помощи filter.

@media (inverted-colors: inverted) {
  img,
  video {
    filter: invert(100%);
  }
}

Тестирование inverted-colors

Протестировать стили для режима инвертирования можно только вручную.

  • macOS: Системные настройки (System Preferences)Универсальный доступ (Accessibility)Монитор (Display)Инвертировать цвета (Invert colors).
  • iOS: Настройки (Settings)Универсальный доступ (Accessibility)Дисплей и размер текста (Display & Text Size)«Смарт-инверсия» (Smart Invert) или «Классическая инверсия» (Classic Invert).

forced-colors

Отслеживает режим принудительных цветов. Например, режим высокой контрастности в Windows 10.

Поддержка forced-colors невысокая — 31.6 %. Медиафича доступна в Firefox с 89 версии, Chrome с 89 и Edge с 79. Рекомендуется использовать в новых версиях Edge вместо устаревшей ms-high-contrast.

Сейчас активно дорабатывается и может измениться.

У медиафичи два значения:

  • none, режим принудительных цветов не выбран. Цветовая палитра не ограничена.
  • active, режим принудительных цветов включён.

Хорошо сочетается с prefers-color-scheme.

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

У следующих свойств статические цвета (заданные разработчиками) заменяются на динамические (системные):

  • color.
  • background-color.
  • border-color.
  • outline-color.
  • column-rule-color.
  • text-decoration-color.
  • text-emphasis-color.
  • webkit-tap-highlight-color.
  • fill.
  • stroke.
  • flood-color.
  • stop-color.
  • lighting-color.

А для этих свойств принудительно задаются другие значения:

  • color-scheme — light dark.
  • background-image без url получает значение none, если это интерактивный элемент. Исключение — кнопки. Так работает в Internet Explorer и легаси Edge.
  • box-shadow — none.
  • text-shadow — none.
  • scrollbar-color — auto.

В случае высококонтрастного режима лучше отключить внутреннего дизайнера. Он нужен людям не ради эстетики, а для повышения читаемости контента. Так что медиафичу стоит использовать с умом и только тогда, когда это действительно нужно. В основном браузер сам справляется с этой задачей.

Главное правило для работы со стилями в этом режиме — вместо статических цветов используйте динамические. Их можно задать при помощи специальных ключевых слов для системных цветов (CSS system color keywords). Например, Window для фона окна, ButtonText для цвета текста кнопок и WindowText для цвета текста. Так мы дадим системе знать, на какой цвет нужно заменить наш статический.

Другая важная особенность режима в том, что браузеры принимают решение о применении системных стилей на основе семантики элементов. Когда на сайте дивная вёрстка, то браузер будет применять ко всем элементам стили обычного текста. Это касается и элементов с ARIA-ролями. Например, <div role="link"> не настоящая ссылка, поэтому к элементу не применятся системные цвета текста ссылок.

Если поверх картинки размещён текст, то под ним появится чёрная подложка (backplate). Её стилями управлять нельзя.

Сравнение скриншотов с рекламой Halo Infinite. Название игры, описание и игровые платформы расположены на фоне картинки с главным героем. На первом скриншоте оригинальный интерфейс, на втором он в режиме высокой контрастности. Под белым текстом появилась чёрная заливка.
На первом скриншоте оригинальный интерфейс сайта Xbox в Vivaldi на Windows 10. На втором он в режиме чёрной высокой контрастности. Под текстом появилась чёрная подложка. Кусочек Мастера Чифа передаёт привет.

Если с семантикой всё в порядке и хочется оптимизировать сайт под режим высокой контрастности, то внимание надо обратить всего на несколько моментов. Это SVG, картинки с прозрачным фоном, чекбоксы и радиокнопки, а также элементы с box-shadow. Их чаще всего надо дотюнивать.

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

Кнопки и ссылки с SVG-иконками сливаются с фоном или становятся менее контрастными. Чёрный логотип или тёмная картинка с прозрачным фоном тоже могут слиться с фоном. В случае чекбокса или радиокнопки непонятно, выбраны они или нет.

У нарисованного человека на картинке слились с чёрным фоном волосы. Иконки остались синих, серых и красных цветов и выглядят неконтрастно на фоне чёрного. Чёрный кружок из переключателя и чёрные буквы из логотипа Яндекс тоже слились с фоном. Чёрная иконка с крестиком для открытия меню пропала на фоне того же цвета.
Главная Доки, футер «Веб-стандартов», переключатель темы на Reddit, меню Instagram, кнопка с иконкой для раскрытия меню на сайте Zara, поиск Яндекса.

В этом примере улучшаем кнопки с иконками в режиме высокой контрастности с помощью ключевого слова buttonText. Так они получат системный цвет текста кнопки.

@media (forced-colors: active) {
  .button__svg {
    fill: buttonText;
  }
}

Проверить то, как это работает в Windows, можно в демо с кнопкой c инлайновым SVG.

Пока поддержка forced-colors не такая высокая, а -ms-high-contrast уже устарела. Так что сейчас лучше настраивать стили для режима высокой контрастности без медиавыражений.

Например, так задаём для индикатора фокуса стили и в box-shadow, и в outline.

.button {
  border: 1px solid transparent;
}

.button:focus {
  box-shadow: 0 0 4px 1px darkslateblue;
  outline: 2px solid transparent;
}

В режиме высокой контрастности свойства outline применятся вместо отменённых системой box-shadow. В обычном режиме будет виден только box-shadow.

Для однотонных SVG-иконок лучше использовать ключевое слово currentColor для fill и stroke. Так они будут наследовать системный цвет родителя.

Представим, что у нас есть ссылка с инлайновой SVG-иконкой.

/* В обычном режиме цвет ссылки — indigo */
/* В режиме высокой контрастности переопределится системой */
.link {
  color: indigo;
}

/* SVG наследует цвет indigo в обычном режиме */
/* В режиме высокой контрастности наследует системный цвет */
.link__svg {
  fill: currentColor;
}

Возьмём для примера это демо со ссылкой на Twitter. Если включим чёрный режим высокой контрастности, то текст ссылки и иконка станут системного жёлтого.

К сожалению, в прошлом году это поведение сломалось в браузерах на Chromuim. Это произошло из-за изменений в CSS-спецификации. Поэтому сейчас SVG с currentColor остаются статического цвета в режиме принудительных цветов.

Временное решение проблемы — свойство forced-color-adjust.

Если применим forced-color-adjust со значением auto к SVG, то он унаследует цвет родительского элемента при переключении в режим высокой контрастности.

.link {
  color: indigo;
}

.link__svg {
  fill: currentColor;
  /* Фикс для режима высокой контрастности */
  forced-color-adjust: auto;
}

Проверить, как работает хак, можно в демке с фиксом со ссылкой на Twitter.

Другой вариант — значение preserve-parent-color. Оно помогает элементу наследовать значение родителя, если не используются другие способы. Например, inherit или currentColor. В обычном режиме ведёт себя как значение none. Пока в Chromium работают над его имплементацией.

Ещё одно значение forced-color-adjust — none. Отменяет замену статических цветов на динамические. В большинстве случаев его не рекомендуется использовать. Пригодится в ситуациях, когда важно сохранить цвета. Хороший пример можно посмотреть в демке с цветовыми палитрами.

Тестирование forced-colors

Включить режим высокой контрастности можно несколькими способами.

  • Windows 10: Настройки (Settings)Специальные возможности (Ease of Access)Высокая контрастность (High Contrast).
  • Windows 11: Настройки (Settings)Специальные возможности (Accessibility)Контрастные темы (Contrast themes).
  • Шорткат — Alt + Левый Shift + PrintScreen.

ms-high-contrast

Отслеживает, выбрал ли пользователь режим высокой контрастности. Соответствуют высококонтрастным темам в Windows до 11 версии.

Медиафича нестандартная и уже устарела. Вместо неё лучше использовать более современный аналог forced-colors. Может понадобиться, когда нужно поддерживать Internet Explorer и Edge 18 версии и ниже.

Доступные значения:

  • black-on-white, для режима с чёрным текстом на белом фоне.
  • white-on-black, для режима с белым текстом на чёрном фоне.
  • active, для всех остальных комбинаций цветов.

При работе со стилями учитывать всё то же, что и для forced-colors.

Единственная особенность — медиафича убирает background-image у интерактивных элементов. В примере изменяем это поведение:

@media (-ms-high-contrast: black-on-white) {
  .interactive-element {
    background-image: url("bg-image.png");
  }
}

prefers-contrast

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

Пока prefers-contrast не обязательно отслеживает высокий уровень контрастности, как в режиме высокой контрастности. Но стоит иметь в виду, что в будущем медиафича может быть теснее с ним связана.

Доступные значения:

  • no-preference, настройки не выбраны.
  • high, контрастность увеличена. Предлагается заменить на more.
  • low, контрастности понижена. Предлагается заменить на less.
  • forced, в системе выбран режим принудительных цветов. Например, режим высокой контрастности Windows. Предлагается заменить на custom.

Глобальная поддержка prefers-contrast не такая высокая — 13.37 %. Поддерживается в мобильном и десктопном Safari и в Chrome с 96 версии.

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

В этом примере изменяем border у элемента, чтобы стили были видны при высокой контрастности.

.image {
  border: 3px dashed lightpink;
}

/* Стили для повышенной контрастности */
@media (prefers-contrast: more) {
  .image {
    border: 3px solid black;
  }
}

А здесь все медиавыражения определяют режим высокой контрастности.

@media (forced-colors: active) {
  /* Нужные стили */
}

@media (prefers-contrast: forced) {
  /* Нужные стили */
}

@media (prefers-contrast: custom) {
  /* Нужные стили */
}

Посмотреть на forced-colors в действии можно уже сейчас в Safari в демке c милой выдрой.

Тестирование prefers-contrast

Для тестирования медиафичи нужно включить настройку увеличения контрастности.

  • macOS: Системные настройки (System Preferences)Универсальный доступ (Accessibility)Монитор (Display)Увеличить контрастность (Increase Contrast).
  • iOS: Настройки (Settings)Универсальный доступ (Accessibility)Дисплей и размер текста (Display & Text Size)Увеличение контраста (Increase Contrast).

prefers-reduced-transparency

Отслеживает отключение или уменьшение прозрачности в системе.

Значения медиафичи:

  • no-preference, пользователь не менял настройки прозрачности.
  • reduce, прозрачность уменьшена или отключена.

Пока prefers-reduced-transparency экспериментальная. Её не поддерживает ни один браузер.

В будущем так можно отменять opacity у элементов.

.transparency-bg {
  opacity: 0.5;
}

@media (prefers-reduced-transparency: reduce) {
  .transparency-bg {
    opacity: 1;
  }
}

О чём не рассказала

В этом посте не разбирала только одну медиафичу для пользовательских настроек — prefers-reduced-data. Она нужна для отслеживания настроек объёма получения данных.

Связана с перфомансом и тоже пригодится для доступности. Больше подробностей в «Creating websites with prefers-reduced-data».

Выводы

CSS-медиафичи дают нам возможность учитывать на сайтах пользовательские настройки. С их помощью можно в несколько строк кода улучшить пользовательский опыт и сделать интерфейс доступнее и безопаснее.

Уже сейчас можно смело использовать prefers-reduced-motion и prefers-color-scheme. Пока не так хорошо поддерживаются forced-colors, inverted-colors и prefers-contrast, но их поддержка постепенно расширяется. У prefers-reduced-transparency, скорее всего, всё ещё впереди. А ms-high-contrast устарела, так лучше не задавать стили для режима высокой контрастности в современных браузерах.

Что почитать и посмотреть


И снова спасибо Василию Дудину за помощь с редактированием.

Другие посты