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

### Ключевые выводы

— Дальтонизм — это нарушение зрения, при котором человек не может различать определённые цвета. Это означает, что при создании писем некоторые из ваших подписчиков могут видеть их не так, как вы.

— Существует несколько форм дальтонизма: красно-зелёный, сине-жёлтый и полная цветовая слепота. Чтобы разрабатывать доступные письма для людей с дальтонизмом, необходимо учитывать, как каждая из этих форм влияет на дизайн.

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

— Фильтры нарушений зрения в Litmus упрощают проверку того, как ваше письмо будет выглядеть для подписчиков с дальтонизмом.

Вы уже знаете, что доступность писем имеет значение. Как маркетологи, мы стремимся к тому, чтобы каждый, кто читает наше письмо, мог его полюбить и оценить — это просто идеально. 👌

По какой-то причине доступный дизайн имеет репутацию «дополнительной работы» (спойлер: это не так). Доступность, особенно в дизайне, — это не столько переключение тумблера (хотя у нас он тоже есть), сколько изменение подхода к дизайну в принципе. Цвет, интервалы, шрифт и компоновка — всё это важно.

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

— Что такое дальтонизм?

— Насколько распространён дальтонизм?

— Различные виды дальтонизма

— Доступность для людей с дальтонизмом — обязательное требование

— Принципы доступности для людей с дальтонизмом

— Как видят доступные письма люди с дальтонизмом

— Как создать доступную цветовую палитру

— 5 лучших практик разработки писем для подписчиков с дальтонизмом

— Отраслевые советы по созданию писем, доступных для людей с дальтонизмом

— Часто задаваемые вопросы о доступности для людей с дальтонизмом

## Что такое дальтонизм?

Дальтонизм (также называемый нарушением цветового зрения) не означает, что человек ничего не видит. По данным Американской академии офтальмологии, дальтонизм — это нарушение зрения, при котором человек не может различать определённые цвета.

В каждом глазу есть два типа клеток, воспринимающих свет: палочки (определяют уровень освещённости) и колбочки (определяют цвет). Дальтонизм возникает, когда одна или все колбочки отсутствуют, повреждены или воспринимают цвет иначе, чем обычно. Это приводит к нарушению зрения, при котором человек не может различать определённые цвета — чаще всего красный и зелёный.

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

### Насколько распространён дальтонизм?

Дальтонизм чаще встречается у мужчин, чем у женщин. Он наблюдается примерно у одного из двенадцати мужчин (8%) и у одной из двухсот женщин. В общей сложности около 300 миллионов человек в мире страдают дальтонизмом (это примерно население США!).

## Какие существуют виды дальтонизма?

Существует целый ряд нарушений зрения, которые могут влиять на способность человека воспринимать цвета по-разному.

Источник изображения: Wikipedia

Вот список, основанный на данных Национального института глаз.

### 1. Красно-зелёный дальтонизм

Как можно догадаться из названия, красно-зелёный дальтонизм затрудняет различие между красным и зелёным. Это не значит, что человек вообще не видит эти цвета — просто их сложно сравнивать. Это самый распространённый вид дальтонизма, и он имеет четыре разновидности:

**Дейтераномалия** — самая распространённая форма, при которой зелёный цвет кажется более красным, чем обычно. **Протаномалия** — противоположность: красный кажется более зелёным и менее ярким. **Протанопия и дейтеранопия** — более тяжёлые формы, при которых человек вообще не может различать красный и зелёный.

### 2. Сине-жёлтый дальтонизм

Сине-жёлтый дальтонизм — менее распространённый вид, при котором сложно различать синий и зелёный, а также жёлтый и красный. Существует две разновидности этого нарушения:

— **Тританомалия** — самая лёгкая форма, при которой сложно отличить синий от зелёного, а жёлтый от красного.

— **Тританопия** — при этом человек вообще не может различать синий и зелёный, фиолетовый и красный, жёлтый и розовый, а цвета кажутся менее яркими.

Хотя этот вид встречается реже, чем красно-зелёный дальтонизм, его всё равно стоит учитывать.

### 3. Полная цветовая слепота

Полная цветовая слепота встречается крайне редко. При этом нарушении человек вообще не видит цвета, и оно называется ахроматопсией.

