आपके UI के रंग जूनियर क्यों दिखते हैं: सटीक कोड के साथ 6 सुधार
छह रंग की गलतियाँ जो इंटरफ़ेस को जूनियर बना देती हैं, और हर एक का सीनियर समाधान सटीक कोड के साथ: एक ही एक्सेंट, रंग के साथ आइकन और शब्द, टिंटेड एरिया, गहरे एक्सेंट वाला टेक्स्ट, पीले पर गहरा टेक्स्ट, और हर स्टेट के लिए अलग शेड।
जूनियर रंग शायद ही कभी आपस में टकराते हैं। यह छह छोटी आदतें हैं: बहुत सारे एक्सेंट, रंग से अकेले काम लेना, हर जगह फुल-स्ट्रेंथ फ़िल, टेक्स्ट के लिए हल्का ब्रांड रंग, पीले पर सफ़ेद, और हर स्टेट के लिए एक ही शेड। सीनियर रंग शांत दिखते हैं क्योंकि इनमें से हर एक का एक नियम होता है। ये रहे छह नियम, कोड के साथ।
1. एक एक्सेंट, सिर्फ़ एक्शन के लिए
लाल
हरा
एम्बर
बैंगनी
न्यूट्रल
न्यूट्रल
न्यूट्रल
एक्सेंट #6440E0
जब हर एलिमेंट का अपना रंग होता है, तो रंग का कोई मतलब नहीं रह जाता। नज़र को टिकने की जगह नहीं मिलती, और असली एक्शन सजावट से होड़ करने लगता है।
एक एक्सेंट चुनें और उसे सिर्फ़ उसी पर खर्च करें जिस पर लोग कुछ कर सकते हैं: मुख्य बटन, चुना हुआ टैब, लिंक। बाकी सब न्यूट्रल। अगर आप किसी रंगीन एलिमेंट की ओर इशारा करके कह सकते हैं "यह टैप करने की चीज़ नहीं है", तो उसका रंग हटा दें। 60-30-10 नियम यही विचार अनुपात में है: एक्सेंट वह छोटा दस है।
2. रंग, आइकन और शब्द
ईमेल
✕ जूनियर: लाल बॉर्डर और बस
ईमेल
पूरा पता डालें, जैसे sam@mail.com।
✓ सीनियर: रंग, आइकन और शब्द
ईमेल
✕ जूनियर: कौन सा फ़ील्ड गलत है?
ईमेल
पूरा पता डालें, जैसे sam@mail.com।
✓ सीनियर: फिर भी साफ़
उत्तरी यूरोपीय मूल के लगभग 8 प्रतिशत पुरुषों को लाल और हरे में फ़र्क करने में दिक्कत होती है, यानी आम तौर पर बताया जाने वाला "12 में से 1 पुरुष" का आँकड़ा। उनके लिए, और धूप में फ़ोन चलाने वाले हर किसी के लिए, लाल बॉर्डर दरअसल ग्रे बॉर्डर है।
इसलिए एक स्टेट को तीन संकेत चाहिए: एक रंग, आगे एक आइकन, और ऐसे शब्द जो बताएँ कि क्या करना है। यही WCAG 1.4.1 है, रंग का उपयोग: रंग संदेश का समर्थन कर सकता है, उसे देने का एकमात्र तरीका कभी नहीं हो सकता। पूरा एरर पैलेट हमारे पेपर एरर मैसेज का रंग में है।
3. बड़े एरिया को टिंट करें
$4 में Pro लें
ऑफ़लाइन मैप, कोई विज्ञापन नहीं, और ट्रिप शेयरिंग।
अपग्रेड करें✕ जूनियर: पूरा कार्ड फुल रंग में
$4 में Pro लें
ऑफ़लाइन मैप, कोई विज्ञापन नहीं, और ट्रिप शेयरिंग।
अपग्रेड करें✓ सीनियर: टिंट, और फुल रंग बटन पर
फुल-स्ट्रेंथ रंग का बड़ा ब्लॉक शोर करता है, और आपका एक्सेंट खत्म कर देता है। फिर उसके अंदर के बटन के पास उभरने को कुछ नहीं बचता, क्योंकि उसके आसपास सब कुछ पहले से उसी रंग का है।
इसके बजाय बड़े एरिया को टिंट करें, और फुल रंग उस हिस्से के लिए रखें जो काम करता है। यहाँ कार्ड #E6DDFF पर है, उसी बैंगनी का हल्का स्टेप, और बटन पूरा #6440E0 है। बैनर, चुनी हुई पंक्तियों और हाइलाइट सेक्शन के लिए यही तरीका अपनाएँ। हमारा पेपर ब्रांड कलर पैलेट दिखाता है कि एक ही ह्यू से टिंट स्टेप कैसे बनाएँ।
4. एक्सेंट टेक्स्ट को गहरा करें
सफ़ेद पर हल्का बैंगनी
सफ़ेद पर गहरा बैंगनी
हल्का ब्रांड रंग फ़िल के रूप में ठीक है और टेक्स्ट के रूप में कमज़ोर। #9A79FC बटन पर दोस्ताना लगता है और सफ़ेद पर 14 px के लिंक के रूप में बिखर जाता है। समाधान ह्यू रखता है और लाइटनेस घटाता है: #6440E0 वही बैंगनी है, पढ़ने लायक गहरा।
इस फ़ैसले का बचाव करने वाले के लिए: सफ़ेद पर #9A79FC 3.22 से 1 है, जो टेक्स्ट के लिए WCAG की माँग 4.5 से 1 से कम है, और #6440E0 6.27 से 1 है। हमारा पेपर एक्सेसिबल कलर कॉन्ट्रास्ट इन संख्याओं और उन्हें जाँचने का तरीका समझाता है।
हर ब्रांड रंग के दो वर्शन रखें: चमकीला वाला फ़िल और इलस्ट्रेशन के लिए, और गहरा वाला टेक्स्ट और पतले आइकन के लिए।
5. पीले पर गहरा टेक्स्ट
पीले पर सफ़ेद
पीले पर गहरा
पीला और हल्के रंग स्वभाव से चमकीले होते हैं, इसलिए उन पर सफ़ेद की चमक में लगभग कोई अंतर नहीं होता। #FED480 पर सफ़ेद 1.41 से 1 है। उसी पीले पर #161513 जैसा लगभग काला 12.99 से 1 है।
यह नियम हर हल्के फ़िल पर लागू होता है: हल्का पीला, मिंट, आसमानी नीला, पीच। अगर बैकग्राउंड हल्का है, तो टेक्स्ट गहरा। ब्रांड रंग पर सफ़ेद के आदी डिज़ाइनर को यह उल्टा लगता है, और यह बटन को प्रोफ़ेशनल दिखाने के सबसे तेज़ तरीकों में से एक है।
6. हर स्टेट का अपना शेड
डिफ़ॉल्ट
दबाया हुआ
डिसेबल
जो बटन दबाने पर वैसा ही दिखता है जैसा आराम की हालत में, वह कोई फ़ीडबैक नहीं देता, और डिसेबल बटन अगर सक्रिय बटन जैसे रंग का हो तो टूटा हुआ लगता है। हर स्टेट को उसी ह्यू का अपना शेड दें: डिफ़ॉल्ट पर #6440E0, दबाने पर #4422B2, और डिसेबल होने पर #E6DDFF जैसा हल्का टिंट जिस पर पढ़ने लायक #9A79FC लेबल हो।
डिसेबल अकेला स्टेट है जहाँ कम कॉन्ट्रास्ट स्वीकार्य है, और WCAG इसे छूट देता है, फिर भी लेबल इतना पढ़ने लायक होना चाहिए कि लोग समझ सकें कि बटन क्या करता। तीन शेड का यही सेट लिंक, टैब और टॉगल के लिए भी काम करता है।
छह सुधार एक टेबल में
| जूनियर | सीनियर | मान |
|---|---|---|
| कई एक्सेंट | एक्शन के लिए एक एक्सेंट | टैप करने वाली एकमात्र चीज़ पर #6440E0 |
| अकेला रंग | रंग, आइकन और शब्द | कभी एकमात्र संकेत नहीं |
| फुल-रंग एरिया | टिंटेड एरिया | पीछे #E6DDFF, बटन पर #6440E0 |
| टेक्स्ट के रूप में हल्का ब्रांड रंग | गहरा एक्सेंट टेक्स्ट | #6440E0, न कि #9A79FC |
| पीले पर सफ़ेद | पीले पर गहरा टेक्स्ट | #FED480 पर #161513 |
| सभी स्टेट के लिए एक शेड | हर स्टेट का एक शेड | #6440E0, #4422B2, #E6DDFF और #9A79FC लेबल |
FAQ
UI कलर पैलेट को अनाड़ी क्या बनाता है?
बहुत ज़्यादा एक्सेंट, अर्थ बताने के लिए अकेला रंग, बड़े एरिया पर फुल-स्ट्रेंथ फ़िल, और टेक्स्ट के लिए हल्के ब्रांड रंग। इन चारों को ठीक करना आम तौर पर पैलेट बदलने से ज़्यादा मायने रखता है।
UI में कितने एक्सेंट रंग होने चाहिए?
एक। उसे सिर्फ़ उसी के लिए इस्तेमाल करें जिसे लोग टैप कर सकते हैं या जिस पर कुछ कर सकते हैं, और बाकी सब न्यूट्रल रखें। एरर के लिए लाल जैसे स्टेटस रंग अलग हैं, और हमेशा आइकन और शब्दों के साथ आते हैं।
पीले बैकग्राउंड पर कौन सा टेक्स्ट रंग लगता है?
गहरा। #FED480 पर #161513 लगभग 13 से 1 है, जबकि उसी पीले पर सफ़ेद लगभग 1.4 से 1 है। यही किसी भी हल्के बैकग्राउंड पर लागू होता है।
हल्के ब्रांड रंग को टेक्स्ट के रूप में पढ़ने लायक कैसे बनाऊँ?
ह्यू रखें और लाइटनेस घटाएँ। सफ़ेद पर #9A79FC लगभग 3.2 से 1 है, और #6440E0, वही बैंगनी, लगभग 6.3 से 1 है।
दबाए गए बटन का रंग कैसा होना चाहिए?
डिफ़ॉल्ट का गहरा शेड, जैसे #6440E0 के मुकाबले #4422B2। इससे लोगों को फ़ीडबैक मिलता है कि टैप दर्ज हो गया, और ह्यू भी नहीं बदलता।
क्या डिसेबल बटन को कॉन्ट्रास्ट की ज़रूरतें पूरी करनी चाहिए?
WCAG डिसेबल कंट्रोल को न्यूनतम कॉन्ट्रास्ट से छूट देता है, लेकिन लेबल पढ़ने लायक रखें ताकि लोग समझ सकें कि बटन क्या करता है।
स्रोत
- WCAG 2.2, 1.4.3 Contrast (Minimum) (टेक्स्ट के लिए 4.5 से 1, डिसेबल कॉम्पोनेंट को छूट) और 1.4.1 Use of Color।
- अनुपात WCAG रिलेटिव ल्यूमिनेंस फ़ॉर्मूले से निकाले गए: #FFFFFF पर #9A79FC 3.22 से 1, #FFFFFF पर #6440E0 6.27 से 1 (दोनों का ह्यू लगभग 254 डिग्री), #FED480 पर #FFFFFF 1.41 से 1, #FED480 पर #161513 12.99 से 1।
- लाल-हरे रंग की दृष्टि की कमी उत्तरी यूरोपीय मूल के लगभग 8 प्रतिशत पुरुषों को प्रभावित करती है, National Eye Institute के अनुसार।
- स्टेट शेड (दबाने पर #4422B2, डिसेबल पर #9A79FC लेबल के साथ #E6DDFF) हमारे अपने पैलेट के हैं। सेक्शन 1 के फ़िल्टर रंग सिर्फ़ उदाहरण हैं।
- पहली बार UX Brainy पर कैरोसेल के रूप में प्रकाशित।
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
