Введение

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

Решение

В режиме высокой контрастности я использовал системный цвет CanvasText для автоматической настройки цвета значка.

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

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

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

Что такое CanvasText?

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

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

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

Ссылки

https://developer.mozilla.org/en-US/docs/Web/CSS/system-color