## Доступность для людей с дальтонизмом — обязательное требование

Скорее всего, среди ваших подписчиков есть люди с дальтонизмом.

Доступность важна, потому что ваша аудитория важна — а среди более чем 3 миллиардов пользователей электронной почты по всему миру ваши тщательно созданные письма воспринимаются по-разному.

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

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

### Доступные письма для людей с дальтонизмом могут повысить вовлечённость

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

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

## Принципы доступности для людей с дальтонизмом

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

«Мы создали и продолжаем совершенствовать дизайн-системы, чтобы каждое отправляемое письмо соответствовало стандартам доступности», — говорит Кинкид. «Мы постоянно думаем о том, как улучшить фирменный стиль, соблюдая эти стандарты, и продолжаем тестировать каждое письмо, чтобы обеспечить лучший опыт для всех подписчиков».

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

Затем мы тестируем, тестируем и ещё раз тестируем. «Одна из самых больших проблем, с которыми мы столкнулись недавно, — упрощение цветовой палитры при сохранении доступности», — говорит Кинкид. «В Litmus мы уделяем большое внимание доступности писем, но даже тогда столкнулись с трудностями при обновлении фирменных цветов. Мы обнаружили это на раннем этапе тестирования и скорректировали цвета, чтобы они хорошо работали как на светлом, так и на тёмном фоне».

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

### Нужно ли создавать отдельное письмо для людей с дальтонизмом?

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

## Как видят доступные письма люди с дальтонизмом

Рассмотрим пример того, как доступные письма воспринимаются людьми с дальтонизмом, используя фильтр нарушений зрения в Litmus. Вот письмо до применения фильтров:

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

Письмо довольно простое: чёрный текст на белом фоне. Теперь применим фильтр.

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

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

## Как создать доступную цветовую палитру

Как дизайнер, Кинкид сосредоточен на создании идеального сочетания элементов дизайна, таких как цвет, форма, линия, пространство и типографика. Этот баланс делает дизайн письма соответствующим фирменному стилю бренда и направляет аудиторию к желаемому действию (в идеале — к конверсии).

Каждый из этих элементов должен быть доступным. При дальтонизме логично начать с цвета. «Мы всегда стремимся к цветовой палитре, которая работает в оттенках серого и избегает проблемных сочетаний для людей с дальтонизмом. Она должна быть достаточно гибкой, чтобы никто не был исключён из понимания контента, будь то элементы интерфейса, графики или текст», — говорит Кинкид.

### Что такое доступная цветовая палитра?

Доступная цветовая палитра — это набор цветов для дизайна писем, соответствующий стандартам доступности, таким как рекомендации WCAG. Минимальное соотношение контрастности составляет 4,5:1 для обычного текста и 3:1 для крупного текста, например заголовков.

«Это обеспечивает достаточную визуальную различимость между цветами переднего плана и фона, чтобы текст оставался читаемым для всех, включая людей с ослабленным зрением и дальтонизмом», — говорит Кинкид. «Соотношение контрастности — это мера того, насколько два цвета отличаются по яркости. Чем выше соотношение, тем легче читать текст. Если контраст слишком низкий, текст сливается с фоном, и некоторым пользователям его почти не видно».

Речь не идёт о выборе совершенно новой палитры специально для людей с дальтонизмом. Скорее, это упражнение по тщательному анализу существующей палитры и её доработке, чтобы она была функциональной для всех подписчиков или посетителей сайта.

«Она должна быть гибкой», — добавляет Кинкид. «Мне нравится использовать нейтральные и акцентные цвета, которые подходят для разных сценариев без нарушения доступности».

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

### Ключевые аспекты при создании цветовой палитры

Нет конкретного набора «доступных» цветов. Важно сочетание цветов и их взаимодействие.

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

**Чем выше контрастность ваших писем, тем они доступнее.** Контрастность — это разница между оттенками цвета. Независимо от фирменных цветов, используйте в письме не более двух-трёх цветов. Не знаете, с чего начать? Возьмите цветовой круг и выберите противоположные цвета, например синий и оранжевый. Или просто используйте тёмные цвета на белом фоне. **Избегайте определённых сочетаний цветов:** красный/зелёный, синий/жёлтый, зелёный/синий и синий/фиолетовый — все эти комбинации сложны для восприятия. Важно не то, какие цвета вы используете, а их сочетание в дизайне и насколько оно важно для общего смысла письма.

