HEX, RGB, HSL, CMYK और टेक्स्ट का कंट्रास्ट कैसे जाँचें

रंग कोड एक ही रंग को अलग तरीके से लिखने का तरीका है। HEX, RGB और HSL एक ही रोशनी को स्क्रीन पर दिखाते हैं, इसलिए राउंडिंग को छोड़कर ये आपस में ठीक-ठीक बदले जा सकते हैं। CMYK कागज़ पर इंक का वर्णन करता है, इसलिए स्क्रीन के मानों से इसका बदलाव केवल अनुमान होता है। WCAG कंट्रास्ट रेशियो एक अलग संख्या है, जो बताती है कि दो रंग कितने अलग-अलग चमकीले हैं, और इसी से तय होता है कि टेक्स्ट पढ़ने लायक है या नहीं। सभी फ़ॉर्मेट एक साथ देखने के लिए कोई रंग रंग कनवर्टर में चिपकाएँ।

रंग कनवर्टरकिसी और फ़ॉर्मैट में रंग चाहिएमुफ़्त में करें

अगर आपको जो रंग चाहिए वह किसी फ़ोटो, लोगो या स्क्रीनशॉट के अंदर है, तो पहले इमेज कलर पिकर से पिक्सल पर से रंग पढ़ें, फिर HEX कोड यहाँ चिपकाएँ। इमेज से सटीक रंग कैसे चुनें में इसके चरण समझाए गए हैं।

HEX और RGB एक ही संख्याएँ हैं

HEX कोड हेक्साडेसिमल अंकों की तीन जोड़ियाँ होता है। #34D6A0 में लाल, हरा और नीला, तीन मान हैं। हर जोड़ी 00 से FF तक की संख्या है, जो दशमलव में 0 से 255 के बराबर है। तो 34 52 है, D6 214 है और A0 160 है, और RGB रूप rgb(52, 214, 160) है।

संख्या को हेक्साडेसिमल में लिखने से केवल उसका रूप बदलता है। शॉर्टहैंड #abc का मतलब #aabbcc है, यानी हर अंक दोहराया जाता है। आठ अंकों वाले कोड के अंत में एक अल्फ़ा जोड़ी जुड़ती है, जो 00 (पूरी तरह पारदर्शी) से FF (पूरी तरह अपारदर्शी) तक होती है, इसलिए #34D6A080 लगभग आधा पारदर्शी है। RGBA वही अल्फ़ा 0 से 1 के बीच की संख्या के रूप में लिखता है।

CSS रंगों के नाम भी स्वीकार करता है। rebeccapurple का मान #663399 है। कनवर्टर नामों को ब्राउज़र के ज़रिए पढ़ता है, इसलिए ब्राउज़र जो भी नाम जानता है, वह काम करेगा।

HSL रंग को उसी तरह बताता है जैसे लोग उसे बताते हैं

HSL का मतलब है रंगत (hue), संतृप्ति (saturation) और चमक (lightness)। रंगत रंग-चक्र पर एक कोण है: लाल 0 डिग्री, हरा 120 और नीला 240 है। संतृप्ति बताती है कि रंग स्लेटी से कितना दूर है, और लाइटनेस बताती है कि वह काले या सफ़ेद से कितना दूर है।

वही #34D6A0, hsl(160, 66%, 52%) है। उसकी रंगत हरे और नीले के बीच है, उसकी संतृप्ति ऊँची है, और उसकी लाइटनेस मध्य-बिंदु से थोड़ी ऊपर है। HSL हाथ से संपादित करने का सबसे आसान रूप है, क्योंकि आप रंगत वही रखकर केवल लाइटनेस बदलते हैं और हल्का या गहरा शेड पा लेते हैं।

HSV, HSL के काफ़ी करीब है, लेकिन लाइटनेस की जगह वैल्यू का इस्तेमाल करता है, यानी सबसे मज़बूत चैनल की चमक। कुछ कलर पिकर इसका इस्तेमाल करते हैं, इसलिए आप इसे दूसरे टूल्स में भी देख सकते हैं। कनवर्टर इसे HSL के बगल में दिखाता है, ताकि आप दोनों की तुलना कर सकें।

CMYK इंक के लिए है, इसलिए यह अनुमान है

स्क्रीन रोशनी जोड़ती हैं: लाल, हरा और नीला मिलकर सफ़ेद बनते हैं। प्रिंटर सफ़ेद कागज़ पर सायन, मैजेंटा, पीला और काली इंक से रोशनी घटाते हैं। दोनों सिस्टम बिल्कुल एक जैसे नहीं मिल सकते, इसलिए CMYK मान हमेशा एक अनुवाद ही होता है।

कनवर्टर सरल फ़ॉर्मूला इस्तेमाल करता है। काला (K) 0 से 1 के पैमाने पर लाल, हरे और नीले मानों में से सबसे बड़े मान को 1 में से घटाकर निकलता है। फिर सायन, मैजेंटा और पीला उसके बाद बचे हिस्से से निकाले जाते हैं। यह फ़ॉर्मूला प्रिंटर की इंक, कागज़ और कलर प्रोफ़ाइल को नज़रअंदाज़ करता है। इसलिए छपा हुआ परिणाम अलग दिखेगा, और बहुत चमकीले रंग CMYK इंक से छपने की सीमा से बाहर भी हो सकते हैं। CMYK मान को प्रिंटर से बात शुरू करने के लिए इस्तेमाल करें, और बड़ी छपाई से पहले प्रूफ़ माँगें।

कंट्रास्ट का संबंध रंगत से नहीं, रोशनी से है

