रंग पहुँचाई चेकर
पाठ्य और पृष्ठभूमि रंग (हेक्स कोड) दर्ज करें ताकि उनके कंट्रास्ट अनुपात और WCAG अनुपालन की जांच की जा सके।
यह बड़ा बोल्ड पाठ्य है।
यह सामान्य आकार का पाठ्य है।
21.00:1
कंट्रास्ट अनुपात
सामान्य पाठ्य (AA)
बड़ा पाठ्य (AA)
18pt+ or 14pt+ bold
UI घटक (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
रंग पहुँचाई चेकर का उपयोग कैसे करें
- 1
दो रंग दर्ज करें
एक फ़ोरग्राउंड (टेक्स्ट) रंग और एक बैकग्राउंड रंग hex कोड के रूप में दें, उदाहरण के लिए #1a1a1a और #ffffff।
- 2
कंट्रास्ट जाँचें
दोनों रंगों के बीच कंट्रास्ट अनुपात निकालने के लिए Check Accessibility पर क्लिक करें।
- 3
WCAG नतीजों की समीक्षा करें
सामान्य टेक्स्ट, बड़े टेक्स्ट, और UI कंपोनेंट स्तरों पर AA और AAA के लिए पास या फ़ेल बैज देखें, और लाइव प्रीव्यू देखें।
- 4
ज़रूरत अनुसार समायोजित करें
रंगों को स्वैप करें या किसी hex मान में बदलाव करें जब तक कि संयोजन आपकी परियोजना के लिए ज़रूरी WCAG स्तर पूरा न कर ले।
WCAG रंग कंट्रास्ट, आसान शब्दों में
कंट्रास्ट अनुपात का मतलब क्या है
रंग कंट्रास्ट को दो रंगों में से हल्के और गहरे रंग के बीच के अनुपात के रूप में व्यक्त किया जाता है, जो 1:1 से 21:1 तक चलता है। 1:1 का अनुपात मतलब दोनों रंग एक जैसे हैं, इसलिए टेक्स्ट अपनी पृष्ठभूमि के सामने पूरी तरह अदृश्य होगा, जबकि 21:1 अधिकतम है, यानी शुद्ध काले और शुद्ध सफ़ेद के बीच का कंट्रास्ट। बाकी हर जोड़ी कहीं बीच में आती है। यह अनुपात इस बारे में नहीं है कि आपने कौन-से रंग इस्तेमाल किए या उनकी रंगत कितनी अलग है; यह विशुद्ध रूप से उनकी चमक के अंतर के बारे में है, और यही वजह है कि दो रंग जो आपको अलग दिखते हैं वे फिर भी फ़ेल हो सकते हैं।
यह अकेली संख्या ही सुलभ रंग की रीढ़ है, क्योंकि यह बताती है कि टेक्स्ट लोगों और परिस्थितियों की सबसे विस्तृत श्रेणी के लिए पठनीय रहेगा या नहीं। चेकर इसे आपके दर्ज किए गए किसी भी फ़ोरग्राउंड और बैकग्राउंड जोड़े के लिए गणना करता है और नतीजे की तुलना प्रकाशित सीमाओं से करता है।
वे AA सीमाएँ जो आपको ज़रूर पूरी करनी हैं
WCAG स्तर AA वह मानक है जिसे ज़्यादातर वेबसाइटें लक्ष्य बनाती हैं और जिसका कई एक्सेसिबिलिटी कानून तथा खरीद नियम हवाला देते हैं, इसलिए इसे अपना आधार मानें। AA सामान्य बॉडी टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए कम से कम 3:1 का कंट्रास्ट अनुपात माँगता है। ये दो संख्याएँ रोज़मर्रा के अधिकांश डिज़ाइन फ़ैसलों को कवर करती हैं, और इस टूल के बैज आपको तुरंत बता देते हैं कि कोई जोड़ी हर एक को पार करती है या नहीं।
अगर कोई संयोजन सामान्य और बड़े दोनों टेक्स्ट के लिए AA पास कर लेता है, तो आपके पास एक ठोस, बचाव-योग्य आधार है। अगर यह सामान्य टेक्स्ट में फ़ेल पर बड़े में पास होता है, तो भी आप इसे इस्तेमाल कर सकते हैं, पर केवल बड़े आकारों में — यह एक ऐसी बाधा है जिसका फ़ैसला बाद में पता लगने के बजाय जानबूझकर करना ठीक रहता है।
AAA और बड़े टेक्स्ट का मतलब क्या है
स्तर AAA उन्नत श्रेणी है, जो अधिकतम पठनीयता के लिए है, और यह आवश्यकता को सामान्य टेक्स्ट के लिए 7:1 तथा बड़े टेक्स्ट के लिए 4.5:1 तक बढ़ा देता है। AAA पूरी साइटों के लिए अपेक्षित नहीं होता और ब्रांड पैलेट के लिए अक्सर अव्यावहारिक होता है, पर लंबी-फ़ॉर्म पढ़ाई, अहम सामग्री, और कम दृष्टि वाले दर्शकों के लिए यह एक सार्थक लक्ष्य है। चेकर AAA को AA के साथ रिपोर्ट करता है ताकि आप देख सकें कि किसी जोड़ी के पास कितनी गुंजाइश है।
बड़े टेक्स्ट की एक सटीक परिभाषा है जो लोगों को चौंका देती है: इसका मतलब है मोटे तौर पर 18pt और उससे बड़ा, या बोल्ड होने पर 14pt और उससे बड़ा, जो लगभग 24px सामान्य या 18.66px बोल्ड में बदलता है। सीमा कम होने की वजह बस यह है कि बड़े, भारी अक्षर-रूप कम कंट्रास्ट पर भी पठनीय रहते हैं। उस सीमा से छोटी कोई भी चीज़ सख़्त सामान्य-टेक्स्ट अनुपात को पूरा करना ही चाहिए, इसलिए यह न मानें कि कोई बड़ा दिखने वाला शीर्षक बिना असल आकार और मोटाई जाँचे ही योग्य है।
असली उपयोगकर्ताओं के लिए कंट्रास्ट क्यों मायने रखता है
पर्याप्त कंट्रास्ट कोई खानापूर्ति नहीं है; यह तय करता है कि असली लोग आपके इंटरफ़ेस का उपयोग कर पाएँगे या नहीं। कम दृष्टि वाले उपयोगकर्ता, जो उम्र के साथ अधिक आम हो जाती है, सीधे इस पर निर्भर करते हैं, और तेज़ धूप में, किसी मंद या सस्ती डिस्प्ले पर, या थकान में स्क्रीन पढ़ने वाला कोई भी व्यक्ति भी। कंट्रास्ट रंग-दृष्टि की कमी के साथ भी जुड़ता है: चूँकि अनुपात रंगत के बजाय चमक पर आधारित होता है, इसलिए लाल-बनाम-हरे के अंतर पर निर्भर कोई जोड़ी उस व्यक्ति के लिए ढह सकती है जो उन रंगतों में फ़र्क नहीं कर पाता, जबकि चमक का एक मज़बूत अंतर फिर भी पढ़ा जाता है।
वह आख़िरी बात एक ऐसा निष्कर्ष रखती है जिसे साफ़-साफ़ कहना ज़रूरी है: अर्थ बताने के लिए कभी केवल रंग पर निर्भर न रहें। रंग को टेक्स्ट, आइकन, अंडरलाइन, या आकार के साथ जोड़ें ताकि जानकारी कम कंट्रास्ट और रंग-अंधता, दोनों में बची रहे।
अनुपात की गणना कैसे होती है
बैज के पीछे का गणित सापेक्ष चमक (relative luminance) से शुरू होता है, जो इस बात का माप है कि हर रंग मानव आँख को कितना चमकीला दिखता है। यह लाल, हरे और नीले चैनलों का सपाट औसत नहीं है, क्योंकि आँख नीले की तुलना में हरे के प्रति कहीं अधिक संवेदनशील है, इसलिए हरे को सबसे अधिक और नीले को सबसे कम भार दिया जाता है। हर चैनल को पहले एक छोटी गामा सुधार से भी गुज़ारा जाता है ताकि नतीजा कच्चे संकेत के बजाय बोध का अनुसरण करे।
एक बार दोनों रंगों का चमक मान मिल जाने पर, कंट्रास्ट अनुपात हल्की चमक जमा एक छोटा स्थिरांक, बँटा गहरी चमक जमा वही स्थिरांक होता है। यह स्थिरांक सूत्र को काले के पास भी ठीक से काम करता रखता है। आपको इसे हाथ से चलाने की ज़रूरत नहीं, पर यह जानना कि नतीजे को चमक चलाती है, रंगत नहीं, यह समझाता है कि बस अलग दिखने वाले रंग चुन लेना पर्याप्त क्यों नहीं है।
गैर-टेक्स्ट और UI कंट्रास्ट
कंट्रास्ट के नियम टेक्स्ट तक सीमित नहीं हैं। WCAG इंटरैक्टिव कंपोनेंट और अर्थपूर्ण ग्राफ़िक्स की दृश्य सीमाओं के लिए भी 3:1 की न्यूनतम सीमा तय करता है, जिसे चेकर UI components के अंतर्गत चिह्नित करता है। इसमें किसी टेक्स्ट इनपुट की बॉर्डर, किसी बटन की रूपरेखा, किसी चेकबॉक्स के भीतर का निशान, फ़ोकस संकेतक, और किसी आइकन या चार्ट के वे हिस्से शामिल हैं जिन्हें उपयोगकर्ता को समझने के लिए देख पाना ज़रूरी है। किसी सफ़ेद कार्ड पर हल्की धूसर इनपुट बॉर्डर इस नियम की एक उत्कृष्ट विफलता है, भले ही उसके भीतर का लेबल टेक्स्ट आसानी से पास हो जाए।
नियंत्रणों को इस तरह डिज़ाइन करना कि वे अपने आसपास के मुक़ाबले 3:1 पार करें, इसका मतलब है कि लोग उन्हें सचमुच ढूँढ़ और चला सकें, न कि केवल उनके बगल का लिखा हुआ पढ़ सकें। कंपोनेंट के किनारों और अवस्थाओं को जाँचें, केवल उसके टेक्स्ट को नहीं।
आम विफलताएँ और उन्हें कैसे ठीक करें
कुछ पैटर्न बार-बार फ़ेल होते हैं। सफ़ेद पर हल्के धूसर प्लेसहोल्डर या द्वितीयक टेक्स्ट सबसे आम है; सफ़ेद पर #999999 के आसपास के किसी मध्यम धूसर जैसे मान 4.5:1 से नीचे रह जाते हैं और उन्हें गहरा करना पड़ता है। ब्रांड रंग एक और बार-बार दोषी हैं, ख़ासकर बॉडी टेक्स्ट या किसी रंगीन बटन पर सफ़ेद टेक्स्ट के लिए इस्तेमाल किए जाने वाले मध्यम-स्वर के नीले, हरे और नारंगी, जहाँ जोड़ी अक्सर AA से बस ज़रा-सा कम रह जाती है। हल्की पृष्ठभूमि पर पतली हल्की बॉर्डर भी नियमित रूप से 3:1 की UI सीमा चूक जाती है।
हल आमतौर पर छोटे होते हैं। फ़ोरग्राउंड को गहरा करें या बैकग्राउंड को हल्का करें जब तक अनुपात रेखा पार न कर ले, जिसका HSL के संदर्भ में अक्सर मतलब होता है रंगत को बरकरार रखते हुए चमक को मामूली मात्रा में समायोजित करना ताकि ब्रांड फिर भी पढ़ा जाए। किसी व्यस्त छवि या ग्रेडिएंट पर टेक्स्ट के लिए, उसके पीछे एक ठोस या अर्ध-पारदर्शी स्क्रिम जोड़ें ताकि सबसे ख़राब हिस्सा भी पास हो जाए। अपने असली रंग यहाँ दर्ज करें, अनुपात तथा AA और AAA बैजों को अपडेट होते देखें, और मानों को तब तक थोड़ा-थोड़ा बदलें जब तक आपकी परियोजना के लिए ज़रूरी हर स्तर हरा न हो जाए।
अक्सर पूछे जाने वाले प्रश्न
कंट्रास्ट अनुपात क्या है और कितना अच्छा माना जाता है?
AA और AAA में क्या अंतर है?
बड़ा टेक्स्ट पास क्यों होता है जब सामान्य टेक्स्ट फ़ेल होता है?
मुझे कौन-सा रंग फ़ॉर्मैट दर्ज करना चाहिए?
क्या यह चेकर मुफ़्त है और क्या यह मेरे रंग कहीं भेजता है?
संबंधित टूल्स
इन उपयोगी टूल्स के साथ आगे बढ़ें