**Делайте текст легко читаемым на любом фоне.** (Извините, пользователи MySpace с вашими розовыми страницами на фиолетовом фоне.) Лучше всего работают сочетания с высокой контрастностью, например классический чёрный на белом или белый на чёрном в тёмном режиме.

Включите доступность в свой рабочий процесс

Чек-лист тестирования доступности в Litmus поможет выявить и устранить проблемы, чтобы каждый подписчик получил отличный опыт взаимодействия с письмом.

## 5 лучших практик разработки писем для подписчиков с дальтонизмом

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

### 1. Продумывайте дизайн писем комплексно

Эффективно ли вы используете все элементы дизайна в своих письмах?

Когда речь идёт о таком мощном инструменте, как цвет, важно остановиться и продумать варианты использования дизайна. Это не только эстетика (хотя она, конечно, важна), но и правильное сочетание цветов в зависимости от их расположения в письме. Также подумайте, достаточно ли разнообразия для эффективного различения данных.

«В конце 2024 года мы начали использовать меньше цветов в целом, чтобы создать более целостную и продуманную дизайн-систему. Это на самом деле помогает с доступностью, потому что заставляет нас более внимательно относиться к контрастности, иерархии и осмысленному использованию цвета, а не полагаться на излишне сложную палитру, которая может не подойти всем», — говорит Кинкид.

### 2. Не полагайтесь только на цвет для передачи информации

Следующее важное правило при разработке для людей с дальтонизмом — использовать не только цвет для передачи идей. Это важно для пользователей с дальтонизмом, но также актуально для доступности с помощью скринридеров, которые озвучивают письма для подписчиков с нарушениями зрения. Каждый элемент дизайна вашего письма может передавать информацию — пора использовать этот потенциал. Это требует немного нестандартного мышления, но станет мощным инструментом в вашем арсенале дизайна.

#### Включайте в дизайн иконки или фигуры

Добавление иконок или фигур в дизайн письма может создать дополнительный уровень передачи сообщения без использования цвета.

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

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

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

Теперь посмотрим на то же письмо с применённым фильтром тританопии. Выглядит немного иначе, верно?

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

Это отличный пример того, как использовать формы для передачи информации вместо цвета или в дополнение к нему.

### 3. Структурируйте письмо в чётком и логичном порядке

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

Источник: Really Good Emails

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

Источник: Really Good Emails

Также можно использовать классический S-образный дизайн, как в этом письме от Krispy Kreme. Это направляет взгляд читателя из стороны в сторону, постепенно подводя его к призыву к действию.

### 4. Воспринимайте текст как визуальный элемент

Мы часто думаем о тексте отдельно от дизайна, но расположение текста в письме — это тоже элемент дизайна, который можно оптимизировать для доступности. Убедитесь, что вы пишете доступным языком: используйте крупный текст, легко читаемые шрифты и достаточно свободного пространства для удобства чтения.

В Litmus мы используем не менее 18px для основного текста, а самый мелкий текст (например, в футере или подписях) — 14px. Мы также всегда выравниваем текст по левому краю, чтобы его было легче читать.

#### Используйте текст в письмах

Одна из наших главных претензий к дизайну писем — тренд на письма, состоящие только из изображений. Они не только недоступны для пользователей с нарушениями зрения, но и часто некорректно отображаются в разных почтовых клиентах и на устройствах, из-за чего тщательно проработанное дизайнером изображение может исчезнуть. Ваши письма должны содержать не только изображения, чтобы любой человек (с дальтонизмом или без) мог понять, что вы хотите сказать.

#### Добавьте вариант письма в простом текстовом формате для людей с дальтонизмом

Писать доступным языком — значит использовать ясный и продуманный стиль, но также важно создать правильный опыт для подписчиков. Добавление версии письма в простом текстовом формате — ещё один способ предоставить больше текста. Большинство почтовых сервисов позволяют добавить или отредактировать текстовый вариант HTML-письма перед отправкой. Поставив эту галочку, вы дадите подписчикам с дальтонизмом ещё один способ взаимодействовать с вашими кампаниями, не разбираясь, почему вы отправляете изображение в серых тонах.

