رنگ پیام خطا: چرا #FF0000 شکست می‌خورد و ۸ قرمزی که باید جایگزینش کنید
قرمز خالص اولین رنگ خطایی است که همه انتخاب می‌کنند و برای متن انتخاب اشتباهی است. چهار راه‌حل، هشت رنگ خطا برای حالت روشن و تیره، و کدی که باید به توسعه‌دهنده بدهید.
رنگ درست برای متن خطا یک قرمز تیره‌تر است، نه #FF0000. قرمز خالص پرسروصدا به نظر می‌رسد ولی در اندازههای کوچکی که پیامهای خطا دارند بد خوانده میشود و روی صفحه‌های تیره میلرزد. اینجا چهار راه‌حل، هشت رنگ برای حالت روشن و تیره، و کدی را می‌بینید که باید به توسعه‌دهنده‌تان بدهید.
چرا قرمز خالص شکست می‌خورد
هیچ‌کس #FF0000 را برای متن خطا انتخاب نمی‌کند. خودش از راه می‌رسد. قرمزِ ردیف بالای هر انتخابگر رنگ است، کلیدواژه red در CSS است، اولین نمونه رنگ در هر فایل طراحی جدید است. برای همین سر از همان خطی درمی‌آورد که باید بار اول درست خوانده شود.
قرمز خالص روشن و اشباع است، پس قوی به نظر می‌رسد، اما تیره نیست. روشنایی‌اش به خاکستری متوسط نزدیک است. آن را کوچک روی سفید بگذارید، لبه‌های حروف محو می‌شوند.
راه‌حل، رنگ‌مایه‌ی دیگری نیست. همان قرمز است که آن‌قدر تیره‌ترش می‌کنیم تا متن وزن پیدا کند.
راه‌حل ۱: قرمز را برای متن تیره کنید
ایمیل
یک نشانی ایمیل معتبر وارد کنید.
✕ #FF0000 روی سفید: خواندنش سخت است
ایمیل
یک نشانی ایمیل معتبر وارد کنید.
✓ #B3261E روی سفید: راحت خوانده میشود
یک فیلد، یک پیام، دو قرمز. قرمز درست رنگ خطای تم روشن Material 3 است و چشم شما به همان می‌افتد، با اینکه قرمز سمت چپ «قرمزتر» است.
از قرمز تیره‌تر برای هر تکه متن خطا استفاده کنید: پیام زیر فیلد، برچسبی که قرمز میشود، تگ درون‌خطی «الزامی». #FF0000 را کاملاً از متن بیرون بگذارید. اگر قرمز برندتان به قرمز خالص نزدیک است، آن را برای تصویرسازی و تیترهای درشت نگه دارید، جایی که اندازه همان کاری را میکند که تیرگی در متن کوچک میکند.
راه‌حل ۲: بنر را رنگ‌مایه بزنید، رنگ‌آمیزی نکنید
✕ سفید روی #FF0000: داد می‌زند، باز هم سخت خوانده میشود
✓ #410E0B روی #F6CBC8: راحت خوانده میشود
نوار قرمز یکدست با متن سفید پرسروصداترین چیز صفحه است و باز هم سخت خوانده میشود، چون سفید روی #FF0000 همان کنتراست ضعیفِ #FF0000 روی سفید را دارد. رنگ‌ها جایشان را عوض کردند، مشکل نه.
کانتینر قرمز ملایم با متن قرمز تیره با رنگش میگوید «خطا» و می‌گذارد کلمات خوانده شوند. فوریت از آیکون و پیام می‌آید. کانتینر خود Material رنگ کم‌رنگ‌تر #F9DEDC است؛ ما یک پله پررنگ‌تر، #F6CBC8، را به کار می‌بریم چون صورتیِ کم‌رنگ‌تر کنار عناصر تیره رابط محو میشود.
راه‌حل ۳: روی صفحه‌های تیره ملایمش کنید
ایمیل
یک نشانی ایمیل معتبر وارد کنید.
✕ #FF0000 روی تیره: میلرزد
ایمیل
یک نشانی ایمیل معتبر وارد کنید.
✓ #F2B8B5 روی تیره: آرام و واضح
حالت تیره توصیه را برعکس میکند. قرمز خالص روی سیاهِ نزدیک حداقل کنتراست را رد میکند، پس ابزار بررسی ایرادی نمی‌گیرد، اما قرمز اشباع روی خاکستری تیره در لبه‌ها ارتعاش دارد. تم تیره Material از قرمز خطای روشن و ملایم #F2B8B5 استفاده میکند که همان رابطه‌ای را با پسزمینه تیره دارد که #B3261E با سفید دارد.
این قاعده کلی تم‌های تیره است: رنگ‌های اشباعی که روی سفید کار می‌کنند، روی تیره روشنتر و ملایمتر می‌شوند. مقاله ما درباره طراحی حالت تیره بقیه پالت را پوشش می‌دهد.
راه‌حل ۴: آن را در مقیاس خاکستری بررسی کنید
ایمیل
✕ فقط کادر: کدام فیلد اشتباه است؟
ایمیل
یک نشانی ایمیل معتبر وارد کنید.
✓ آیکون و کلمات: هنوز کاملاً واضح
قرمز خالص و خاکستری متوسط تقریباً روشنایی یکسانی دارند، پس فیلدی که تنها نشانه خطایش کادر قرمز است، در مقیاس خاکستری مثل بقیه فیلدها دیده میشود. پیش از انتشار یک فرم، یک بار صفحه را روی مقیاس خاکستری بگذارید (در مک: System Settings، Accessibility، Display، Color Filters؛ همین فیلتر در تنظیمات نمایشی دسترس‌پذیری iOS و Android هم هست).
هر حالت خطا به سه چیز نیاز دارد:
- یک رنگ: قرمز تیره‌تر روی روشن، قرمز ملایمتر روی تیره.
- یک شکل: آیکونی پیش از پیام که بدون رنگ هم دیده شود.
- کلمات: چه چیزی خراب شد و چه باید کرد. «یک نشانی ایمیل معتبر وارد کنید» از «ورودی نامعتبر» بهتر است.
این همان WCAG 1.4.1 یعنی استفاده از رنگ است: رنگ می‌تواند پیام را پشتیبانی کند، اما هرگز تنها راه رساندنش نباشد.
۸ رنگ خطا، روشن و تیره
روی هر چیپ بزنید تا کدش کپی شود.
| نقش | روشن | تیره | کاربرد |
|---|---|---|---|
| خطا | #B3261E | #F2B8B5 | متن خطا، کادرهای خطا، آیکون خطا |
| روی خطا | #FFFFFF | #601410 | متن روی زمینه یکدست خطا، مثل دکمه حذف |
| کانتینر خطا | #F6CBC8 | #8C1D18 | بنرها، توست‌ها و جعبه‌های هشدار درون‌خطی |
| روی کانتینر خطا | #410E0B | #F9DEDC | متن و آیکون‌های داخل آن کانتینرها |
این را به توسعه‌دهنده بدهید
همان هشت رنگ به صورت custom propertyهای 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 برای متن بدنه حداقل ۴٫۵ به ۱ می‌خواهد.
| جفت رنگ | کنتراست |
|---|---|
متن #FF0000 روی سفید | ۴٫۰ به ۱، زیر حداقل |
متن #B3261E روی سفید | ۶٫۵ به ۱ |
متن سفید روی #FF0000 | ۴٫۰ به ۱، زیر حداقل |
متن #410E0B روی #F6CBC8 | ۱۱٫۱ به ۱ |
متن #F2B8B5 روی تیره #141218 | ۱۰٫۹ به ۱ |
متن #FF0000 روی تیره #141218 | ۴٫۷ به ۱، قبول میشود و باز هم میلرزد |
ردیف آخر دلیل این است که ابزار بررسی کافی نیست. قرمز خالص روی تیره از نظر فنی قبول میشود و باز هم انتخاب اشتباهی است.
سوالات متداول
پیامهای خطا چه رنگی باشند؟
قرمز تیرهای که در اندازههای کوچک راحت خوانده شود، مثل #B3261E روی پسزمینه سفید. آن را با یک آیکون و پیامی که میگوید مشکل چطور حل میشود همراه کنید.
آیا #FF0000 برای متن خطا دسترس‌پذیر است؟
نه. قرمز خالص روی سفید کنتراستی حدود ۴٫۰ به ۱ دارد، کمتر از ۴٫۵ به ۱ که 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روشنایی نسبی ۰٫۲۱۳ و ۰٫۲۱۶ دارند. - شیوع کوررنگی از 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
