Как победить инверсию цветов в письмах Яндекс Почты при тёмной теме

При вёрстке email-писем для светлого фона часто используют фоновые изображения (background-image) с наложенным текстом. В обычном режиме всё выглядит отлично, но при переключении на тёмную тему в Яндекс Почте возникает типичная проблема: картинки не инвертируются, а текст становится светлым и сливается с фоном. Даже если вы уже решили эту задачу для Gmail и Mail.ru, Яндекс может упорно перекрашивать элементы. Разберём, почему так происходит и какие есть способы защиты.

Почему Яндекс Почта искажает цвета?

Яндекс Почта (как и многие другие почтовые клиенты) автоматически применяет инверсию цветов для улучшения читаемости в тёмном режиме. Однако алгоритмы Яндекса работают агрессивнее: они меняют не только цвет текста, но и могут инвертировать фоновые заливки, оставляя нетронутыми встроенные изображения. В результате текст на картинке становится нечитаемым.

Основные методы борьбы с инверсией

1. Мета-тег color-scheme и CSS-свойство prefers-color-scheme

Добавьте в письма мета-тег, который подскажет клиенту, что письмо поддерживает обе темы:

<meta name="color-scheme" content="light dark">

А также CSS-медиазапрос для принудительной установки цветов при тёмной теме:

@media (prefers-color-scheme: dark) {
  .email-body { background-color: #ffffff !important; }
  .text-on-image { color: #000000 !important; }
}

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

2. Использование data-атрибутов и встроенных стилей

Для элементов с фоновыми картинками и текстом поверх них пропишите inline-стили с явным указанием цветов, а также добавьте атрибут data-ogsc (он отключает инверсию для конкретного элемента в некоторых версиях Яндекса):

<div style="background-image: url('...'); color: #000000;" data-ogsc="">
  Ваш текст
</div>

3. Обёртка с инвертированными цветами

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

<div style="background-color: #ffffff; padding: 10px;">
  <p style="color: #000000;">Текст на картинке</p>
</div>

4. Использование PNG с прозрачностью и явным фоном

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

Специфические приёмы для Яндекс Почты

Яндекс Почта использует собственный движок рендеринга, который игнорирует некоторые стандартные свойства. Вот что может помочь:

• Вставка невидимого символа-заполнителя - иногда добавление   или нулевой ширины пробела перед текстом сбрасывает инверсию.
• Использование атрибута bgcolor - для табличных вёрсток явно пропишите bgcolor="#ffffff" в ячейке с текстом.
• Отключение автоинверсии через CSS-свойство -webkit-print-color-adjust - добавьте style="-webkit-print-color-adjust: exact; print-color-adjust: exact;" для контейнера.

Что делать, если ничего не помогает?

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