#### Не забывайте про альтернативный текст

Альтернативный текст — это один из тех элементов письма, который легко добавить для доступности, но о нём часто забывают. И это важно не только для людей с дальтонизмом. Многие пользователи блокируют изображения или используют умные колонки для чтения писем вслух, поэтому это полезное дополнение для всех. Хороший альтернативный текст чётко описывает изображение, чтобы читатель, который его не видит (по любой причине), всё равно понял, что вы хотели передать.

### 5. Используйте фильтры нарушений зрения

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

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

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

Для пользователей Litmus мы предлагаем функцию фильтров нарушений зрения в Litmus Builder, нашем инструменте предварительного просмотра и чек-листе QA, а также в Proof. Эта функция позволяет клиентам просматривать письмо так, как его увидят получатели с нарушениями зрения, связанными с дальтонизмом.

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

Учитесь у лучших

## Отраслевые советы по обеспечению доступности писем для людей с дальтонизмом

В целом Кинкид советует придерживаться тех же общих принципов. «Независимо от отрасли — финансовые услуги, здравоохранение, электронная коммерция или SaaS — ключ в том, чтобы сочетать цвет с дополнительными визуальными элементами, такими как иконки, узоры или текстовые метки, чтобы смысл оставался понятным для пользователей с дальтонизмом или слабым зрением», — говорит она.

Как выглядит доступность в вашей отрасли? Вот несколько примеров:

### Финансовые отчёты: не ограничивайтесь красным и зелёным

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

Это письмо от TurboTax — отличный пример высокой контрастности и ярких цветов: оранжевый, синий и чёрный в тематической кампании на Хэллоуин.

### Важные сообщения в письмах для здравоохранения

Аналогично, если вы отправляете письма с графиками, данными или другой важной информацией, например временем приёма, не полагайтесь только на цвет для передачи смысла.

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

### Электронная коммерция: добавляйте альтернативный текст к изображениям

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

*Это отличный пример использования альтернативного текста для рассказа вместо цвета.*

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

### Письма для B2B SaaS не должны быть скучными, чтобы быть доступными

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

Мы до сих пор в восторге от этой апрельской кампании, которую мы отправили в честь 50-летия электронной почты. Мы хотели вернуть все любимые тренды 90-х — посмотрите на эту типографику Comic Sans — но с современным подходом к доступности. Полную инструкцию можно посмотреть здесь.

## Создавайте более доступные письма для подписчиков уже сегодня

Разработка доступных писем — это не просто галочка в чек-листе. Речь идёт о том, чтобы сделать ваши письма более лёгкими для чтения и понимания для всех, независимо от наличия зрительных нарушений. В Litmus мы считаем, что доступный дизайн писем — важная часть работы email-маркетолога, потому что то, что делает письмо лучше для аудитории с нарушениями зрения, часто улучшает его для всех. С помощью тестирования доступности в Litmus Checklist вы можете мгновенно проверить, доступно ли ваше письмо для всех подписчиков, и получить практические советы по созданию более инклюзивных писем.

## Часто задаваемые вопросы о доступности для людей с дальтонизмом

Остались вопросы? Ознакомьтесь с часто задаваемыми вопросами о доступности для людей с дальтонизмом:

### Каких цветов следует избегать при дальтонизме?

Нет конкретных цветов, которых следует избегать при дальтонизме. Вместо этого убедитесь, что выбранные вами сочетания цветов имеют достаточную контрастность, чтобы их могли видеть люди с дальтонизмом. Распространённые сочетания, которых следует избегать: красный/зелёный и синий/жёлтый.

### Считается ли дальтонизм инвалидностью?

Да, дальтонизм считается инвалидностью по Закону об американцах с инвалидностью (ADA) в США, что означает, что юридически, если вы отправляете письма подписчикам в США, вы должны соблюдать Руководство по обеспечению доступности веб-контента (WCAG) для соответствия требованиям. Аналогичные законы об доступности существуют в ЕС и Канаде.

### Каково минимальное соотношение контрастности для текста и фона?

Согласно стандартам WCAG, минимальное соотношение контрастности для текста и фона составляет 4,5:1 для обычного текста и 3:1 для крупного текста, например заголовков.

### В чём разница между дальтонизмом и нарушением цветового зрения?

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