Цвет сообщения об успехе: почему #00FF00 не работает и 8 зелёных, которые стоит взять вместо него
Чистый зелёный первым приходит в голову для успеха и совсем не годится для текста. Четыре правки, восемь светлых и тёмных цветов успеха из IBM Carbon и код, который можно отдать разработчику.
Правильный цвет успеха для текста: более тёмный зелёный, а не #00FF00. Чистый зелёный выглядит свежо, но на белом читается плохо, а на тёмном экране слепит. Вот четыре правки, восемь цветов успеха для светлой и тёмной темы и код, который можно отдать разработчику.
Почему чистый зелёный не работает
Никто не выбирает #00FF00 для текста успеха. Он просто появляется. Это зелёный из верхнего ряда любого пикера цвета, lime из старого CSS, первый зелёный в новом файле дизайна. И вот он оказывается на строке, которая сообщает человеку, что его платёж прошёл.
Чистый зелёный яркий и насыщенный, поэтому выглядит как «вперёд». Но яркость и есть проблема. Это один из самых светлых цветов, которые способен выдать экран, а светлому тексту на светлой странице не за что зацепиться. Белый текст на #00FF00 и текст #00FF00 на белом одинаково с большим запасом проваливают минимум WCAG для мелкого текста.
Решение не в другом оттенке. Это тот же зелёный, только затемнённый, пока у текста не появится вес, и убранный с самых громких поверхностей.
Зелёные ниже взяты из дизайн-системы IBM Carbon: она публикует полную шкалу зелёного и использует конкретные ступени для конкретных задач.
Правка 1: затемните зелёный для текста
Новый пароль
✓ Пароль надёжный.
✕ #00FF00 на белом: плохо читается
Новый пароль
✓ Пароль надёжный.
✓ #198038 на белом: легко читается
То же поле, то же сообщение, два зелёных. Правильный из них это green 60 из Carbon. Он всё ещё явно зелёный, и именно его читает глаз, хотя левый «зеленее».
Используйте тёмный зелёный для любого текста успеха: строка под полем, подпись, которая становится зелёной, встроенный тег «Подтверждено», сама иконка галочки. Совсем уберите #00FF00 из текста. Если фирменный зелёный близок к чистому, оставьте его для иллюстраций и крупных заголовков, где работу, которую в мелком тексте делает тёмный цвет, выполняет размер.
Правка 2: подкрасьте баннер и используйте тёмный текст
✕ Белый на #00FF00: кричит и всё равно плохо читается
✓ #044317 на #A7F0BA: легко читается
Сплошная неоновая полоса с белым текстом это самое громкое, что есть на странице, и при этом она плохо читается: у белого на #00FF00 тот же слабый контраст, что и у #00FF00 на белом. Цвета поменялись местами. Проблема осталась.
Мягкий зелёный контейнер с тёмно-зелёным текстом говорит «успех» своим цветом и позволяет прочитать слова. Успех это хорошая новость, ей не нужно орать. Система Polaris от Shopify приходит к тому же: её поверхность успеха #CDFED4 несёт тёмно-зелёный текст #014B40.
Используйте подкрашенный контейнер для баннеров, тостов и встроенных блоков уведомлений. Сплошную зелёную заливку оставьте для одного: единственной кнопки, подтверждающей действие, и ставьте на достаточно глубокий зелёный, например #198038, тёмную или белую подпись.
Правка 3: смягчите зелёный на тёмных экранах
Статус сайта
✓ Деплой готов.
✕ #00FF00 на тёмном: слепит
Статус сайта
✓ Деплой готов.
✓ #42BE65 на тёмном: спокойно и чётко
Тёмная тема переворачивает совет. Чистый зелёный на почти чёрном проходит минимум контраста с огромным запасом, поэтому проверка его не отметит. Но выбор всё равно неверный. Полностью насыщенный зелёный на тёмно-сером светится и утомляет глаз, а список из десяти таких на него просто больно смотреть.
Тёмная тема Carbon использует более мягкий и светлый зелёный, green 40, #42BE65. На #161616 он легко читается без слепящего эффекта. Это общее правило для тёмных тем: насыщенные цвета, которые работают на белом, на тёмном становятся светлее и мягче. Остальную палитру разбирает наша статья о цветовых системах тёмного режима, а парное правило для ошибок есть в материале цвет сообщения об ошибке.
Правка 4: никогда не полагайтесь только на цвет
Платёж 1
✕ Только точка: какой из них прошёл?
Платёж 1
✓ Выполнено
✓ Галочка и слово: всё очевидно
Возьмите зелёную точку для «Выполнено» и красную для «Ошибка». Переведите их в градации серого с обычными весами яркости (0,299 красного, 0,587 зелёного, 0,114 синего), и они получатся почти одинаковыми:
Зелёная точка #198038 в сером
Красная точка #DA1E28 в сером
Именно так столбец статусов выглядит для человека с красно-зелёной цветовой слепотой и примерно для любого, кто смотрит на выцветший экран на солнце. У каждого состояния успеха должны быть три вещи:
- Цвет: более тёмный зелёный на светлом, более мягкий на тёмном.
- Форма: галочка перед сообщением, видимая без цвета.
- Слова: что произошло. «Платёж получен» лучше зелёной точки.
Это WCAG 1.4.1, использование цвета: цвет может поддерживать сообщение, но не быть единственным способом его передать. Один раз переключите экран в градации серого, прежде чем выпускать список статусов (на Mac: Системные настройки, Универсальный доступ, Дисплей, Цветовые фильтры; такой же фильтр есть в настройках экрана универсального доступа на iOS и Android).
8 цветов успеха, светлых и тёмных
Нажмите на любую плашку, чтобы скопировать код.
| Роль | Светлая | Тёмная | Для чего |
|---|---|---|---|
| Успех | #198038 | #42BE65 | Текст успеха, иконки галочек, рамки успеха |
| На успехе | #FFFFFF | #161616 | Текст на сплошной заливке успеха, например на кнопке «Подтвердить» |
| Контейнер успеха | #A7F0BA | #044317 | Баннеры, тосты и встроенные блоки уведомлений |
| На контейнере успеха | #044317 | #A7F0BA | Текст и иконки внутри этих контейнеров |
Тёмная тема это не новая палитра. Это те же четыре ступени шкалы зелёного с поменявшимися ролями: цвет контейнера становится цветом текста и наоборот.
Отдайте это разработчику
Те же восемь цветов в виде CSS custom properties, где тёмные значения включаются по системной теме:
:root {
--color-success: #198038;
--color-on-success: #FFFFFF;
--color-success-container: #A7F0BA;
--color-on-success-container: #044317;
}
@media (prefers-color-scheme: dark) {
:root {
--color-success: #42BE65;
--color-on-success: #161616;
--color-success-container: #044317;
--color-on-success-container: #A7F0BA;
}
}
.field--valid { border-color: var(--color-success); }
.field__hint--valid { color: var(--color-success); }
.alert--success {
background: var(--color-success-container);
color: var(--color-on-success-container);
}
.alert--success::before { content: "✓ "; }
В Carbon на шкале зелёного это green 60, green 40, green 20 и green 80. Какую бы систему вы ни использовали, четыре названия ролей стоит украсть: они не дадут следующему человеку потянуться за #00FF00.
Одна родственная ловушка: iOS systemGreen, #34C759, слишком светлый для текста на белом. Apple использует его для переключателей и заливок, где смысл несёт форма. Не копируйте его в основной текст.
FAQ
Какого цвета должны быть сообщения об успехе?
Тёмно-зелёного, который легко читается в мелком размере, например #198038 на белом фоне. Добавьте галочку и слово, которое говорит, что произошло.
Подходит ли #00FF00 для текста успеха с точки зрения доступности?
Нет. Чистый зелёный на белом с большим запасом не проходит минимум контраста WCAG для основного текста. Используйте более тёмный зелёный, например #198038.
Какой зелёный хорош для баннера успеха?
Подкрасьте заливку бледно-зелёным вроде #A7F0BA и поставьте на неё тёмно-зелёный текст #044317. Эта пара легко читается и не кричит.
Каким должен быть цвет успеха в тёмном режиме?
Более мягким и светлым зелёным, например #42BE65 на #161616. Чистый зелёный проходит проверку контраста на тёмном фоне, но слепит и утомляет глаз.
Можно ли показывать успех только цветом?
Нет. Зелёная и красная точки в градациях серого выглядят одинаково, а WCAG 1.4.1 требует, чтобы цвет никогда не был единственным сигналом. Добавьте галочку и слово вроде «Выполнено» или «Ошибка».
Источники
- Дизайн-система IBM Carbon, обзор цвета: green 60 #198038, green 40 #42BE65, green 20 #A7F0BA, green 80 #044317 и gray 100 #161616.
- WCAG 2.2, 1.4.3 Contrast (Minimum) и 1.4.1 Use of Color.
- Контраст проверен по формуле относительной яркости WCAG (белый на #00FF00 и #00FF00 на белом 1,37:1; #198038 на белом 5,02:1; #044317 на #A7F0BA 8,69:1; #42BE65 на #161616 7,57:1; #00FF00 на #161616 13,19:1). Значения серого используют веса яркости 0,299, 0,587, 0,114.
- Поверхность успеха Shopify Polaris #CDFED4 с текстом #014B40, из
@shopify/polaris-tokens9.4.2. - iOS systemGreen #34C759 в сравнении с белым (2,22:1); см. Human Interface Guidelines по цвету от Apple.
- Форма пароля, чек на mia@brainy.ink, деплой brainy-site и список платежей это вымышленные примеры, созданные для этой страницы.
- Впервые опубликовано как карусель в UX Brainy.
Want success, error and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
