Contrast Checker: WCAG कलर रेशियो टूल

Contrast Checker क्या है?

Contrast Checker WCAG 2.1 एक्सेसिबिलिटी मानकों की जांच करने के लिए फ़ोरग्राउंड और बैकग्राउंड कलर के बीच ल्यूमिनेंस-आधारित कंट्रास्ट रेशियो की गणना करता है। यह सभी चार अनुपालन सीमाओं के विरुद्ध परीक्षण करता है: नॉर्मल टेक्स्ट के लिए AA और AAA, और लार्ज टेक्स्ट के लिए AA और AAA। टूल एक लाइव टेक्स्ट प्रीव्यू दिखाता है ताकि आप बिल्कुल देख सकें कि पाठक क्या अनुभव करेंगे। एक्सेसिबिलिटी ऑडिटर, UI डिज़ाइनर और फ्रंट-एंड डेवलपर किसी भी नए कलर कॉम्बिनेशन को प्रोडक्शन में शिप करने से पहले इसका उपयोग कंट्रास्ट फेलियर से बचने के लिए करते हैं। सब कुछ ब्राउज़र में चलता है — कोई सर्वर कॉल नहीं, कोई लॉगिन नहीं।

मुख्य विशेषताएं

• WCAG 2.1 कंट्रास्ट रेशियो कैलकुलेशन — ऑफिशियल WCAG टूलिंग के अनुरूप परिणाम देने के लिए स्टैंडर्ड रिलेटिव ल्यूमिनेंस फ़ॉर्मूला (0.03928 लिनियराइज़ेशन थ्रेशोल्ड और (L1 + 0.05) / (L2 + 0.05) रेशियो फ़ॉर्मूला के साथ) का उपयोग करता है।
• AA और AAA अनुपालन जांच — चार अनुपालन बैज रियल-टाइम में अपडेट होते हैं: Normal AA (≥ 4.5:1), Normal AAA (≥ 7:1), Large AA (≥ 3:1), और Large AAA (≥ 4.5:1)। चेकमार्क वाला हरा बैज पास का मतलब है; X वाला लाल बैज फेल का मतलब है।
• नॉर्मल और लार्ज टेक्स्ट थ्रेशोल्ड — टूल नॉर्मल टेक्स्ट और लार्ज टेक्स्ट (18pt या 14pt बोल्ड के रूप में परिभाषित) के लिए अलग-अलग थ्रेशोल्ड लागू करता है, जो WCAG 2.1 सक्सेस क्राइटेरिया 1.4.3 के अनुरूप है।
• सैंपल टेक्स्ट के साथ रियल-टाइम प्रीव्यू — प्रीव्यू कार्ड आपके चुने हुए रंगों में एक हेडिंग, बॉडी पैराग्राफ, स्मॉल टेक्स्ट और एक बटन दिखाता है, ताकि आप एक नज़र में पठनीयता का मूल्यांकन कर सकें।
• कंट्रास्ट रेशियो क्लिपबोर्ड पर कॉपी करें — रेशियो डिस्प्ले के बगल में कॉपी आइकन पर क्लिक करके रेशियो स्ट्रिंग (जैसे 4.53:1) क्लिपबोर्ड पर लिखें और चेक को हिस्ट्री में लॉग करें।
• लोड के बाद ऑफलाइन काम करता है — सभी रेशियो कैलकुलेशन JavaScript में बिना किसी बाहरी API कॉल के इम्प्लीमेंट की गई हैं।

Contrast Checker का उपयोग कैसे करें

चरण 1: फ़ोरग्राउंड कलर सेट करें

