Как передавать статус в интерфейсе без опоры только на цвет

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

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

Какую информацию цвет действительно несёт в статусах

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

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

Из этого следует практическое правило: сначала сформулируйте смысл статуса словами, а уже потом раскрашивайте. Тогда цвет станет ускорителем восприятия, а не единственным носителем информации.

Как дублировать смысл текстом и формой

Самая надёжная связка для коротких статусов — текст + иконка или форма + цвет. Текст отвечает за точность. Иконка или форма помогают распознать состояние быстрее, даже когда пользователь не читает каждую метку. Цвет остаётся полезным, но не несёт всё в одиночку.

Для трёх статусов заказа лучше выбирать слова, которые описывают состояние, а не эмоцию. Например: «Подтверждён», «Ожидает оплаты», «Ошибка оплаты». Такие надписи снимают двусмысленность. Сравните с расплывчатыми вариантами «ОК», «В процессе», «Проблема»: они короче, но требуют догадки.

Второй слой — визуальная форма. Здесь важно не усложнять. Для успеха подойдёт иконка галочки. Для ожидания — часы, три точки или круг ожидания. Для ошибки — восклицательный знак или крестик. Если вы хотите усилить различие, можно слегка менять форму контейнера: у успеха — мягкая капсула, у ожидания — капсула с пунктирной рамкой, у ошибки — более жёсткий прямоугольник с заметной рамкой. Главное, чтобы различие было видно без чтения цвета и без ловли мельчайших деталей.

Учебный пример: три статуса заказа на одной странице

Учебный пример. Представим страницу со списком из 24 заказов в веб-интерфейсе магазина. В исходной версии у каждой строки был только маленький цветной бейдж без текста: зелёный, жёлтый или красный. Если убрать цвет, все бейджи превращались в одинаковые овалы. Пользователь видел, что статус есть, но не понимал какой.

В переработанной версии я оставил цвет, но добавил две независимые подсказки: иконку и текст. Заодно для статуса ожидания сделал пунктирную рамку, чтобы состояние считывалось как незавершённое. Ниже — упрощённый вариант разметки и стилей для обычного HTML/CSS-интерфейса.

<ul class="orders">
  <li><span class="status status--done"><span aria-hidden="true">✓</span>Подтверждён</span></li>
  <li><span class="status status--waiting"><span aria-hidden="true">◔</span>Ожидает оплаты</span></li>
  <li><span class="status status--error"><span aria-hidden="true">!</span>Ошибка оплаты</span></li>
</ul>

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 2px solid currentColor;
  background: #ffffff;
  font: 600 14px/1.2 system-ui, sans-serif;
}
.status--done {
  color: #1f6b43;
  border-radius: 999px;
}
.status--waiting {
  color: #7a5a00;
  border-radius: 999px;
  border-style: dashed;
}
.status--error {
  color: #8a1f1f;
  border-radius: 8px;
}

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

Как проверить три статуса без цвета

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

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

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

1. Уберите цвет или переведите экран в серый.
2. Сравните статусы рядом, без остального интерфейса.
3. Проверьте, не повторяются ли иконки, формы и слова.
4. Убедитесь, что текст остаётся коротким, но однозначным.

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

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

Здесь часто возникает путаница. Если вы добавили текст и иконку, это ещё не означает, что статусы автоматически доступны. Требование «не только цвет» отвечает на вопрос откуда берётся смысл. Проверка контраста отвечает на другой вопрос: видно ли этот смысл вообще. Это разные задачи, и одна не заменяет другую.

Простой пример. Бейдж «Ошибка оплаты» с восклицательным знаком формально уже не опирается только на красный цвет. Но если текст светло-красный на белом фоне и читается с трудом, пользователь всё равно проигрывает. Обратная ситуация тоже важна: даже если зелёная и красная рамки отличаются по яркости достаточно сильно, интерфейс всё ещё не проходит проверку здравым смыслом, когда статус нужно определить именно по тому, какой это цвет. Высокий контраст между зелёным и красным не делает цвет единственным допустимым носителем смысла.

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

Если хотите глубже разобрать такие решения в учебной среде, в сохранённом описании каталога курса «UX/UI-дизайнер» от Bang Bang Education есть темы по иконографике, UX-копирайтингу, юзабилити, дизайн-системам и цифровой доступности. Официальная страница в исходных данных недоступна, поэтому ориентироваться можно только на это сохранённое описание программы.