رنگ پیام موفقیت: چرا #00FF00 شکست می‌خورد و ۸ سبزی که باید به‌جایش بگذارید
سبز خالص اولین رنگ موفقیتی است که همه انتخاب می‌کنند و برای متن انتخاب اشتباهی است. چهار راه‌حل، هشت رنگ موفقیت روشن و تیره از IBM Carbon و کدی که باید به توسعه‌دهنده‌تان بدهید.
رنگ درست برای متن موفقیت یک سبز تیره‌تر است، نه #00FF00. سبز خالص تازه به نظر می‌رسد ولی روی سفید بد خوانده میشود و روی صفحه تیره چشم را میزند. این هم چهار راه‌حل، هشت رنگ موفقیت برای حالت روشن و تیره، و کدی که باید به توسعه‌دهنده‌تان بدهید.
چرا سبز خالص شکست می‌خورد
هیچ‌کس #00FF00 را برای متن موفقیت انتخاب نمی‌کند. خودش از راه می‌رسد. سبز ردیف بالای هر انتخابگر رنگ است، همان lime در CSS قدیمی، اولین سبز در هر فایل طراحی تازه. و آخرش سر خطی می‌نشیند که به کسی میگوید پرداختش انجام شد.
سبز خالص پرنور و اشباع است، برای همین شبیه «برو» به نظر می‌رسد. اما مشکل دقیقاً همین روشنی است. این یکی از روشن‌ترین رنگ‌هایی است که یک صفحه می‌تواند بسازد، و متن روشن روی صفحه روشن چیزی ندارد که به آن چنگ بزند. متن سفید روی #00FF00 و متن #00FF00 روی سفید هر دو با فاصله زیاد از حداقل WCAG برای متن کوچک رد می‌شوند.
راه‌حل یک رنگ‌مایه دیگر نیست. همان سبز است، اما آن‌قدر تیره‌تر شده که متن وزن پیدا کند، و دور از پرسروصداترین سطوح نگه داشته شده است.
سبزهای زیر از سیستم طراحی IBM Carbon آمده‌اند که یک طیف کامل سبز منتشر میکند و برای هر کار از پله مشخصی استفاده میکند.
راه‌حل ۱: سبز را برای متن تیره کنید
رمز عبور جدید
✓ رمز عبور قوی است.
✕ #00FF00 روی سفید: سخت خوانده میشود
رمز عبور جدید
✓ رمز عبور قوی است.
✓ #198038 روی سفید: راحت خوانده میشود
یک فیلد، یک پیام، دو سبز. سبز درست همان green 60 در Carbon است. هنوز واضحاً سبز است و همان چیزی است که چشم شما می‌خواند، هرچند سبز سمت چپ «سبزتر» است.
از سبز تیره‌تر برای هر تکه از متن موفقیت استفاده کنید: خط زیر فیلد، برچسبی که سبز میشود، تگ درون‌خطی «تأیید شد»، و خود آیکن تیک. #00FF00 را کلاً از متن بیرون نگه دارید. اگر سبز برند شما نزدیک سبز خالص است، آن را برای تصویرسازی و تیترهای درشت نگه دارید، جایی که اندازه همان کاری را میکند که تیرگی در متن کوچک میکند.
راه‌حل ۲: بنر را مایه بزنید، بعد متن تیره بگذارید
✕ سفید روی #00FF00: داد میزند و باز هم سخت خوانده میشود
✓ #044317 روی #A7F0BA: راحت خوانده میشود
یک نوار نئونی یکدست با متن سفید پرسروصداترین چیز صفحه است و باز هم سخت خوانده میشود، چون سفید روی #00FF00 همان کنتراست ضعیف #00FF00 روی سفید را دارد. رنگ‌ها جایشان را عوض کردند. مشکل نکرد.
یک محفظه سبز ملایم با متن سبز تیره، «موفقیت» را با رنگش میگوید و اجازه می‌دهد کلمات خوانده شوند. موفقیت خبر خوب است، پس نباید جیغ بزند. سیستم Polaris شاپیفای هم به همین نقطه رسیده: سطح موفقیتش یعنی #CDFED4 متن سبز تیره #014B40 را حمل میکند.
محفظه مایه‌خورده را برای بنرها، توست‌ها و جعبه‌های هشدار درون‌خطی بگذارید. پر کردن یکدست با سبز را برای یک کار نگه دارید: تک دکمه‌ای که اقدام را تأیید میکند، و روی سبزی که آن‌قدر عمیق باشد که تحمل کند، مثل #198038، برچسب تیره یا سفید بگذارید.
راه‌حل ۳: روی صفحه‌های تیره ملایمش کنید
وضعیت سایت
✓ استقرار آماده است.
✕ #00FF00 روی تیره: چشم را میزند
وضعیت سایت
✓ استقرار آماده است.
✓ #42BE65 روی تیره: آرام و واضح
حالت تیره توصیه را برعکس میکند. سبز خالص روی تقریباً سیاه با فاصله زیاد از حداقل کنتراست رد میشود، پس ابزار بررسی ایرادی نمی‌گیرد. باز هم انتخاب اشتباهی است. سبز کاملاً اشباع روی خاکستری تیره می‌درخشد و چشم را خسته میکند، و فهرستی از ده‌تایشان دیدنی نیست.
تم تیره Carbon از سبز ملایمتر و روشن‌تری استفاده میکند، green 40 یعنی #42BE65. روی #161616 بدون خیرگی راحت خوانده میشود. این قاعده کلی تم‌های تیره است: رنگ‌های اشباعی که روی سفید کار می‌کنند، روی تیره روشنتر و ملایمتر می‌شوند. مقاله ما درباره سیستم‌های رنگ حالت تیره بقیه پالت را پوشش می‌دهد و قاعده هم‌خانواده برای خطاها در رنگ پیام خطا است.
راه‌حل ۴: هرگز فقط از رنگ استفاده نکنید
پرداخت ۱
✕ فقط یک نقطه: کدام‌یک انجام شد؟
پرداخت ۱
✓ موفق
✓ تیک و کلمه: هنوز کاملاً روشن است
یک نقطه سبز برای «موفق» و یک نقطه قرمز برای «ناموفق» را در نظر بگیرید. با وزن‌های معمول روشنایی (۰٫۲۹۹ قرمز، ۰٫۵۸۷ سبز، ۰٫۱۱۴ آبی) به خاکستری ببریدشان و تقریباً یکسان از آب درمی‌آیند:
نقطه سبز #198038 در خاکستری
نقطه قرمز #DA1E28 در خاکستری
ستون وضعیت برای کسی که کوررنگی قرمز-سبز دارد همین‌طور به نظر می‌رسد، و تقریباً برای هر کسی که زیر نور آفتاب به صفحه‌ای رنگ‌پریده نگاه میکند. هر حالت موفقیت به سه چیز نیاز دارد:
- یک رنگ: سبز تیره‌تر روی روشن، سبز ملایمتر روی تیره.
- یک شکل: علامت تیک پیش از پیام، که بدون رنگ هم دیده شود.
- کلمات: چه اتفاقی افتاد. «پرداخت دریافت شد» از یک نقطه سبز بهتر است.
این همان WCAG 1.4.1 یعنی استفاده از رنگ است: رنگ می‌تواند از پیام پشتیبانی کند، اما هرگز تنها راه رساندنش نباشد. پیش از انتشار فهرست وضعیت، یک بار صفحه‌تان را خاکستری کنید (در مک: System Settings، Accessibility، Display، Color Filters؛ همین فیلتر در تنظیمات نمایش دسترس‌پذیری iOS و Android هم هست).
۸ رنگ موفقیت، روشن و تیره
روی هر چیپ بزنید تا کدش کپی شود.
| نقش | روشن | تیره | کاربرد |
|---|---|---|---|
| موفقیت | #198038 | #42BE65 | متن موفقیت، آیکن‌های تیک، حاشیه‌های موفقیت |
| روی موفقیت | #FFFFFF | #161616 | متن روی زمینه یکدست موفقیت، مثل دکمه تأیید |
| محفظه موفقیت | #A7F0BA | #044317 | بنرها، توست‌ها و جعبه‌های هشدار درون‌خطی |
| روی محفظه موفقیت | #044317 | #A7F0BA | متن و آیکن‌های داخل آن محفظه‌ها |
تم تیره پالت جدیدی نیست. همان چهار پله از طیف سبز است با نقش‌های جابه‌جا شده: رنگ محفظه به رنگ متن تبدیل میشود و برعکس.
این را به توسعه‌دهنده‌تان بدهید
همان هشت رنگ به‌صورت custom property در CSS، با مقادیر تیره که با تم سیستم عوض می‌شوند:
: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 برود.
یک تله مرتبط: systemGreen در iOS یعنی #34C759 برای متن روی سفید زیادی روشن است. Apple آن را برای سوئیچ‌ها و زمینه‌ها به کار می‌برد، جایی که شکل معنا را می‌رساند. آن را در متن اصلی کپی نکنید.
سوالات متداول
پیامهای موفقیت چه رنگی باشند؟
یک سبز تیره که در اندازههای کوچک راحت خوانده شود، مثل #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 روی سفید ۱٫۳۷:۱؛ #198038 روی سفید ۵٫۰۲:۱؛ #044317 روی #A7F0BA ۸٫۶۹:۱؛ #42BE65 روی #161616 ۷٫۵۷:۱؛ #00FF00 روی #161616 ۱۳٫۱۹:۱). مقادیر خاکستری از وزن‌های روشنایی ۰٫۲۹۹، ۰٫۵۸۷ و ۰٫۱۱۴ استفاده می‌کنند.
- سطح موفقیت Shopify Polaris یعنی #CDFED4 با متن #014B40، از
@shopify/polaris-tokensنسخه 9.4.2. systemGreenدر iOS یعنی #34C759 در برابر سفید سنجیده شده (۲٫۲۲:۱)؛ راهنمای Human Interface 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
