Цвет сообщения об ошибке: почему #FF0000 не работает и 8 красных, которые стоит взять вместо него
Чистый красный первым приходит в голову и плохо подходит для текста. Четыре правки, восемь цветов ошибки для светлой и тёмной тем и код, который можно отдать разработчику.
Правильный цвет для текста ошибки это более тёмный красный, а не #FF0000. Чистый красный выглядит громко, но всё равно плохо читается на мелких размерах, которые используют сообщения об ошибках, а на тёмных экранах он «звенит». Ниже четыре правки, восемь цветов для светлой и тёмной темы и код, который можно отдать разработчику.
Почему чистый красный не работает
Никто не выбирает #FF0000 для текста ошибки. Он просто появляется. Это красный из верхней строки любой палитры, ключевое слово red в CSS, первый образец в новом файле дизайна. И в итоге он оказывается в той самой строке экрана, которую нужно прочитать правильно с первого раза.
Чистый красный яркий и насыщенный, поэтому выглядит сильным, но он не тёмный. По светлоте он близок к среднему серому. Поставьте его мелким шрифтом на белое, и буквы теряют чёткие края.
Решение не в другом оттенке. Это тот же красный, только затемнённый, пока у текста не появится вес.
Правка 1: затемните красный для текста
Введите корректный адрес почты.
✕ #FF0000 на белом: плохо читается
Введите корректный адрес почты.
✓ #B3261E на белом: легко читается
То же поле, то же сообщение, два красных. Правый это цвет ошибки светлой темы Material 3, и именно на него падает взгляд, хотя левый «краснее».
Используйте более тёмный красный для любого текста ошибки: сообщения под полем, подписи, которая краснеет, встроенной метки «Обязательно». Уберите #FF0000 из текста полностью. Если ваш фирменный красный близок к чистому, оставьте его для иллюстраций и крупных заголовков, где работу, которую в мелком тексте делает тёмный цвет, делает размер.
Правка 2: подкрашивайте баннер, а не заливайте
✕ Белый на #FF0000: кричит и всё равно плохо читается
✓ #410E0B на #F6CBC8: легко читается
Сплошная красная полоса с белым текстом это самое громкое, что есть на странице, и при этом читается она плохо, потому что у белого на #FF0000 такой же слабый контраст, как у #FF0000 на белом. Цвета поменялись местами, проблема осталась.
Мягкий красный контейнер с тёмно-красным текстом говорит «ошибка» цветом и позволяет прочитать слова. Срочность создают иконка и сообщение. У Material контейнер более бледный, #F9DEDC; мы берём на ступень глубже, #F6CBC8, потому что бледно-розовый выцветает рядом с тёмными элементами интерфейса.
Правка 3: смягчите красный на тёмных экранах
Введите корректный адрес почты.
✕ #FF0000 на тёмном: звенит
Введите корректный адрес почты.
✓ #F2B8B5 на тёмном: спокойно и ясно
Тёмный режим переворачивает совет. Чистый красный на почти чёрном проходит минимум контраста, поэтому проверка его не отметит, но насыщенный красный на тёмно-сером вибрирует по краям. В тёмной теме Material используется светлый мягкий красный, #F2B8B5, который относится к тёмному фону так же, как #B3261E к белому.
Это общее правило для тёмных тем: насыщенные цвета, работающие на белом, на тёмном становятся светлее и мягче. Остальную палитру разбирает наша статья про дизайн тёмного режима.
Правка 4: проверьте в градациях серого
✕ Только рамка: какое поле неверное?
Введите корректный адрес почты.
✓ Иконка и слова: всё равно очевидно
Чистый красный и средне-серый почти одинаковы по светлоте, поэтому поле, у которого единственный сигнал ошибки это красная рамка, в градациях серого выглядит как любое другое. Переключите экран в градации серого хотя бы раз перед выпуском формы (на Mac: Системные настройки, Универсальный доступ, Дисплей, Цветовые фильтры; тот же фильтр есть в настройках экрана для универсального доступа на iOS и Android).
Каждому состоянию ошибки нужны три вещи:
- Цвет: более тёмный красный на светлом, более мягкий на тёмном.
- Форма: иконка перед сообщением, видимая без цвета.
- Слова: что пошло не так и что делать. «Введите корректный адрес почты» лучше, чем «Неверный ввод».
Это WCAG 1.4.1, использование цвета: цвет может поддерживать сообщение, но не быть единственным способом его передать.
8 цветов ошибки, светлая и тёмная темы
Нажмите на любую плашку, чтобы скопировать код.
| Роль | Светлая | Тёмная | Для чего |
|---|---|---|---|
| Ошибка | #B3261E | #F2B8B5 | Текст ошибки, рамки ошибки, иконка ошибки |
| Текст на ошибке | #FFFFFF | #601410 | Текст на сплошной заливке цветом ошибки, например на кнопке «Удалить» |
| Контейнер ошибки | #F6CBC8 | #8C1D18 | Баннеры, тосты и встроенные блоки предупреждений |
| Текст на контейнере ошибки | #410E0B | #F9DEDC | Текст и иконки внутри этих контейнеров |
Отдайте это разработчику
Те же восемь цветов в виде CSS-переменных, тёмные значения включаются по системной теме:
:root {
--color-error: #B3261E;
--color-on-error: #FFFFFF;
--color-error-container: #F6CBC8;
--color-on-error-container: #410E0B;
}
@media (prefers-color-scheme: dark) {
:root {
--color-error: #F2B8B5;
--color-on-error: #601410;
--color-error-container: #8C1D18;
--color-on-error-container: #F9DEDC;
}
}
.field--invalid { border-color: var(--color-error); }
.field__error { color: var(--color-error); }
.alert--error {
background: var(--color-error-container);
color: var(--color-on-error-container);
}
В Material эти роли уже существуют как colorScheme.error, onError, errorContainer и onErrorContainer; единственное отличие от значений по умолчанию это более глубокий светлый контейнер. Везде в других местах эти четыре названия стоит украсть: они не дадут следующему человеку потянуться за #FF0000.
Цифры контраста
WCAG 2 требует не менее 4,5 к 1 для основного текста.
| Пара | Контраст |
|---|---|
| Текст #FF0000 на белом | 4,0 к 1, ниже минимума |
| Текст #B3261E на белом | 6,5 к 1 |
| Белый текст на #FF0000 | 4,0 к 1, ниже минимума |
| Текст #410E0B на #F6CBC8 | 11,1 к 1 |
| Текст #F2B8B5 на тёмном #141218 | 10,9 к 1 |
| Текст #FF0000 на тёмном #141218 | 4,7 к 1, проходит, но всё равно вибрирует |
Последняя строка объясняет, почему проверки недостаточно. Чистый красный на тёмном формально проходит и всё равно остаётся неверным выбором.
FAQ
Какого цвета должны быть сообщения об ошибках?
Тёмно-красного, который легко читается на мелких размерах, например #B3261E на белом фоне. Добавьте иконку и сообщение, которое говорит, как исправить проблему.
Доступен ли #FF0000 для текста ошибки?
Нет. У чистого красного на белом контраст около 4,0 к 1, это ниже 4,5 к 1, которые WCAG требует для основного текста, а сообщения об ошибках обычно мелкие.
Какой цвет ошибки в Material Design 3?
Роль ошибки в светлой теме это #B3261E с #FFFFFF поверх, контейнер ошибки #F9DEDC с текстом #410E0B. В тёмной теме роль ошибки это #F2B8B5, а контейнер #8C1D18.
Какого цвета должны быть ошибки в тёмном режиме?
Более светлого и мягкого красного, например #F2B8B5. Чистый красный проходит проверку контраста на тёмном фоне, но вибрирует и неприятен для чтения.
Можно ли показывать ошибку только цветом?
Нет. Примерно у одного из двенадцати мужчин есть та или иная форма дальтонизма, а WCAG 1.4.1 требует, чтобы цвет никогда не был единственным сигналом. Добавьте иконку и слова.
Источники
- Базовые роли ошибки Material Design 3, светлые и тёмные, из цветовых ролей Material и токенов цвета androidx Compose.
- WCAG 2.2, 1.4.3 Contrast (Minimum) и 1.4.1 Use of Color.
- Коэффициенты контраста рассчитаны по формуле относительной яркости WCAG. Относительная яркость чистого красного и серого #808080 составляет 0,213 и 0,216.
- Распространённость дальтонизма по данным National Eye Institute.
- Впервые опубликовано как карусель в UX Brainy.
Want error states, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