WCAG कंट्रास्ट रेशियो दो रंगों की तुलना उनकी सापेक्ष ल्यूमिनेंस से करता है। ल्यूमिनेंस गामा सुधार के बाद लाल, हरे और नीले मानों से निकाली जाती है, और हरे को सबसे ज़्यादा गिना जाता है, क्योंकि इंसानी आँख उसी पर सबसे ज़्यादा प्रतिक्रिया देती है। हर चैनल को पहले 0 से 255 के पैमाने से बदला जाता है, और ल्यूमिनेंस 0.2126 × लाल + 0.7152 × हरा + 0.0722 × नीला होती है।

रेशियो = (हल्की ल्यूमिनेंस + 0.05) ÷ (गहरी ल्यूमिनेंस + 0.05)। सफ़ेद पर काला 21 से 1 देता है, जो सबसे बड़ा संभव अनुपात है। दो रंग रंगत में काफ़ी अलग दिख सकते हैं और फिर भी उनका रेशियो कम हो सकता है, अगर उनकी लाइटनेस एक जैसी हो। यही स्थिति पकड़ने के लिए यह जाँच बनी है। ऐसे ही कम कंट्रास्ट की वजह से QR कोड स्कैन नहीं होते।

मानक सीमाएँ

WCAG 2.x दो स्तर तय करता है, और उसे किस रेशियो की ज़रूरत है, यह टेक्स्ट के आकार पर निर्भर करता है।

• स्तर AA: सामान्य टेक्स्ट के लिए 4.5 से 1, और बड़े टेक्स्ट के लिए 3 से 1।
• स्तर AAA: सामान्य टेक्स्ट के लिए 7 से 1, और बड़े टेक्स्ट के लिए 4.5 से 1।

बड़ा टेक्स्ट 24 पिक्सल या उससे ज़्यादा का होता है, या 18.66 पिक्सल और बोल्ड। इससे छोटा हर टेक्स्ट सामान्य माना जाता है। सफ़ेद पर स्लेटी टेक्स्ट एक आम गलती है। #777777 जैसा मध्यम स्लेटी सफ़ेद पर लगभग 4.48 से 1 है। यह सामान्य टेक्स्ट के लिए AA में थोड़े से अंतर से फ़ेल होता है, लेकिन बड़े हेडिंग के लिए AA पास कर लेता है।

कनवर्टर रेशियो को दो दशमलव तक गोल करके दिखाता है, लेकिन हर पास या फ़ेल का फ़ैसला सटीक आँकड़े पर होता है। इसलिए 4.50 दिखने वाला मान भी फ़ेल हो सकता है, अगर वह थोड़ा सा कम हो। यह जाँच केवल एक चीज़ मापती है। यह फ़ॉन्ट के वज़न, लाइन की दूरी, या रंग-अंधता वाले लोग किसी डिज़ाइन को कैसे देखते हैं, इसे कवर नहीं करती। इसलिए असली पेज को उसके असली आकार पर भी जाँचें।

टिंट और शेड्स

कनवर्टर के नीचे की पट्टी रंग के चारों ओर नौ चरण दिखाती है: सफ़ेद की ओर मिलाए गए चार टिंट, खुद रंग, और काले की ओर मिलाए गए चार शेड। किसी एक पर क्लिक करने से उसका HEX कोड कॉपी हो जाता है। जब आपको एक ही ब्रांड मान से निकले संबंधित रंगों का सेट चाहिए, जैसे हल्का बैकग्राउंड, होवर स्टेट और गहरा टेक्स्ट रंग, तब यह मदद करता है। इस्तेमाल से पहले हर चुने हुए जोड़े को कंट्रास्ट सेक्शन से जाँच लें।

fixmint के साथ यह कैसे करें

1. रंग वाले बॉक्स में रंग को HEX, RGB, HSL या किसी CSS नाम के रूप में चिपकाएँ, जैसे rebeccapurple।
2. HEX, RGB, HSL, HSV और CMYK वाली पंक्तियाँ पढ़ें। जिसकी ज़रूरत हो, उसके बगल में कॉपी दबाएँ। CMYK को अनुमानित लिखा गया है।
3. बैकग्राउंड में अपना बैकग्राउंड रंग लिखें, या उसके स्वैच का इस्तेमाल करें, और सफ़ेद पर, काले पर और आपके बैकग्राउंड पर वाले रेशियो पढ़ें।
4. हर रेशियो के नीचे चार निशान जाँचें: AA और AAA, दोनों सामान्य और बड़े टेक्स्ट के लिए।
5. टिंट और शेड्स के अंतर्गत कोई स्वैच टैप करके उसे कॉपी करें।

त्वरित उत्तर

क्या CMYK मान सटीक है?

नहीं। यह एक सरल गणितीय रूपांतरण है, जो प्रिंटर, कागज़ और कलर प्रोफ़ाइल को नज़रअंदाज़ करता है। इसे शुरुआती बिंदु मानें और प्रूफ़ माँगें।

क्या कंट्रास्ट रेशियो पास होने से डिज़ाइन सुलभ बन जाता है?

इसका मतलब बस इतना है कि टेक्स्ट के रंग एक मापने योग्य सीमा को पूरा करते हैं। सुलभता आकार, स्पेसिंग, गति और पेज कैसे बना है, इन पर भी निर्भर करती है, इसलिए यह रेशियो एक मार्गदर्शक है, पूरी समीक्षा नहीं।

स्टाइलशीट में कौन-सा फ़ॉर्मेट रखूँ?

वह जिसे आप सबसे आसानी से पढ़ और संपादित कर सकें। HEX छोटा और आम है। HSL हाथ से समायोजित करना आसान है, क्योंकि आप रंगत बदले बिना लाइटनेस बदलते हैं।