Контраст цвета и стандарт WCAG в брендинге
Правда ли, что бренд-цвета освобождены от требований WCAG
Нет, и это одно из самых упорных заблуждений в брендинге. В тексте стандарта прямо сказано: «Corporate visual guidelines beyond logo and logotype are not included in the exception» — то есть исключение касается только логотипа и логотипного знака как графического объекта идентичности. Всё остальное: фирменные кнопки, текстовые блоки, иконки, инфографика в брендбуке — обязано соответствовать тем же порогам контраста, что и любой другой интерфейсный элемент.
Логика простая: логотип — это узнаваемый графический символ, его форма и цвет несут смысловую нагрузку сами по себе, и требовать от него соответствия контрасту было бы равносильно требованию перекрасить герб. А кнопка «Купить» смыслового значения через форму не несёт — её функция читается только через текст, и если текст нечитаем, функция не работает независимо от того, насколько цвет «на бренде».
Почему контраст считают через светлоту, а не через оттенок
Формула WCAG работает с относительной яркостью (relative luminance) — величиной, которая показывает, сколько света «отражает» цвет, если перевести его в градации серого. Оттенок в этой формуле не участвует вообще: красный, зелёный и синий цвета с одинаковой яркостью дадут одинаковый контраст против одного и того же фона.
Это принципиально важно для дизайн-систем: подбирать пары «цвет текста — цвет фона» нужно не по тому, «сочетаются» ли оттенки визуально, а по разнице их яркости. Именно поэтому в токенах современных дизайн-систем цвета описываются не только через HEX, но и через яркостную шкалу (lightness в HSL или OKLCH) — так проще на этапе создания палитры сразу видеть, какие сочетания в принципе способны пройти порог, а какие нет.
Кейс: как довести фирменный цвет до рабочего состояния без потери идентичности
Возьмём тот же #fd109a — насыщенный розовый, который бренд выбрал как основной акцентный цвет. Задача: использовать его и для текста, и для кнопок, и пройти AA. Прямое решение «сделать текст чуть темнее» ломает идентичность, если делать это на глаз. Работает role-scoped подход — когда у каждого цвета есть чётко закреплённая роль, а не одно значение на все случаи.
- Розовый остаётся основным акцентом (
--signal), но используется только там, где контраст объективно достаточен: крупные заголовки, иллюстративные элементы, заливки крупных кнопок — там порог 3:1 достигается без проблем. - Для текста на розовой подложке заводится отдельный токен
--signal-ink— обычно это белый или очень тёмный, почти чёрный цвет, подобранный именно под контраст к--signal, а не «стандартный чёрный из брендбука». - Для обычного текста бренд использует не сам розовый, а его затемнённый вариант или базовый нейтральный
--ink— розовый в этой роли просто не может физически пройти AA при разумной насыщенности. - Серый текст (подписи, второстепенная информация) ограничивается снизу: Gray-500 (#737373) на белом даёт 4.6:1 — это критический порог, самый светлый серый, который ещё проходит AA. Всё светлее уже не годится для основного текста, как бы аккуратно он ни смотрелся в макете.
Итог: бренд не «портит» свой розовый, а распределяет роли — яркий цвет работает там, где его яркость не мешает читаемости, а там, где нужен текст, включается заранее подготовленная контрастная пара. Это и есть системный подход вместо ручной правки цвета в каждом отдельном макете.
Дальтонизм и контраст: почему яркостный расчёт работает независимо от типа зрения
Дейтеранопия (нарушение восприятия зелёного) встречается у 1–5% мужчин, протанопия (нарушение восприятия красного) — у 1% мужчин. Для этой аудитории классическая пара «зелёная кнопка — красный текст ошибки», которая держится на разнице оттенков, может визуально слиться в почти неразличимое пятно.
Расчёт контраста по относительной яркости работает в пользу этой аудитории по умолчанию: если два цвета различаются по светлоте достаточно сильно, разница будет читаться даже при полном выпадении цветового канала. Поэтому в брендинге плохая идея — кодировать смысл только через оттенок (зелёный = успех, красный = ошибка) без разницы в светлоте или без дополнительного визуального маркера (иконка, форма, подпись). Проверка контраста по WCAG частично закрывает эту проблему автоматически, но не полностью — она гарантирует читаемость текста, а не то, что два статусных цвета не спутают друг с другом.
Требование 1.4.11: контраст не только для текста
Отдельный критерий WCAG — 1.4.11 Non-text Contrast — касается графических элементов интерфейса, которые несут функциональный смысл. Порог здесь ниже, чем для текста, но требование не менее обязательное: 3:1 против соседних цветов.
- Иконки, которые передают информацию или служат управляющим элементом (не декоративные)
- Границы полей форм, чекбоксов, переключателей
- Фокус-индикаторы — контур или подложка при переходе по Tab
- Линии и сегменты в графиках, диаграммах, инфографике
- Границы карточек и кнопок, если именно граница определяет их форму на фоне
Это ровно та зона, которую бренд-гайды обычно упускают: в брендбуке прописан цвет текста и цвет фона, но никто не проверяет, видна ли граница инпута на светло-сером фоне или различим ли контур иконки-действия на карточке продукта.
Как строить палитру дизайн-системы, а не подгонять цвета вручную
Системная ошибка большинства брендов — тестировать контраст постфактум, когда палитра уже утверждена и одобрена. Правильный порядок обратный: сначала закладываются роли токенов, потом под них подбираются конкретные значения цвета.
| Токен | Роль | Требование к контрасту |
|---|---|---|
| --signal | основной бренд-цвет, акценты, крупные заливки | 3:1 к фону (для крупных элементов) |
| --signal-ink | текст/иконки на заливке --signal | 4.5:1 к --signal |
| --ink | основной текст на поверхности | 4.5:1 к --surface (7:1 для AAA) |
| --surface | фон карточек, страниц, модалок | база для расчёта всех остальных пар |
| --border | границы, разделители, контуры полей | 3:1 к --surface (1.4.11) |
Такой подход снимает вопрос «какой оттенок бренда взять для текста» на уровне архитектуры системы — дизайнер не выбирает цвет каждый раз заново, а выбирает роль, а токен уже гарантированно проходит нужный порог. Уровень AA (4.5:1 для текста, компенсирует зрение уровня 20/40 — типичное для человека около 80 лет) достаточен для большинства коммерческих продуктов. Уровень AAA (7:1, компенсация зрения 20/80) стоит закладывать в медицинских, государственных и образовательных сервисах, где среди пользователей заведомо высокая доля людей с существенным снижением зрения — и там жёсткий контраст важнее визуальной мягкости бренда.
Логика простая: логотип — это узнаваемый графический символ, его форма и цвет несут смысловую нагрузку сами по себе, и требовать от него соответствия контрасту было бы равносильно требованию перекрасить герб. А кнопка «Купить» смыслового значения через форму не несёт — её функция читается только через текст, и если текст нечитаем, функция не работает независимо от того, насколько цвет «на бренде».
Почему контраст считают через светлоту, а не через оттенок
Формула WCAG работает с относительной яркостью (relative luminance) — величиной, которая показывает, сколько света «отражает» цвет, если перевести его в градации серого. Оттенок в этой формуле не участвует вообще: красный, зелёный и синий цвета с одинаковой яркостью дадут одинаковый контраст против одного и того же фона.
Это принципиально важно для дизайн-систем: подбирать пары «цвет текста — цвет фона» нужно не по тому, «сочетаются» ли оттенки визуально, а по разнице их яркости. Именно поэтому в токенах современных дизайн-систем цвета описываются не только через HEX, но и через яркостную шкалу (lightness в HSL или OKLCH) — так проще на этапе создания палитры сразу видеть, какие сочетания в принципе способны пройти порог, а какие нет.
Кейс: как довести фирменный цвет до рабочего состояния без потери идентичности
Возьмём тот же #fd109a — насыщенный розовый, который бренд выбрал как основной акцентный цвет. Задача: использовать его и для текста, и для кнопок, и пройти AA. Прямое решение «сделать текст чуть темнее» ломает идентичность, если делать это на глаз. Работает role-scoped подход — когда у каждого цвета есть чётко закреплённая роль, а не одно значение на все случаи.
- Розовый остаётся основным акцентом (
--signal), но используется только там, где контраст объективно достаточен: крупные заголовки, иллюстративные элементы, заливки крупных кнопок — там порог 3:1 достигается без проблем. - Для текста на розовой подложке заводится отдельный токен
--signal-ink— обычно это белый или очень тёмный, почти чёрный цвет, подобранный именно под контраст к--signal, а не «стандартный чёрный из брендбука». - Для обычного текста бренд использует не сам розовый, а его затемнённый вариант или базовый нейтральный
--ink— розовый в этой роли просто не может физически пройти AA при разумной насыщенности. - Серый текст (подписи, второстепенная информация) ограничивается снизу: Gray-500 (#737373) на белом даёт 4.6:1 — это критический порог, самый светлый серый, который ещё проходит AA. Всё светлее уже не годится для основного текста, как бы аккуратно он ни смотрелся в макете.
Итог: бренд не «портит» свой розовый, а распределяет роли — яркий цвет работает там, где его яркость не мешает читаемости, а там, где нужен текст, включается заранее подготовленная контрастная пара. Это и есть системный подход вместо ручной правки цвета в каждом отдельном макете.
Дальтонизм и контраст: почему яркостный расчёт работает независимо от типа зрения
Дейтеранопия (нарушение восприятия зелёного) встречается у 1–5% мужчин, протанопия (нарушение восприятия красного) — у 1% мужчин. Для этой аудитории классическая пара «зелёная кнопка — красный текст ошибки», которая держится на разнице оттенков, может визуально слиться в почти неразличимое пятно.
Расчёт контраста по относительной яркости работает в пользу этой аудитории по умолчанию: если два цвета различаются по светлоте достаточно сильно, разница будет читаться даже при полном выпадении цветового канала. Поэтому в брендинге плохая идея — кодировать смысл только через оттенок (зелёный = успех, красный = ошибка) без разницы в светлоте или без дополнительного визуального маркера (иконка, форма, подпись). Проверка контраста по WCAG частично закрывает эту проблему автоматически, но не полностью — она гарантирует читаемость текста, а не то, что два статусных цвета не спутают друг с другом.
Требование 1.4.11: контраст не только для текста
Отдельный критерий WCAG — 1.4.11 Non-text Contrast — касается графических элементов интерфейса, которые несут функциональный смысл. Порог здесь ниже, чем для текста, но требование не менее обязательное: 3:1 против соседних цветов.
- Иконки, которые передают информацию или служат управляющим элементом (не декоративные)
- Границы полей форм, чекбоксов, переключателей
- Фокус-индикаторы — контур или подложка при переходе по Tab
- Линии и сегменты в графиках, диаграммах, инфографике
- Границы карточек и кнопок, если именно граница определяет их форму на фоне
Это ровно та зона, которую бренд-гайды обычно упускают: в брендбуке прописан цвет текста и цвет фона, но никто не проверяет, видна ли граница инпута на светло-сером фоне или различим ли контур иконки-действия на карточке продукта.
Как строить палитру дизайн-системы, а не подгонять цвета вручную
Системная ошибка большинства брендов — тестировать контраст постфактум, когда палитра уже утверждена и одобрена. Правильный порядок обратный: сначала закладываются роли токенов, потом под них подбираются конкретные значения цвета.
| Токен | Роль | Требование к контрасту |
|---|---|---|
| --signal | основной бренд-цвет, акценты, крупные заливки | 3:1 к фону (для крупных элементов) |
| --signal-ink | текст/иконки на заливке --signal | 4.5:1 к --signal |
| --ink | основной текст на поверхности | 4.5:1 к --surface (7:1 для AAA) |
| --surface | фон карточек, страниц, модалок | база для расчёта всех остальных пар |
| --border | границы, разделители, контуры полей | 3:1 к --surface (1.4.11) |
Такой подход снимает вопрос «какой оттенок бренда взять для текста» на уровне архитектуры системы — дизайнер не выбирает цвет каждый раз заново, а выбирает роль, а токен уже гарантированно проходит нужный порог. Уровень AA (4.5:1 для текста, компенсирует зрение уровня 20/40 — типичное для человека около 80 лет) достаточен для большинства коммерческих продуктов. Уровень AAA (7:1, компенсация зрения 20/80) стоит закладывать в медицинских, государственных и образовательных сервисах, где среди пользователей заведомо высокая доля людей с существенным снижением зрения — и там жёсткий контраст важнее визуальной мягкости бренда.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
