पाँच रंग-भूमिकाएँ
“डिज़ाइन” और “रंग” में “आपके रंगों का पैलेट” मिलता है। हर रंग का एक काम है: “पृष्ठभूमि” पूरे पेज का आधार है, “सतह” वह सब कुछ जो उस पर रखा होता है — कार्ड, बॉक्स, फ़ील्ड। “टेक्स्ट का रंग” मुख्य टेक्स्ट के लिए है, “एक्सेंट रंग” बटनों, लिंक और हर उस चीज़ के लिए जिससे कोई क्रिया होती है। “बटनों पर टेक्स्ट” एक्सेंट पर लिखे लेबल का रंग है; अगर आप इसे खाली छोड़ते हैं, तो हम इसे इस तरह निकालते हैं कि यह पढ़ने योग्य हो।
आप किसी रंग को उसके कलर स्वॉच पर क्लिक करके सेट करते हैं या उसके नीचे उसका Hex मान टाइप करते हैं, जैसे #8A4B2E, और Enter से पुष्टि करते हैं। डैश वाली स्वॉच का मतलब है: अभी सेट नहीं है, टेम्पलेट तय करता है। सेट किए गए रंग के बगल का × उसे फिर से मुक्त कर देता है, और हर भूमिका के बगल का छोटा i उसे एक वाक्य में समझाता है।
- “डिज़ाइन” खोलें और “रंग” चुनें।
- किसी भूमिका के कलर स्वॉच पर क्लिक करें या उसका Hex मान टाइप करें।
- प्रीव्यू में देखें — सहेजना अपने आप होता है।
कलर व्हील पर संयोजन
“रंगों के मेल खोजें” कलर व्हील खोलता है। इसका बड़ा बिंदु “आधार रंग” है, और वही आपका एक्सेंट रंग है: व्हील पर आप जो चुनते हैं, वह तुरंत एक्सेंट रंग के रूप में सहेजा जाता है। आप बिंदु को माउस या उँगली से खींचते हैं; जब उस पर फ़ोकस हो, तो ऐरो कुंजियाँ भी काम करती हैं, और Shift के साथ बड़े कदमों में। नीचे का “चमक” स्लाइडर रंग को हल्का या गहरा करता है।
उसके बगल में आप एक “सामंजस्य” चुनते हैं: “समरूप”, “एकवर्णी”, “पूरक”, “विभाजित पूरक”, “त्रिक”, “वर्ग”, “शेड्स” या “अपने चित्र”। नीचे का “पैलेट” मेल खाते रंगों को उनके Hex मान के साथ दिखाता है; किसी रंग के नीचे “इस रूप में…” उसे किसी एक भूमिका पर लगाता है।
“ब्रांड पर लागू करें” पूरे पैलेट को एक साथ बाँट देता है: आधार रंग एक्सेंट के रूप में, साथ में एक हल्की पृष्ठभूमि, एक हल्की सतह, एक गहरा टेक्स्ट रंग और काले या सफ़ेद रंग में बटन का टेक्स्ट — पठनीयता को ध्यान में रखकर निकाला गया। इसके बाद आप हर भूमिका को अलग-अलग बदल सकते हैं।
- “रंग” में “रंगों के मेल खोजें” खोलें।
- बड़े बिंदु को अपने मुख्य रंग पर खींचें और एक सामंजस्य चुनें।
- “ब्रांड पर लागू करें” पर क्लिक करें।
पठनीयता
पैलेट के नीचे “पठनीयता” बॉक्स चार रंग-जोड़ियों को मापता है: “पृष्ठभूमि पर टेक्स्ट”, “सतह पर टेक्स्ट”, “बटनों पर टेक्स्ट” और “पृष्ठभूमि पर एक्सेंट” — WCAG के अनुसार, कम से कम 4.5:1। हर जोड़ी अपना कंट्रास्ट और शब्दों में एक निर्णय दिखाती है: “बहुत अच्छी तरह पढ़ने योग्य”, “अच्छी तरह पढ़ने योग्य”, “बस इतना — पढ़ना मुश्किल” या “पढ़ने योग्य नहीं”। जिस जोड़ी का कोई रंग अभी सेट नहीं है, उसे मापा नहीं जाता।
अगर कोई जोड़ी पढ़ने योग्य नहीं है, तो चेतावनी दोनों रंगों पर दिखती है (“इससे बहुत कम कंट्रास्ट: …”) और बॉक्स में हर टूल पर उसका असर दिखता है। “यहाँ बदला जाता है: …” का मतलब है कि वह टूल वहाँ आपके रंग की जगह एक पढ़ने योग्य रंग दिखाता है — वेबसाइट, फ़ॉर्म और WordPress काला या सफ़ेद, और शॉप पहले अपना खुद का रंग। “यहाँ ऐसे ही रहता है: …” का मतलब है कि टूल ठीक आपके ही रंग दिखाता है, भले ही वे पढ़ने में कठिन हों।
उसके नीचे फिर “ऐसे पढ़ने योग्य बनेगा” दिखता है: तीन तक तैयार पैलेट, जिनमें हर जोड़ी पास होती है। हम सभी जोड़ियों की गणना एक साथ करते हैं, ताकि कोई सुधार किसी दूसरी जोड़ी को न बिगाड़े — हर रंग सिर्फ़ हल्का या गहरा होता है और अपनी रंगत बनाए रखता है; बटनों पर टेक्स्ट आपका ही रंग रहता है या काला या सफ़ेद हो जाता है। एक छोटा प्रीव्यू हर सुझाव के लिए चारों जोड़ियाँ दिखाता है, और बगल में लिखा होता है कि कौन-सा रंग कैसे बदलता है। “लागू करें” पैलेट को आपके ब्रांड पर लागू करता है, “पूर्ववत करें” आपके रंग वापस लाता है।
पढ़ने योग्य रंग सभी की मदद करते हैं: कम देख पाने वाले लोगों की, और उन सभी की जो धूप में फ़ोन देखते हैं।
कंट्रास्ट की विस्तार से जाँच करना
“कंट्रास्ट की विस्तार से जाँच करें” एक जोड़ी को बारीकी से जाँचता है। ऊपर आप जोड़ी चुनते हैं; उसका अनुपात बड़े आकार में दिखता है, जैसे 5.20 : 1। नीचे फ़ोरग्राउंड और बैकग्राउंड हैं, दोनों के साथ एक कलर स्वॉच और एक “चमक” स्लाइडर — यहाँ आप जो बदलते हैं, उससे आपके ब्रांड का रंग बदलता है।
तालिका दिखाती है कि जोड़ी कौन-से स्तर पार करती है: “बड़ा टेक्स्ट”, “छोटा टेक्स्ट” और “ग्राफ़िक्स और UI”, हर एक AA और AAA के लिए “पास” या “फेल” के साथ। मुख्य टेक्स्ट को 4.5:1 चाहिए, बड़े शीर्षकों को 3:1; पृष्ठभूमि के बगल में एक्सेंट के लिए 3:1 काफ़ी है। बगल में आप जोड़ी को शीर्षक और पैराग्राफ़ वाले एक छोटे पेज के रूप में देखते हैं।
अगर कंट्रास्ट काफ़ी नहीं है, तो “सुझाव — वही रंग, बस हल्का या गहरा” दिखते हैं: एक क्लिक सुझाए गए रंग को भूमिका पर लागू कर देता है। अगर उस रंगत से बिल्कुल बात नहीं बनती, तो बॉक्स बताता है कि आपको दोनों में से एक रंग फिर से चुनना होगा।
- “रंग” में “कंट्रास्ट की विस्तार से जाँच करें” खोलें।
- ऊपर वह जोड़ी चुनें जो पढ़ने योग्य नहीं है।
- किसी सुझाव पर क्लिक करें या “चमक” स्लाइडर को तब तक खींचें जब तक “पास” न दिखे।