Contrast Checker पर जाएं। टूल फ़ोरग्राउंड के रूप में काले (#000000) और बैकग्राउंड के रूप में सफ़ेद (#FFFFFF) के साथ खुलता है — एक 21:1 रेशियो जो सभी चार WCAG स्तर पास करता है।

फ़ोरग्राउंड (टेक्स्ट) कलर सेट करें:

• कलर स्वॉच (रंगीन वर्ग) पर क्लिक करके नेटिव ब्राउज़र कलर पिकर खोलें
• स्वॉच के बगल में टेक्स्ट इनपुट में सीधे हेक्स कोड टाइप करें (जैसे #1E293B)

स्वॉच और टेक्स्ट इनपुट दोनों सिंक्रोनाइज़ रहते हैं। इनपुट के नीचे प्रीव्यू स्वॉच ऑटो-कंट्रास्टिंग लेबल टेक्स्ट के साथ कलर दिखाता है।

चरण 2: बैकग्राउंड कलर सेट करें

बैकग्राउंड कलर सेट करने के लिए कलर इनपुट कार्ड के दाईं ओर समान कंट्रोल का उपयोग करें। टूल तीन-कॉलम लेआउट का उपयोग करता है: बाईं ओर फ़ोरग्राउंड, बीच में एक स्वैप बटन और दाईं ओर बैकग्राउंड।

चरण 3: कंट्रास्ट रेशियो और अनुपालन बैज पढ़ें

कंट्रास्ट रेशियो कार्ड इनपुट के नीचे दिखाई देता है और दिखाता है:

• बड़े पिक्सल-आर्ट टाइप में कैलकुलेटेड रेशियो (जैसे 7.23:1)
• रेशियो स्ट्रिंग कॉपी करने के लिए एक कॉपी आइकन
• चार अनुपालन बैज: Normal AA (≥ 4.5:1), Normal AAA (≥ 7:1), Large AA (≥ 3:1), Large AAA (≥ 4.5:1)

चेकमार्क आइकन वाला हरा बैज दर्शाता है कि कॉम्बिनेशन उस स्तर को पास करता है। X वाला लाल बैज फेलियर दर्शाता है। सभी बॉडी टेक्स्ट के लिए कम से कम Normal AA का लक्ष्य रखें।

चरण 4: लाइव प्रीव्यू जांचें

प्रीव्यू कार्ड तक स्क्रॉल करें। यह आपके चुने हुए रंगों का उपयोग करके चार एलिमेंट रेंडर करता है:

• एक बड़ी हेडिंग (text-2xl)
• बॉडी टेक्स्ट (text-base)
• स्मॉल टेक्स्ट (text-sm)
• एक बटन जिसमें रंग स्वैप किए गए हैं (फ़ोरग्राउंड बैकग्राउंड बन जाता है और इसके विपरीत)

यह प्रीव्यू आपको कोई भी कोड लिखने से पहले यह देखने देता है कि रंग पठनीय लगते हैं या नहीं।

चरण 5: रंग स्वैप करें या एक्सेसिबल पैलेट सुझाव आज़माएं

दो कलर इनपुट के बीच स्वैप बटन (डबल-एरो आइकन) पर क्लिक करके फ़ोरग्राउंड और बैकग्राउंड को तुरंत पलटें। यह लाइट-ऑन-डार्क और डार्क-ऑन-लाइट वेरिएंट दोनों टेस्ट करने के लिए उपयोगी है।

पेज के निचले भाग में एक्सेसिबल कलर पेयर्स पैनल तक स्क्रॉल करें। यह अपने कंट्रास्ट रेशियो के साथ 20 कलर कॉम्बिनेशन दिखाता है। उन दो रंगों को टूल में लोड करने के लिए किसी भी पेयर पर क्लिक करें। अधिकांश पेयर AA (4.5:1) पास करते हैं, जो चेकमार्क से दर्शाया जाता है। कुछ पेयर केवल Large AA (3:1) पास करते हैं और X से चिह्नित हैं — ये हेडिंग और बड़े UI एलिमेंट के लिए काम करते हैं लेकिन नॉर्मल बॉडी टेक्स्ट के लिए नहीं।

व्यावहारिक उदाहरण

बटन लेबल को उसके बैकग्राउंड के विरुद्ध जांचना

आपके डिज़ाइन में #3B82F6 नीले बटन पर #FFFFFF सफ़ेद टेक्स्ट है। #FFFFFF को फ़ोरग्राउंड और #3B82F6 को बैकग्राउंड के रूप में डालें। टूल लगभग 3.7:1 कैलकुलेट करता है। Normal AA बैज फेल होता है (4.5:1 की आवश्यकता है), लेकिन Large AA पास होता है। नीले को गहरा करना होगा — #1D4ED8 आज़माएं, जो लगभग 6.7:1 देता है और Normal AA पास करता है।

डार्क-मोड टेक्स्ट कलर वैलिडेट करना

आपके डार्क-मोड डिज़ाइन में #0F172A (slate-900) बैकग्राउंड पर #94A3B8 (slate-400) टेक्स्ट है। ये वैल्यू डालें। रेशियो लगभग 6.96:1 आता है, जो Normal AA, Large AA और Large AAA पास करता है। यह Normal AAA (7:1 की आवश्यकता है) से थोड़ा चूक जाता है। आप AA स्तर पर बॉडी कॉपी के लिए इस कॉम्बिनेशन का आत्मविश्वास के साथ उपयोग कर सकते हैं।

ब्रांड कलर को टेक्स्ट कलर के रूप में टेस्ट करना

आपका ब्रांड ऑरेंज #F97316 है। आप इसे सफ़ेद #FFFFFF बैकग्राउंड पर लिंक कलर के रूप में उपयोग करना चाहते हैं। रेशियो लगभग 2.8:1 है — Normal AA फेल। प्रीव्यू पुष्टि करता है कि टेक्स्ट कुछ यूज़र को पठनीय लगता है लेकिन एक्सेसिबिलिटी ऑडिट फेल होगा। AA पास करने के लिए #C2410C (≈ 5.2:1) जैसे गहरे शेड पर स्विच करें।

टिप्स और बेस्ट प्रैक्टिस

फ़ोरग्राउंड-ऑन-बैकग्राउंड और बैकग्राउंड-ऑन-फ़ोरग्राउंड दोनों टेस्ट करें। स्वैप बटन आपको एक क्लिक में रोल्स रिवर्स करने देता है। कुछ UI पैटर्न (बटन, हाइलाइटेड सिलेक्शन) फ़ोरग्राउंड कलर को छोटे-एरिया बैकग्राउंड के रूप में उपयोग करते हैं।

एक्सेसिबल कलर पेयर्स पैनल एक दशमलव स्थान के साथ रेशियो दिखाता है। ये रियल-कम्प्यूटेड रेशियो प्रत्येक प्री-सेट स्वॉच कार्ड पर दिखाए जाते हैं। दोनों रंग लोड करने के लिए किसी भी स्वॉच पर क्लिक करें — जब आपको जल्दी एक वर्किंग पैलेट की आवश्यकता हो तो इसे शुरुआती बिंदु के रूप में उपयोग करें।

लार्ज टेक्स्ट थ्रेशोल्ड 18pt (24px) या 14pt बोल्ड (लगभग 18.67px बोल्ड) पर लागू होते हैं। टूल आपको याद दिलाने के लिए Large AA और Large AAA परिणाम दिखाता है कि हेडिंग के लिए अधिक उदार थ्रेशोल्ड हैं। एक कॉम्बिनेशन जो Normal AA फेल करता है वह केवल बड़ी हेडिंग पर एक्सक्लूसिव उपयोग के लिए वैध हो सकता है।

URL के साथ परिणाम शेयर करें। वर्तमान फ़ोरग्राउंड और बैकग्राउंड रंग पेज URL में एनकोड किए गए हैं। अपने रंग दर्ज करने के बाद एड्रेस बार URL कॉपी करें ताकि किसी सहयोगी को एक विशिष्ट कंट्रास्ट चेक भेजा जा सके या डिज़ाइन रिव्यू दस्तावेज़ में शामिल किया जा सके।

सामान्य कलर पेयर को प्रीसेट के रूप में सेव करें। Supporter अकाउंट फ़ोरग्राउंड और बैकग्राउंड दोनों हेक्स वैल्यू को एक नामित प्रीसेट के रूप में सेव कर सकते हैं। यह उन टीमों के लिए उपयोगी है जो एक ही ब्रांड कलर कॉम्बिनेशन बार-बार चेक करती हैं।

सामान्य समस्याएं और ट्रबलशूटिंग

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

अनुपालन बैज फेल कहता है लेकिन मुझे लगा मेरे रंग ठीक हैं। WCAG फ़ॉर्मूला विज़ुअली दिखने से ज़्यादा सख्त है। #555555 बैकग्राउंड पर #333333 टेक्स्ट जैसा ब्लैक-ऑन-डार्क-ग्रे कॉम्बिनेशन केवल लगभग 1.7:1 देता है, जो AA से बहुत नीचे है। विज़ुअल जज़मेंट पर निर्भर रहने के बजाय टूल के परिणाम का उपयोग करें।

हिस्ट्री रिस्टोर मेरे रंग रीलोड नहीं करता। हिस्ट्री रिस्टोर फ़ंक्शन FG: #XXXXXX / BG: #XXXXXX फॉर्मेट में एंट्री पार्स करता है। इस टूल के बाहर रिकॉर्ड की गई एंट्री (या करप्ट डेटा के साथ) सही ढंग से पार्स नहीं हो सकती। उन मामलों में मैन्युअली रंग फिर से दर्ज करें।

कॉपी रेशियो बटन कोई प्रतिक्रिया नहीं दिखाता। Clipboard API को HTTPS या localhost की आवश्यकता है। प्लेन HTTP पर, क्लिपबोर्ड राइट फेल हो जाता है। उस मामले में टूल एक एरर टोस्ट दिखाता है। फॉलबैक के रूप में रेशियो डिस्प्ले टेक्स्ट पर राइट-क्लिक करें और ब्राउज़र के नेटिव कॉपी ऑप्शन का उपयोग करें।

प्रीव्यू कार्ड अनपेक्षित टेक्स्ट रंग दिखाता है। प्रीव्यू हेडिंग और बॉडी टेक्स्ट को आपके बैकग्राउंड कलर पर आपके फ़ोरग्राउंड कलर में रेंडर करता है। प्रीव्यू में बटन जानबूझकर दो रंगों को स्वैप करता है ताकि इनवर्स कॉम्बिनेशन डेमोंस्ट्रेट किया जा सके।

प्राइवेसी और सिक्योरिटी

Contrast Checker आपके ब्राउज़र में लोकली सभी कैलकुलेशन करता है। रिलेटिव ल्यूमिनेंस फ़ॉर्मूला और कंट्रास्ट रेशियो कम्प्यूटेशन आपके डिवाइस पर JavaScript में चलती है। कोई भी कलर वैल्यू किसी सर्वर को नहीं भेजी जाती। टूल को किसी अकाउंट की आवश्यकता नहीं है, ट्रैकिंग कुकीज़ सेट नहीं करता, और आप कौन से कलर कॉम्बिनेशन टेस्ट करते हैं यह लॉग नहीं करता। एक बार पेज लोड होने के बाद यह पूरी तरह से ऑफलाइन काम करता है, जिससे यह कॉन्फिडेंशियल डिज़ाइन सिस्टम या अनरिलीज़्ड ब्रांड गाइडलाइन में रंगों का मूल्यांकन करने के लिए सुरक्षित है।

अक्सर पूछे जाने वाले प्रश्न

क्या Contrast Checker मुफ़्त है?

हां। पूरी WCAG कंट्रास्ट चेकिंग फंक्शनैलिटी — जिसमें चार अनुपालन बैज, रियल-टाइम प्रीव्यू, स्वैप बटन और एक्सेसिबल पैलेट पैनल शामिल हैं — बिना किसी अकाउंट के पूरी तरह मुफ़्त है। प्रीसेट, हिस्ट्री ट्रैकिंग और टूल नोट्स जैसे Supporter फीचर Ko-fi Supporter सब्सक्रिप्शन के साथ उपलब्ध हैं।

क्या Contrast Checker ऑफलाइन काम करता है?

हां। एक बार पेज लोड होने के बाद, सभी कंट्रास्ट कैलकुलेशन, प्रीव्यू रेंडरिंग और अनुपालन बैज अपडेट नेटवर्क एक्सेस के बिना काम करते हैं। रिलेटिव ल्यूमिनेंस फ़ॉर्मूला और WCAG थ्रेशोल्ड कंपेरिज़न आपके ब्राउज़र में रनिंग प्योर JavaScript हैं।

क्या Contrast Checker के साथ मेरा डेटा सुरक्षित है?

हां। किसी भी सर्वर को कोई कलर डेटा ट्रांसमिट नहीं किया जाता। कंट्रास्ट चेक के दौरान टूल कोई नेटवर्क रिक्वेस्ट नहीं करता। आपके फ़ोरग्राउंड और बैकग्राउंड रंग केवल ब्राउज़र की मेमोरी में मौजूद रहते हैं और, यदि आप शेयर फीचर का उपयोग करते हैं, तो उस URL में एनकोड होते हैं जिसे आप कॉपी करना चुनते हैं।

यह टूल कौन सा WCAG वर्शन फॉलो करता है?

टूल WCAG 2.1 सक्सेस क्राइटेरिया 1.4.3 (कंट्रास्ट — मिनिमम) और 1.4.6 (कंट्रास्ट — एन्हैंस्ड) इम्प्लीमेंट करता है। AA स्तर के लिए नॉर्मल टेक्स्ट के लिए कम से कम 4.5:1 और लार्ज टेक्स्ट के लिए 3:1 के रेशियो की आवश्यकता है। AAA स्तर के लिए नॉर्मल टेक्स्ट के लिए 7:1 और लार्ज टेक्स्ट के लिए 4.5:1 की आवश्यकता है। ये थ्रेशोल्ड अनुपालन बैज में दिखाई गई वैल्यू से मेल खाते हैं (Normal AA ≥ 4.5:1, Normal AAA ≥ 7:1, Large AA ≥ 3:1, Large AAA ≥ 4.5:1)।

WCAG के अनुसार "लार्ज टेक्स्ट" क्या है?

WCAG लार्ज टेक्स्ट को रेगुलर वेट में कम से कम 18 पॉइंट (लगभग 24px) या बोल्ड वेट में कम से कम 14 पॉइंट (लगभग 18.67px) के टेक्स्ट के रूप में परिभाषित करता है। टूल तीसरे और चौथे अनुपालन बैज को "Large AA" और "Large AAA" लेबल करता है। प्रीव्यू text-2xl पर एक हेडिंग रेंडर करता है जो आमतौर पर लार्ज टेक्स्ट रेंज में आती है।

कंट्रास्ट रेशियो कैसे कैलकुलेट किया जाता है?

टूल WCAG फ़ॉर्मूला का उपयोग करके प्रत्येक हेक्स कलर को रिलेटिव ल्यूमिनेंस में कन्वर्ट करता है: प्रत्येक RGB चैनल को लिनियराइज़ किया जाता है (255 से भाग दें, फिर sRGB गामा करेक्शन लागू करें: s / 12.92 अगर s <= 0.03928, अन्यथा ((s + 0.055) / 1.055) ^ 2.4)। ल्यूमिनेंस तब 0.2126 R + 0.7152 G + 0.0722 * B है। कंट्रास्ट रेशियो (L_lighter + 0.05) / (L_darker + 0.05) है।

क्या मैं हेक्स कोड के अलावा अन्य रंग टेस्ट कर सकता हूं?

कलर इनपुट टेक्स्ट के रूप में टाइप किए गए हेक्स कोड (# के साथ या बिना) स्वीकार करते हैं। आप नेटिव कलर पिकर स्वॉच का भी उपयोग कर सकते हैं। अगर आपके पास RGB या HSL वैल्यू है, तो पहले इसे हेक्स में कन्वर्ट करने के लिए Color Picker का उपयोग करें, फिर इसे यहां पेस्ट करें।

सबसे अधिक संभव कंट्रास्ट रेशियो क्या है?

अधिकतम कंट्रास्ट रेशियो 21:1 है, जो प्योर ब्लैक (#000000) और प्योर व्हाइट (#FFFFFF) के बीच का रेशियो है। टूल डिफ़ॉल्ट रूप से इन दो रंगों के साथ खुलता है ताकि अधिकतम प्राप्त करने योग्य रेशियो डेमोंस्ट्रेट किया जा सके।

क्या मैं इसे टेक्स्ट के अलावा अन्य UI एलिमेंट के लिए उपयोग कर सकता हूं?

WCAG 2.1 सक्सेस क्राइटेरिया 1.4.11 में नॉन-टेक्स्ट कंट्रास्ट भी शामिल है, जो UI कंपोनेंट और ग्राफिकल ऑब्जेक्ट के लिए 3:1 रेशियो की आवश्यकता है। टूल का Large AA बैज (≥ 3:1) इस थ्रेशोल्ड से मेल खाता है और आइकन कलर, फोकस इंडिकेटर और फॉर्म कंट्रोल बॉर्डर का मूल्यांकन करने के लिए उपयोग किया जा सकता है, भले ही प्रीव्यू टेक्स्ट रेंडर करता हो।

मैं अपनी टीम के साथ कंट्रास्ट चेक कैसे शेयर करूं?

अपने फ़ोरग्राउंड और बैकग्राउंड रंग दर्ज करने के बाद, पेज URL दोनों वैल्यू एनकोड करता है। एड्रेस बार URL कॉपी करें और सीधे शेयर करें। जो प्राप्तकर्ता लिंक खोलते हैं वे "Loaded from share" नोटिफिकेशन के साथ पहले से लोड किए गए समान रंग देखते हैं। आप Twitter, LinkedIn या Reddit पर पोस्ट करने के लिए पेज के निचले भाग में शेयर बटन का भी उपयोग कर सकते हैं।

संबंधित टूल

• Color Picker — उन्हें यहां टेस्ट करने से पहले अपनी स्क्रीन या मौजूदा डिज़ाइन से सटीक हेक्स वैल्यू सैंपल करें।
• Color Converter — कंट्रास्ट चेकर में दर्ज करने से पहले अपने रंग को RGB, HSL या CMYK से हेक्स में कन्वर्ट करें।
• जल्द आ रहा है: Palette Generator — एक पूरा पैलेट जेनरेट करें और फिर एक्सेसिबिलिटी अनुपालन सुनिश्चित करने के लिए Contrast Checker में प्रत्येक कॉम्बिनेशन जांचें।

अभी Contrast Checker आज़माएं: Glyph Widgets Contrast Checker