Иногда просмотр содержимого веб-страницы в режиме высокой контрастности приводит к ошибке при выводе SVG-изображений.

Хорошим вариантом решения такой проблемы стало использование свойства CanvasText для настройки системного цвета и, как результат, корректного вывода картинок в формате SVG:

.icon {
  mask-image: url(svg-link);
  background-color: currentColor;
}

@media (forced-colors: active) {
  .icon::before {
    background-color: CanvasText;
  }
}

В приведенном выше примере, для наследования цветов родительского элемента сначала я применил currentColor. А уже в режиме высокой контрастности установил значение CanvasText для background-color дочернего элемента.

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

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

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

Подробную информацию про системные цвета читайте на MDN

Спасибо за внимание.

Перевод статьи Yuiko Koyanagi “How to Automatically Adjust Colors in High Contrast Mode”