Проверка фирменной палитры на дальтонизм
Сколько людей это реально касается
Самый частый тип нарушения — дейтеранопия и дейтеранномалия, слабость или полное отсутствие восприятия зелёного. Ими страдают 5–6,5% мужчин, что делает красно-зелёную ось приоритетной зоной проверки любой палитры. Протанопия (слепота к красному) и тританопия (проблемы с синим) встречаются значительно реже, но полностью игнорировать их нельзя — особенно если в айдентике используется синий как основной цвет, что для брендов типично.
Логика проверки отсюда простая: сначала гонять палитру через red-green симуляции, потому что они закрывают большинство людей с нарушениями цветовосприятия, и только потом — через синие типы.
Проблемные пары цветов и что с ними делать
Есть комбинации, которые почти гарантированно ломаются при любой форме дальтонизма. Их стоит знать заранее, а не находить постфактум в отзывах пользователей.
| Комбинация | Почему проблема | Что делать |
|---|---|---|
| Красный + зелёный | Сливаются при дейтеранопии и протанопии | Развести по светлоте, а не по оттенку; добавить обводку или иконку |
| Зелёный + коричневый | Обе группы теряют насыщенность в серой шкале | Один из цветов сделать значительно светлее/темнее |
| Синий + фиолетовый | Проблема при тританопии, реже — но критична для акцентов | Увеличить разницу в яркости минимум на 2-3 ступени |
| Светло-зелёный + жёлтый | Практически неотличимы при дейтеранопии | Не использовать как пару текст/фон, только как декоративные акценты |
Ключевой принцип здесь один: дальтоники ориентируются на светлоту (luminance), а не на оттенок. Если перевести палитру в чёрно-белую шкалу и все элементы всё ещё читаются — палитра рабочая для всех типов нарушений цветовосприятия. Это самый быстрый и грубый тест, который можно сделать без единого инструмента.
WCAG или Delta E: какой метрикой мерить
Здесь конкурирующие подходы решают разные задачи, и путать их — ошибка.
| Метрика | Что измеряет | Когда применять |
|---|---|---|
| WCAG контраст | Отношение яркости текста и фона (нужно 4.5:1 для обычного текста, 3:1 для крупного, уровень AA) | Интерфейсы, где есть текст на цветном фоне |
| Delta E (CIE2000) | Воспринимаемая разница между двумя цветами при разных типах CVD | Проверка самой палитры, логотипа, брендовых плашек без текста |
Практическое правило: между фоном и передним планом Delta E должен быть не меньше 10 во всех симуляциях CVD. Значение ниже 2.3 означает, что человеческий глаз вообще не различает цвета — это уже не вопрос дальтонизма, а брак самой пары. Но даже если формальный контраст пройден, цвет не должен быть единственным носителем смысла. Красная и зелёная кнопка с одинаковой формой — плохая идея, даже если WCAG формально satisfied. Добавляйте иконки, текстовые метки, паттерны штриховки — это дешевле, чем перекрашивать всю систему заново.
Интерфейс и печать — разные правила игры
Ошибка многих гайдлайнов — проверять палитру один раз и считать, что результат универсален для всех носителей. Это не так.
- Интерфейс: цвета рендерятся в RGB, освещение экрана стабильно, можно программно проверить контраст автоматическими инструментами и адаптировать через CSS-переменные без переиздания материалов.
- Печать: цвета переводятся в CMYK или Pantone, восприятие зависит от типа бумаги, освещения помещения и качества печати — Delta E может «плыть» даже при идеальном макете. Проверка должна проходить на реальном оттиске, а не только на экранном превью.
- Наружная реклама и упаковка: добавляется фактор расстояния и внешнего освещения, из-за которого мелкие цветовые различия теряются быстрее, чем в интерфейсе — здесь особенно важна проверка на большом Delta E, а не на минимально допустимом.
Как исправить закреплённую палитру без ребрендинга
Самый болезненный вопрос — что делать, если проблемная палитра уже зафиксирована в брендбуке, нанесена на вывески и зарегистрирована как товарный знак. Полная замена цвета — дорогое и часто ненужное решение.
Юридически здесь есть пространство для маневра: Роспатент допускает корректировку цвета товарного знака, если этот цвет не заявлен как существенный элемент охраны знака. То есть в большинстве случаев можно скорректировать оттенок в допустимых пределах без переоформления регистрации — если исходная заявка не фиксировала точный Pantone как ключевой признак.
Показательный пример из практики ребрендинга — переход Mail от оранжевого к салатовому. Замена дала не просто визуальное обновление, а измеримо более высокую контрастность и лучшую доступность для пользователей с нарушением цветовосприятия. Это иллюстрирует главный компромисс: не обязательно менять всю палитру, достаточно скорректировать один проблемный цвет, сохранив геометрию логотипа, шрифты и композицию гайдлайна.
Порядок проверки на практике
- Прогнать всю палитру через red-green симуляции CVD — это покрывает большинство случаев нарушения цветовосприятия.
- Перевести палитру в оттенки серого и проверить, различимы ли элементы только по светлоте.
- Посчитать Delta E между всеми парами «фон — передний план», ориентируясь на минимум 10.
- Проверить критичные текстовые пары по WCAG (4.5:1 или 3:1 для крупного текста).
- Отдельно проверить печатные образцы на реальном носителе, а не только на экране.
- Там, где цвет — единственный сигнал, добавить иконку, паттерн или текстовую метку.
Такой порядок экономит время: вы сразу видите, где достаточно косметической правки одного оттенка, а где придётся вводить дополнительный визуальный код. И в 90% случаев для существующего бренда это именно локальная коррекция, а не полный редизайн.
Сколько людей это реально касается
Самый частый тип нарушения — дейтеранопия и дейтеранномалия, слабость или полное отсутствие восприятия зелёного. Ими страдают 5–6,5% мужчин, что делает красно-зелёную ось приоритетной зоной проверки любой палитры. Протанопия (слепота к красному) и тританопия (проблемы с синим) встречаются значительно реже, но полностью игнорировать их нельзя — особенно если в айдентике используется синий как основной цвет, что для брендов типично.
Логика проверки отсюда простая: сначала гонять палитру через red-green симуляции, потому что они закрывают большинство людей с нарушениями цветовосприятия, и только потом — через синие типы.
Проблемные пары цветов и что с ними делать
Есть комбинации, которые почти гарантированно ломаются при любой форме дальтонизма. Их стоит знать заранее, а не находить постфактум в отзывах пользователей.
| Комбинация | Почему проблема | Что делать |
|---|---|---|
| Красный + зелёный | Сливаются при дейтеранопии и протанопии | Развести по светлоте, а не по оттенку; добавить обводку или иконку |
| Зелёный + коричневый | Обе группы теряют насыщенность в серой шкале | Один из цветов сделать значительно светлее/темнее |
| Синий + фиолетовый | Проблема при тританопии, реже — но критична для акцентов | Увеличить разницу в яркости минимум на 2-3 ступени |
| Светло-зелёный + жёлтый | Практически неотличимы при дейтеранопии | Не использовать как пару текст/фон, только как декоративные акценты |
Ключевой принцип здесь один: дальтоники ориентируются на светлоту (luminance), а не на оттенок. Если перевести палитру в чёрно-белую шкалу и все элементы всё ещё читаются — палитра рабочая для всех типов нарушений цветовосприятия. Это самый быстрый и грубый тест, который можно сделать без единого инструмента.
WCAG или Delta E: какой метрикой мерить
Здесь конкурирующие подходы решают разные задачи, и путать их — ошибка.
| Метрика | Что измеряет | Когда применять |
|---|---|---|
| WCAG контраст | Отношение яркости текста и фона (нужно 4.5:1 для обычного текста, 3:1 для крупного, уровень AA) | Интерфейсы, где есть текст на цветном фоне |
| Delta E (CIE2000) | Воспринимаемая разница между двумя цветами при разных типах CVD | Проверка самой палитры, логотипа, брендовых плашек без текста |
Практическое правило: между фоном и передним планом Delta E должен быть не меньше 10 во всех симуляциях CVD. Значение ниже 2.3 означает, что человеческий глаз вообще не различает цвета — это уже не вопрос дальтонизма, а брак самой пары. Но даже если формальный контраст пройден, цвет не должен быть единственным носителем смысла. Красная и зелёная кнопка с одинаковой формой — плохая идея, даже если WCAG формально satisfied. Добавляйте иконки, текстовые метки, паттерны штриховки — это дешевле, чем перекрашивать всю систему заново.
Интерфейс и печать — разные правила игры
Ошибка многих гайдлайнов — проверять палитру один раз и считать, что результат универсален для всех носителей. Это не так.
- Интерфейс: цвета рендерятся в RGB, освещение экрана стабильно, можно программно проверить контраст автоматическими инструментами и адаптировать через CSS-переменные без переиздания материалов.
- Печать: цвета переводятся в CMYK или Pantone, восприятие зависит от типа бумаги, освещения помещения и качества печати — Delta E может «плыть» даже при идеальном макете. Проверка должна проходить на реальном оттиске, а не только на экранном превью.
- Наружная реклама и упаковка: добавляется фактор расстояния и внешнего освещения, из-за которого мелкие цветовые различия теряются быстрее, чем в интерфейсе — здесь особенно важна проверка на большом Delta E, а не на минимально допустимом.
Как исправить закреплённую палитру без ребрендинга
Самый болезненный вопрос — что делать, если проблемная палитра уже зафиксирована в брендбуке, нанесена на вывески и зарегистрирована как товарный знак. Полная замена цвета — дорогое и часто ненужное решение.
Юридически здесь есть пространство для маневра: Роспатент допускает корректировку цвета товарного знака, если этот цвет не заявлен как существенный элемент охраны знака. То есть в большинстве случаев можно скорректировать оттенок в допустимых пределах без переоформления регистрации — если исходная заявка не фиксировала точный Pantone как ключевой признак.
Показательный пример из практики ребрендинга — переход Mail от оранжевого к салатовому. Замена дала не просто визуальное обновление, а измеримо более высокую контрастность и лучшую доступность для пользователей с нарушением цветовосприятия. Это иллюстрирует главный компромисс: не обязательно менять всю палитру, достаточно скорректировать один проблемный цвет, сохранив геометрию логотипа, шрифты и композицию гайдлайна.
Порядок проверки на практике
- Прогнать всю палитру через red-green симуляции CVD — это покрывает большинство случаев нарушения цветовосприятия.
- Перевести палитру в оттенки серого и проверить, различимы ли элементы только по светлоте.
- Посчитать Delta E между всеми парами «фон — передний план», ориентируясь на минимум 10.
- Проверить критичные текстовые пары по WCAG (4.5:1 или 3:1 для крупного текста).
- Отдельно проверить печатные образцы на реальном носителе, а не только на экране.
- Там, где цвет — единственный сигнал, добавить иконку, паттерн или текстовую метку.
Такой порядок экономит время: вы сразу видите, где достаточно косметической правки одного оттенка, а где придётся вводить дополнительный визуальный код. И в 90% случаев для существующего бренда это именно локальная коррекция, а не полный редизайн.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
