एरर मैसेज का रंग: #FF0000 क्यों फेल होता है और इसकी जगह 8 लाल रंग
शुद्ध लाल वह पहला एरर रंग है जो हर कोई चुनता है, और टेक्स्ट के लिए गलत रंग। चार सुधार, हल्के और डार्क मोड के आठ एरर रंग, और डेवलपर को देने वाला कोड।
टेक्स्ट के लिए सही एरर रंग गहरा लाल है, #FF0000 नहीं। शुद्ध लाल भड़कीला दिखता है, फिर भी एरर मैसेज के छोटे साइज़ पर ठीक से पढ़ा नहीं जाता, और डार्क स्क्रीन पर आँखों को चुभता है। यहाँ हैं चार सुधार, लाइट और डार्क मोड के आठ रंग, और डेवलपर को देने वाला कोड।
शुद्ध लाल क्यों फेल होता है
एरर टेक्स्ट के लिए #FF0000 कोई सोचकर नहीं चुनता। वह खुद आ जाता है। हर कलर पिकर की ऊपरी पंक्ति में यही लाल होता है, CSS में red कीवर्ड यही है, नई डिज़ाइन फ़ाइल का पहला स्वैच यही है। नतीजा यह कि वह स्क्रीन की उसी एक लाइन पर पहुँच जाता है जिसे पहली ही बार में सही पढ़ा जाना ज़रूरी है।
शुद्ध लाल चमकीला और गाढ़ा संतृप्त है, इसलिए मज़बूत दिखता है, पर गहरा नहीं है। उसकी लाइटनेस मध्यम ग्रे के करीब है। उसे सफ़ेद पर छोटा रखें तो अक्षरों के किनारे धुल जाते हैं।
समाधान कोई दूसरा रंग नहीं है। वही लाल है, बस इतना गहरा कि टेक्स्ट में वज़न आ जाए।
सुधार 1: टेक्स्ट के लिए लाल को गहरा करें
ईमेल
कृपया सही ईमेल पता दर्ज करें।
✕ सफ़ेद पर #FF0000: पढ़ना कठिन
ईमेल
कृपया सही ईमेल पता दर्ज करें।
✓ सफ़ेद पर #B3261E: आसानी से पढ़ने लायक
वही फ़ील्ड, वही मैसेज, दो लाल। सही वाला Material 3 की लाइट थीम का एरर रंग है, और आपकी नज़र उसी पर टिकती है, भले ही बायाँ वाला ज़्यादा "लाल" लाल हो।
एरर के हर टेक्स्ट के लिए गहरा लाल इस्तेमाल करें: फ़ील्ड के नीचे का मैसेज, लाल होने वाला लेबल, इनलाइन "ज़रूरी" टैग। #FF0000 को टेक्स्ट से पूरी तरह बाहर रखें। अगर आपका ब्रांड रेड शुद्ध लाल के करीब है, तो उसे इलस्ट्रेशन और बड़े डिस्प्ले टाइप के लिए रखें, जहाँ साइज़ वही काम करता है जो छोटे टेक्स्ट में गहराई करती है।
सुधार 2: बैनर को पेंट मत करें, हल्का टिंट दें
✕ #FF0000 पर सफ़ेद: चीख़ता है, फिर भी पढ़ना कठिन
✓ #F6CBC8 पर #410E0B: आसानी से पढ़ने लायक
सफ़ेद टेक्स्ट वाली ठोस लाल पट्टी पेज की सबसे तेज़ चीज़ होती है, फिर भी पढ़ने में कठिन, क्योंकि #FF0000 पर सफ़ेद का कंट्रास्ट उतना ही कमज़ोर है जितना सफ़ेद पर #FF0000 का। रंगों ने जगह बदली, समस्या नहीं बदली।
गहरे लाल टेक्स्ट वाला हल्का लाल कंटेनर अपने रंग से "एरर" कह देता है और शब्दों को पढ़े जाने देता है। तात्कालिकता आइकन और मैसेज से आती है। Material का अपना कंटेनर ज़्यादा फीका #F9DEDC है; हम एक कदम गहरा #F6CBC8 इस्तेमाल करते हैं, क्योंकि फीका गुलाबी डार्क इंटरफ़ेस के पास धुल जाता है।
सुधार 3: डार्क स्क्रीन पर इसे नरम करें
ईमेल
कृपया सही ईमेल पता दर्ज करें।
✕ डार्क पर #FF0000: चुभता है
ईमेल
कृपया सही ईमेल पता दर्ज करें।
✓ डार्क पर #F2B8B5: शांत और साफ़
डार्क मोड सलाह को उलट देता है। लगभग काले पर शुद्ध लाल कंट्रास्ट का न्यूनतम मानक पार कर लेता है, इसलिए चेकर उसे फ़्लैग नहीं करेगा, पर गहरे ग्रे पर संतृप्त लाल के किनारे काँपते से दिखते हैं। Material की डार्क थीम हल्का, नरम एरर लाल #F2B8B5 इस्तेमाल करती है, जो डार्क बैकग्राउंड से वही रिश्ता रखता है जो #B3261E का सफ़ेद से है।
डार्क थीम का आम नियम यही है: जो संतृप्त रंग सफ़ेद पर चलते हैं, वे डार्क पर हल्के और नरम हो जाते हैं। बाकी पैलेट के लिए हमारा पेपर dark mode design देखें।
सुधार 4: इसे ग्रेस्केल में जाँचें
ईमेल
✕ सिर्फ़ बॉर्डर: कौन सा फ़ील्ड गलत है?
ईमेल
कृपया सही ईमेल पता दर्ज करें।
✓ आइकन और शब्द: फिर भी साफ़
शुद्ध लाल और मध्यम ग्रे की लाइटनेस लगभग बराबर होती है, इसलिए जिस फ़ील्ड में एरर का एकमात्र संकेत लाल बॉर्डर है, वह ग्रेस्केल में बाकी फ़ील्ड जैसा ही दिखता है। फ़ॉर्म शिप करने से पहले एक बार अपनी स्क्रीन ग्रेस्केल में कर लें (Mac पर System Settings, Accessibility, Display, Color Filters; यही फ़िल्टर iOS और Android की एक्सेसिबिलिटी डिस्प्ले सेटिंग्स में भी है)।
हर एरर स्टेट में तीन चीज़ें होनी चाहिए:
- एक रंग: लाइट पर गहरा लाल, डार्क पर नरम लाल।
- एक आकार: मैसेज के आगे आइकन, जो रंग के बिना भी दिखे।
- शब्द: क्या गलत हुआ और क्या करना है। "सही ईमेल पता दर्ज करें", "अमान्य इनपुट" से बेहतर है।
यही WCAG 1.4.1 है, रंग का उपयोग: रंग संदेश का सहारा बन सकता है, उसे देने का इकलौता तरीका कभी नहीं।
8 एरर रंग, लाइट और डार्क
कोड कॉपी करने के लिए किसी भी चिप पर टैप करें।
| भूमिका | लाइट | डार्क | कहाँ इस्तेमाल करें |
|---|---|---|---|
| Error | #B3261E | #F2B8B5 | एरर टेक्स्ट, एरर बॉर्डर, एरर आइकन |
| On error | #FFFFFF | #601410 | ठोस एरर फ़िल पर टेक्स्ट, जैसे Delete बटन |
| Error container | #F6CBC8 | #8C1D18 | बैनर, टोस्ट और इनलाइन अलर्ट बॉक्स |
| On error container | #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, न्यूनतम से कम |
| #F6CBC8 पर #410E0B टेक्स्ट | 11.1 से 1 |
| डार्क #141218 पर #F2B8B5 टेक्स्ट | 10.9 से 1 |
| डार्क #141218 पर #FF0000 टेक्स्ट | 4.7 से 1, पास होता है फिर भी चुभता है |
आख़िरी पंक्ति बताती है कि सिर्फ़ चेकर काफ़ी क्यों नहीं है। डार्क पर शुद्ध लाल तकनीकी रूप से पास है, फिर भी गलत चुनाव है।
FAQ
एरर मैसेज का रंग क्या होना चाहिए?
ऐसा गहरा लाल जो छोटे साइज़ पर आसानी से पढ़ा जाए, जैसे सफ़ेद बैकग्राउंड पर #B3261E। इसके साथ आइकन और ऐसा मैसेज रखें जो समस्या ठीक करने का तरीका बताए।
क्या एरर टेक्स्ट के लिए #FF0000 एक्सेसिबल है?
नहीं। सफ़ेद पर शुद्ध लाल का कंट्रास्ट लगभग 4.0 से 1 है, जो बॉडी टेक्स्ट के लिए WCAG की माँग 4.5 से 1 से कम है, और एरर मैसेज आमतौर पर छोटे होते हैं।
Material Design 3 में एरर रंग क्या है?
लाइट थीम में एरर भूमिका #B3261E है जिस पर #FFFFFF आता है, एरर कंटेनर #F9DEDC है और उसका टेक्स्ट #410E0B। डार्क थीम में एरर भूमिका #F2B8B5 है और कंटेनर #8C1D18।
डार्क मोड में एरर का रंग क्या होना चाहिए?
हल्का, नरम लाल जैसे #F2B8B5। डार्क बैकग्राउंड पर शुद्ध लाल कंट्रास्ट जाँच पास कर लेता है, पर चुभता है और पढ़ने में असहज लगता है।
क्या एरर सिर्फ़ रंग से दिखाया जा सकता है?
नहीं। लगभग बारह में से एक पुरुष को किसी न किसी तरह की कलर ब्लाइंडनेस होती है, और WCAG 1.4.1 के अनुसार रंग कभी अकेला संकेत नहीं होना चाहिए। आइकन और शब्द जोड़ें।
स्रोत
- Material Design 3 के बेसलाइन एरर रोल, लाइट और डार्क, Material color roles और 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
