WCAG कंट्रास्ट जाँचें
WCAG AA और AAA सुलभता अनुपालन के लिए रंग कंट्रास्ट अनुपात जाँचें
इनपुट और विकल्प
त्वरित प्रीसेट और उदाहरण
आपके ब्राउज़र में चलता है। आपका इनपुट इसी डिवाइस पर रहता है।
परिणाम
परिणाम देखने के लिए अपने मान दर्ज करें।
WCAG कंट्रास्ट जाँचें के बारे में
हमारा मुफ़्त ऑनलाइन WCAG कंट्रास्ट चेकर डिज़ाइनरों, डेवलपरों और एक्सेसिबिलिटी पेशेवरों को यह जाँचने में मदद करता है कि टेक्स्ट और बैकग्राउंड रंगों के संयोजन वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) 2.1 की कंट्रास्ट आवश्यकताओं को पूरा करते हैं। एक्सेसिबल रंग कंट्रास्ट यह सुनिश्चित करता है कि कम दृष्टि या रंग दृष्टि दोष वाले लोगों सहित सभी उपयोगकर्ता आपके वेब कंटेंट को पढ़ और उसके साथ इंटरैक्ट कर सकें।
यह टूल आधिकारिक W3C सापेक्ष ल्यूमिनेंस सूत्र से किन्हीं भी दो रंगों के बीच का कंट्रास्ट अनुपात निकालता है और तुरंत बताता है कि यह संयोजन सामान्य और बड़े टेक्स्ट, दोनों के लिए WCAG AA और WCAG AAA अनुपालन स्तरों में पास होता है या फ़ेल। सभी गणनाएँ रियल टाइम में सीधे आपके ब्राउज़र में होती हैं और कोई डेटा किसी सर्वर पर नहीं भेजा जाता।
चाहे आप एक्सेसिबिलिटी ऑडिट कर रहे हों, नया इंटरफ़ेस डिज़ाइन कर रहे हों, या मौजूदा कंटेंट की अनुपालन समीक्षा कर रहे हों, यह कंट्रास्ट चेकर आपको सटीक, मानकों के अनुरूप नतीजे देता है, साथ में लाइव टेक्स्ट पूर्वावलोकन और फ़ेल होने वाले रंग संयोजनों को ठीक करने के अमल में लाने योग्य सुझाव भी।
WCAG कंट्रास्ट आवश्यकताओं को समझें
ये वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) वेब एक्सेसिबिलिटी का अंतरराष्ट्रीय स्तर पर मान्य मानक हैं, जिन्हें वर्ल्ड वाइड वेब कंसोर्टियम (W3C) ने प्रकाशित किया है। अलग-अलग दृश्य क्षमता वाले उपयोगकर्ताओं के लिए टेक्स्ट की सुपाठ्यता सुनिश्चित करने हेतु WCAG कंट्रास्ट अनुपात की विशिष्ट सीमाएँ तय करता है।
- WCAG स्तर AA (सामान्य टेक्स्ट): न्यूनतम कंट्रास्ट अनुपात 4.5:1 ज़रूरी है। यह बॉडी टेक्स्ट, पैराग्राफ़ और 18pt (24px) से छोटे या 14pt बोल्ड (18.66px बोल्ड) से छोटे किसी भी टेक्स्ट पर लागू होता है।
- WCAG स्तर AA (बड़ा टेक्स्ट): न्यूनतम कंट्रास्ट अनुपात 3:1 ज़रूरी है। बड़े टेक्स्ट की परिभाषा वह टेक्स्ट है जो कम से कम 18pt (24px) या 14pt बोल्ड (18.66px बोल्ड) हो।
- WCAG स्तर AAA (सामान्य टेक्स्ट): न्यूनतम कंट्रास्ट अनुपात 7:1 ज़रूरी है। यह सामान्य आकार के टेक्स्ट के लिए एक्सेसिबिलिटी अनुपालन का उच्चतम स्तर है।
- WCAG स्तर AAA (बड़ा टेक्स्ट): AAA अनुपालन स्तर पर बड़े टेक्स्ट के लिए न्यूनतम कंट्रास्ट अनुपात 4.5:1 ज़रूरी है।
कम से कम WCAG AA को पूरा करना सुलभ वेब डिज़ाइन का आधारभूत मानक माना जाता है और दुनिया भर के कई कानूनी ढाँचों में इसकी आवश्यकता है, जिनमें अमेरिकन्स विद डिसेबिलिटीज़ एक्ट (ADA), यूरोपीय एक्सेसिबिलिटी एक्ट और रिहैबिलिटेशन एक्ट की धारा 508 शामिल हैं। WCAG AAA एक्सेसिबिलिटी का उन्नत स्तर देता है, जिसकी जहाँ संभव हो सिफ़ारिश की जाती है।
कंट्रास्ट अनुपात की गणना कैसे होती है
दो रंगों के बीच का कंट्रास्ट अनुपात हर रंग के सापेक्ष ल्यूमिनेंस से तय होता है, जैसा WCAG 2.1 विनिर्देश में परिभाषित है। सापेक्ष ल्यूमिनेंस किसी रंग की अनुभव की गई चमक को 0 (सबसे गहरा काला) से 1 (सबसे हल्का सफ़ेद) के पैमाने पर मापता है।
गणना में तीन चरण हैं। पहले, हर रंग चैनल (लाल, हरा, नीला) को उसके 8-बिट sRGB मान (0-255) से 255 से भाग देकर सामान्यीकृत sRGB मान (0-1) में बदला जाता है। दूसरे, हर सामान्यीकृत मान पर गामा सुधार लागू होता है: यदि मान 0.04045 या उससे कम है, तो उसे 12.92 से भाग दिया जाता है; अन्यथा उसे सूत्र ((value + 0.055) / 1.055) ^ 2.4 से बदला जाता है। तीसरे, रैखिक किए गए चैनल मानों को भारित गुणांकों से जोड़ा जाता है: L = 0.2126 * R + 0.7152 * G + 0.0722 * B।
अंतिम कंट्रास्ट अनुपात (L1 + 0.05) / (L2 + 0.05) से निकाला जाता है, जहाँ L1 हल्के रंग का सापेक्ष ल्यूमिनेंस है और L2 गहरे रंग का। नतीजा 1:1 (कोई कंट्रास्ट नहीं, एक जैसे रंग) से 21:1 (अधिकतम कंट्रास्ट, शुद्ध सफ़ेद पर शुद्ध काला) तक का मान होता है।
मुख्य सुविधाएँ
- आधिकारिक W3C WCAG 2.1 ल्यूमिनेंस सूत्र से रियल-टाइम कंट्रास्ट अनुपात की गणना
- सामान्य और बड़े टेक्स्ट, दोनों के लिए WCAG AA और AAA अनुपालन स्तरों के पास/फ़ेल संकेतक
- फ़ोरग्राउंड और बैकग्राउंड दोनों रंगों के लिए इंटरैक्टिव कलर पिकर और हेक्स इनपुट
- उलटे रंग संयोजनों को जाँचने के लिए एक क्लिक में रंग अदला-बदली
- सामान्य एक्सेसिबल जोड़ियों सहित दस त्वरित प्रीसेट रंग संयोजन
- लाइव टेक्स्ट पूर्वावलोकन, जो दिखाता है कि आपके रंग सामान्य और बड़े टेक्स्ट आकारों में कैसे दिखते हैं
- वर्तमान संयोजन फ़ेल होने पर सबसे नज़दीकी पास होने वाले फ़ोरग्राउंड रंग का स्वचालित सुझाव
- फ़ोरग्राउंड और बैकग्राउंड दोनों रंगों के तकनीकी ल्यूमिनेंस विवरण
- किसी भी वातावरण में आरामदायक उपयोग के लिए पूरा डार्क मोड समर्थन
- सारी प्रोसेसिंग ब्राउज़र में स्थानीय रूप से चलती है और कोई डेटा बाहरी सर्वरों पर नहीं भेजा जाता
WCAG कंट्रास्ट चेकर का उपयोग कैसे करें
- फ़ोरग्राउंड रंग सेट करें: अपना टेक्स्ट या फ़ोरग्राउंड रंग सेट करने के लिए कलर पिकर के वर्ग पर क्लिक करें या टेक्स्ट फ़ील्ड में हेक्स मान (जैसे #1A1A2E) लिखें।
- बैकग्राउंड रंग सेट करें: इसी तरह, टेक्स्ट के पीछे का बैकग्राउंड रंग सेट करने के लिए कलर पिकर या हेक्स इनपुट का उपयोग करें।
- नतीजे देखें: रंग बदलते ही चारों WCAG स्तरों के कंट्रास्ट अनुपात और पास/फ़ेल नतीजे तुरंत दिखाई देते हैं।
- लाइव पूर्वावलोकन देखें: नीचे स्क्रॉल करके देखें कि आपके चुने हुए रंग संयोजन में सामान्य और बड़े, दोनों आकारों में असली टेक्स्ट कैसा दिखता है।
- सुझाव लागू करें: यदि संयोजन WCAG AA में फ़ेल होता है, तो एक सुझाया गया फ़ोरग्राउंड रंग दिखाया जाता है। उसे इस्तेमाल करने के लिए लागू करें पर क्लिक करें।
- प्रीसेट आज़माएँ: जाने-माने एक्सेसिबल या अनएक्सेसिबल रंग संयोजनों को जाँचने के लिए त्वरित प्रीसेट का उपयोग करें।
- रंगों की अदला-बदली करें: अपने फ़ोरग्राउंड और बैकग्राउंड चयन को उलटने के लिए रंग अदला-बदली बटन पर क्लिक करें।
एक्सेसिबिलिटी के लिए रंग कंट्रास्ट क्यों मायने रखता है
दुनिया भर में लगभग 12 में से 1 पुरुष और 200 में से 1 महिला को किसी न किसी रूप में रंग दृष्टि दोष होता है। इसके अलावा, लाखों लोग कम दृष्टि, उम्र से जुड़े दृष्टि बदलावों, या स्क्रीन की चौंध जैसी परिस्थितिजन्य बाधाओं का सामना करते हैं। पर्याप्त रंग कंट्रास्ट इन सभी उपयोगकर्ताओं के लिए वेब कंटेंट को सुलभ बनाने के सबसे असरदार और सीधे तरीकों में से एक है।
टेक्स्ट और बैकग्राउंड के बीच कमज़ोर कंट्रास्ट वेब ऑडिट में मिलने वाली सबसे आम एक्सेसिबिलिटी समस्याओं में से एक है। डिज़ाइन और डेवलपमेंट प्रक्रिया के दौरान WCAG कंट्रास्ट चेकर का उपयोग करके टीमें कंट्रास्ट की समस्याओं को प्रोडक्शन तक पहुँचने से पहले पहचानकर ठीक कर सकती हैं, जिससे सुधार की लागत घटती है और शुरुआत से ही एक्सेसिबिलिटी नियमों का अनुपालन सुनिश्चित होता है।
अच्छा रंग कंट्रास्ट उन उपयोगकर्ताओं को भी फ़ायदा देता है जिन्हें कोई विकलांगता नहीं है। यह तेज़ धूप में, कम गुणवत्ता वाली स्क्रीन पर और ध्यान भटकाने वाले माहौल में पठनीयता सुधारता है। एक्सेसिबल डिज़ाइन समावेशी डिज़ाइन है, जो सभी के लिए बेहतर अनुभव बनाता है।
अक्सर पूछे जाने वाले प्रश्न
WCAG AA और AAA में क्या अंतर है?
WCAG AA अनुपालन का मानक स्तर है, जिसकी सिफ़ारिश ज़्यादातर वेबसाइटों और एप्लिकेशनों के लिए की जाती है। इसमें सामान्य टेक्स्ट के लिए न्यूनतम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 कंट्रास्ट अनुपात चाहिए। WCAG AAA अधिक सख्त स्तर है, जिसमें सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 चाहिए। हालाँकि AAA हर कंटेंट के लिए हमेशा हासिल नहीं हो सकता, फिर भी इसकी सिफ़ारिश महत्वपूर्ण टेक्स्ट तत्वों के लिए और वहाँ की जाती है जहाँ अधिकतम पठनीयता चाहिए।
WCAG में बड़ा टेक्स्ट किसे माना जाता है?
WCAG 2.1 के अनुसार, बड़ा टेक्स्ट वह है जो कम से कम 18 पॉइंट (लगभग 24 CSS पिक्सेल) का हो, या बोल्ड होने पर 14 पॉइंट (लगभग 18.66 CSS पिक्सेल) का हो। बड़े टेक्स्ट के लिए कंट्रास्ट आवश्यकताएँ कम होती हैं क्योंकि उसका आकार ही उसे पढ़ना आसान बना देता है।
क्या यह टूल पारदर्शिता या अल्फ़ा चैनल को सपोर्ट करता है?
यह टूल अपारदर्शी हेक्स रंगों (6-अंकों वाले हेक्स कोड) के साथ काम करता है। पारदर्शिता वाले रंगों के लिए प्रभावी कंट्रास्ट पारदर्शी परत के पीछे के बैकग्राउंड पर निर्भर करता है, जो पूरे पेज पर अलग-अलग हो सकता है। अर्ध-पारदर्शी टेक्स्ट को जाँचने के लिए, आपको पहले पारदर्शी परत के उसके असली बैकग्राउंड पर पड़ने से बनने वाला प्रभावी सादा रंग निकालना चाहिए, फिर उस सादे रंग को यहाँ जाँचना चाहिए।
क्या WCAG अनुपालन कानूनी रूप से अनिवार्य है?
कई क्षेत्राधिकारों में, हाँ। संयुक्त राज्य अमेरिका में ADA, यूरोपीय संघ में यूरोपीय एक्सेसिबिलिटी एक्ट, कनाडा में एक्सेसिबिलिटी फ़ॉर ओंटेरियन्स विद डिसेबिलिटीज़ एक्ट (AODA), और अन्य देशों के ऐसे ही कानून डिजिटल एक्सेसिबिलिटी के मानक के रूप में WCAG 2.1 स्तर AA का हवाला देते हैं या उसे शामिल करते हैं। जो संगठन इन आवश्यकताओं को पूरा नहीं करते, उन्हें कानूनी कार्रवाई, जुर्माने और प्रतिष्ठा को नुकसान का सामना करना पड़ सकता है।