لون رسالة الخطأ: لماذا يفشل #FF0000 وما هي الدرجات الحمراء الثماني البديلة
الأحمر الصافي هو أول لون خطأ يختاره الجميع، وهو الخيار الخاطئ للنص. أربعة حلول، وثمانية ألوان خطأ للوضعين الفاتح والداكن، والكود الذي تسلّمه للمطوّر.
اللون الصحيح لنص الخطأ هو أحمر أغمق، وليس #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، استخدام اللون: يمكن للون أن يدعم الرسالة، لكن لا يكون الوسيلة الوحيدة لإيصالها.
ألوان الخطأ الثمانية، فاتحة وداكنة
اضغط على أي شريحة لنسخ كودها.
| الدور | فاتح | داكن | استخدمه لـ |
|---|---|---|---|
| الخطأ | #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، ينجح ويظل يهتز |
الصف الأخير هو سبب أن أداة الفحص لا تكفي. الأحمر الصافي على الداكن ينجح تقنيًا ومع ذلك يظل خيارًا خاطئًا.
الأسئلة الشائعة
ما لون رسائل الخطأ المناسب؟
أحمر داكن يسهل قراءته بالأحجام الصغيرة، مثل #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 التباين (الحد الأدنى) و1.4.1 استخدام اللون.
- نسب التباين محسوبة بصيغة الإضاءة النسبية في WCAG. الأحمر الصافي والرمادي
#808080إضاءتهما النسبية 0.213 و0.216. - معدل انتشار عمى الألوان من المعهد الوطني للعيون.
- نُشر أولًا كسلسلة شرائح على 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
