WCAG कंट्रास्ट चेकर

किन्हीं दो रंगों को दर्ज करें और उनका WCAG 2.1 कंट्रास्ट अनुपात देखें तथा जानें कि वे टेक्स्ट और UI घटकों के लिए AA या AAA सुगम्यता मानकों को पूरा करते हैं या नहीं। पूरी तरह आपके ब्राउज़र में चलता है — कुछ भी अपलोड नहीं होता।

WCAG 2.1 कंट्रास्ट सीमाएँ

कंट्रास्ट अनुपात की गणना कैसे होती है

WCAG 2.1 कंट्रास्ट अनुपात सापेक्ष ल्यूमिनेंस का उपयोग करता है, जो यह मॉडल करता है कि किसी मानक मॉनिटर पर कोई रंग मानव-आँख को कितना चमकीला दिखता है।

1. प्रत्येक RGB चैनल को सामान्यीकृत करें — 0–255 मान को 255 से भाग दें ताकि 0 और 1 के बीच की संख्या मिले।
2. रैखिक करें (गामा हटाएँ) — 0.04045 से कम या बराबर मानों को 12.92 से भाग दिया जाता है; उससे अधिक मान ((c + 0.055) / 1.055)^2.4 होते हैं। यह स्क्रीन द्वारा इस्तेमाल की गई sRGB गामा एन्कोडिंग को उलट देता है।
3. ल्यूमिनेंस की गणना करें — L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin। ये गुणांक मानवीय बोध को दर्शाते हैं: हम हरे प्रकाश के प्रति सबसे अधिक और नीले के प्रति सबसे कम संवेदनशील हैं।
4. अनुपात की गणना करें — (L_lighter + 0.05) / (L_darker + 0.05)। 0.05 ऑफ़सेट शून्य से भाग को रोकता है और किसी प्रकाशित वातावरण में सबसे छोटे बोधगम्य अंतर का हिसाब रखता है।

व्यावहारिक उदाहरण — #f0f4f8 पर #1a2e4a:
फोरग्राउंड: R=26, G=46, B=74 → L ≈ 0.0268.
बैकग्राउंड: R=240, G=244, B=248 → L ≈ 0.8893.
अनुपात = (0.8893 + 0.05) / (0.0268 + 0.05) = 0.9393 / 0.0768 ≈ 12.23:1 — 7:1 AAA सीमा से काफ़ी ऊपर।

WCAG कंट्रास्ट नियमों का संक्षिप्त इतिहास

ऊपर आप जो कंट्रास्ट अनुपात देखते हैं वह वेब कंटेंट एक्सेसिबिलिटी गाइडलाइन्स (WCAG) से आता है, जिसे वर्ल्ड वाइड वेब कंसोर्टियम (W3C) प्रकाशित करता है। WCAG 2.0 को 11 दिसंबर 2008 को अंतिम रूप दिया गया और बाद में इसे हूबहू एक अंतर्राष्ट्रीय मानक, ISO/IEC 40500:2012, के रूप में अपनाया गया। उल्लेखनीय है कि दोनों टेक्स्ट-कंट्रास्ट नियम — सक्सेस क्राइटेरियन 1.4.3 (कंट्रास्ट न्यूनतम, AA स्तर) और 1.4.6 (कंट्रास्ट उन्नत, AAA स्तर) — 2008 से अपरिवर्तित हैं। जून 2018 में प्रकाशित WCAG 2.1 ने इन्हें बनाए रखा और बटन, आइकन तथा फ़ॉर्म फ़ील्ड के लिए सक्सेस क्राइटेरियन 1.4.11 (नॉन-टेक्स्ट कंट्रास्ट) जोड़ा। उसके बाद अक्टूबर 2023 में WCAG 2.2 आया, जिसने फिर से कंट्रास्ट के गणित को वैसा ही रहने दिया। इसलिए यह टूल जिन 4.5:1 और 7:1 सीमाओं की जाँच करता है वे कोई चलन नहीं हैं — ये एक स्थिर, अंतर्राष्ट्रीय रूप से अनुमोदित मानक हैं जिन्होंने पंद्रह वर्षों से भी अधिक समय तक वेब डिज़ाइन का मार्गदर्शन किया है।

अच्छे कंट्रास्ट पर वास्तव में कौन निर्भर करता है

कंट्रास्ट उन गिनी-चुनी सुगम्यता विशेषताओं में से एक है जो चुपचाप लगभग सभी की मदद करती है, यही कारण है कि नियम डिज़ाइनर की रुचि के बजाय मापनीय ल्यूमिनेंस के इर्द-गिर्द बनाए गए हैं। सबसे अधिक प्रभावित लोगों में शामिल हैं:

• कम दृष्टि वाले लोग — मोतियाबिंद, ग्लूकोमा, डायबिटिक रेटिनोपैथी या मैक्युलर डिजनरेशन जैसी स्थितियों के कारण — जिनके लिए कम-कंट्रास्ट टेक्स्ट व्यावहारिक रूप से अदृश्य हो सकता है।
• बुज़ुर्ग पाठक। उम्र के साथ आँख का लेंस पीला पड़ जाता है और कम रोशनी अंदर आने देता है, इसलिए जो कंट्रास्ट 25 वर्ष की उम्र में आरामदायक होता है वह 65 पर संघर्ष बन सकता है — और 65 से ऊपर का समूह हर दर्शक-वर्ग का बड़ा और बढ़ता हुआ हिस्सा है।
• रंग-दृष्टि दोष वाले लोग। दुनिया भर में अनुमानित 300 मिलियन लोग — मोटे तौर पर 12 में से 1 पुरुष और 200 में से 1 महिला — रंग को अलग तरह से देखते हैं। चूँकि WCAG अनुपात रंग (hue) के बजाय हल्केपन पर आधारित है, इसे पास करने वाला टेक्स्ट तब भी पढ़ने योग्य रहता है जब दो रंग एक जैसे दिखते हों।
• ग़लत परिस्थितियों में हर कोई। फ़ोन पर तेज़ धूप, कोई सस्ता या मंद किया हुआ लैपटॉप पैनल, प्रकाशित कमरे में प्रोजेक्टर, या लो-बैटरी "ब्राइटनेस घटाएँ" मोड — ये सभी प्रभावी कंट्रास्ट कम कर देते हैं। मानक के अनुसार डिज़ाइन करने का अर्थ है कि आपका इंटरफ़ेस असली दुनिया में टिकता है, न कि केवल किसी कैलिब्रेटेड स्टूडियो मॉनिटर पर।

नॉन-टेक्स्ट कंट्रास्ट: UI और ग्राफ़िक्स के लिए 3:1 नियम

टेक्स्ट ही एकमात्र चीज़ नहीं है जिसे उपयोगकर्ताओं को देखना पड़ता है। WCAG 2.1 के सक्सेस क्राइटेरियन 1.4.11 ने कंट्रास्ट आवश्यकता को नॉन-टेक्स्ट तत्वों तक बढ़ाया: किसी बटन या इनपुट फ़ील्ड की दृश्य सीमा, फ़ोकस आउटलाइन, टॉगल, चेकबॉक्स, अर्थ बताने वाला आइकन, या किसी चार्ट की रेखाएँ और बार। इन्हें अपने बगल में जो कुछ भी हो उसके सापेक्ष कम-से-कम 3:1 तक पहुँचना चाहिए। कम सीमा इस बात को दर्शाती है कि किसी अक्षर की महीन रेखाओं की तुलना में एक ठोस आकृति को समझना आसान है — पर यह एक वास्तविक आवश्यकता है, और सबसे अधिक छूट जाने वाली आवश्यकताओं में से एक है। सफ़ेद कार्ड पर हल्के-भूरे इनपुट बॉर्डर, या हल्के-भूरे "निष्क्रिय" टैब अक्सर 1.4.11 में विफल हो जाते हैं, भले ही पेज का बॉडी टेक्स्ट आराम से पास हो जाए। ऊपर दिए गए चेकर का उपयोग केवल अपने अनुच्छेदों पर नहीं, बल्कि अपने बॉर्डर, आइकन और फ़ोकस रिंग पर भी करें।

रंग-अंधता के लिए डिज़ाइन: कभी केवल रंग (hue) पर निर्भर न रहें

कंट्रास्ट और रंग संबंधित हैं पर अलग-अलग सुगम्यता चिंताएँ हैं। हरे बैकग्राउंड पर लाल "त्रुटि" संदेश का हल्केपन का कंट्रास्ट पूरी तरह पर्याप्त हो सकता है, फिर भी रेड-ग्रीन रंग-अंधता वाले किसी व्यक्ति के लिए यह लगभग अभेद्य हो सकता है (ड्यूटेरानोपिया, सबसे आम प्रकार, अकेले लगभग 1% पुरुषों को प्रभावित करता है)। इसका समाधान वही सिद्धांत है जिसे WCAG अन्यत्र लागू करता है: जानकारी देने के एकमात्र तरीके के रूप में कभी रंग का उपयोग न करें।

1. रंग के साथ एक दूसरा संकेत जोड़ें — एक आइकन (✓ / ✗), एक टेक्स्ट लेबल, अंडरलाइन, एक पैटर्न, या आकृति में बदलाव — ताकि रंग के बिना भी अर्थ बना रहे।
2. फोरग्राउंड और बैकग्राउंड के बीच हल्केपन का मज़बूत अंतर बनाए रखें, जो ठीक वही है जिसे ऊपर का अनुपात मापता है और जो रंग-अंध उपयोगकर्ताओं की सबसे अधिक मदद करता है।
3. क्लासिक समस्या-जोड़ियों से बचें — लाल/हरा, और कुछ हद तक नीला/बैंगनी और हरा/भूरा — किसी भी ऐसी चीज़ के लिए जिसे एक नज़र में अलग पहचाना जाना चाहिए।

जहाँ WCAG AA क़ानून है

WCAG 2.1 स्तर AA को पूरा करना — इन कंट्रास्ट सीमाओं सहित — केवल अच्छा अभ्यास नहीं है; दुनिया के बहुत हिस्से में यह एक कानूनी बाध्यता है:

चूँकि इनमें से लगभग सभी WCAG 2.x स्तर AA का हवाला देते हैं, अधिकांश बाज़ारों में सामान्य टेक्स्ट के लिए कम-से-कम 4.5:1 और बड़े टेक्स्ट तथा UI घटकों के लिए 3:1 तक पहुँचना व्यावहारिक अनुपालन-मानदंड है। यह टूल ठीक उसी मानक को लागू करता है।

APCA और WCAG 3: अनुपात क्यों बदल सकता है

मौजूदा अनुपात सरल और स्थिर है, पर यह मानवीय बोध का एक अनुमान भी है, और इसकी ज्ञात कमज़ोरियाँ हैं — यह डार्क-मोड (गहरे पर हल्का) संयोजनों पर थोड़ा ज़्यादा सख़्त और कुछ मध्य-रंगों पर थोड़ा ज़्यादा उदार हो सकता है, और यह एकमात्र "बड़े टेक्स्ट" कट-ऑफ़ से आगे फ़ॉन्ट के वज़न और आकार को अनदेखा करता है। उत्तराधिकारी मानक, WCAG 3 (अब भी एक शुरुआती मसौदा), एक भिन्न विधि की पड़ताल करता है: एक्सेसिबल परसेप्चुअल कंट्रास्ट एल्गोरिदम (APCA), जिसे एंड्रयू सोमर्स ने विकसित किया।

एक सममित अनुपात के बजाय, APCA एक बोधगम्य "Lc" (हल्केपन का कंट्रास्ट) मान उत्पन्न करता है जो उन बातों का हिसाब रखता है जो पुराना सूत्र नहीं रख सकता:

• ध्रुवीयता — हल्के बैकग्राउंड पर गहरा टेक्स्ट और गहरे बैकग्राउंड पर हल्का टेक्स्ट अलग-अलग अंक पाते हैं, क्योंकि आँख इन्हें सचमुच अलग तरह से अनुभव करती है।
• फ़ॉन्ट का वज़न और आकार — पतले, छोटे टेक्स्ट को बोल्ड, बड़े टेक्स्ट की तुलना में अधिक कंट्रास्ट चाहिए, और APCA उस संबंध को एक भोंडी सीमा के बजाय भीतर ही समाहित कर लेता है।
• आधुनिक डिस्प्ले — यह मॉडल 2000 के दशक के CRT के बजाय आज की चमकीली, हाई-रिज़ॉल्यूशन स्क्रीन के लिए ट्यून किया गया है।

APCA आशाजनक है पर अभी कहीं भी कानूनी आवश्यकता नहीं है, और WCAG 3 को अंतिम रूप मिलने में वर्षों बाक़ी हैं। जब तक यह लागू नहीं होता, WCAG 2.x — वही अनुपात जो आप ऊपर देखते हैं — वह मानक बना रहता है जिसके अनुसार आपका ऑडिट होता है और आपको जवाबदेह ठहराया जाता है, यही कारण है कि यह चेकर उसे रिपोर्ट करता है। APCA को डार्क थीम और महीन टाइप के लिए एक उपयोगी जाँच मानें, न कि आज 2.x AA पास करने का विकल्प।

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

WCAG कंट्रास्ट अनुपात क्या है?

WCAG (वेब कंटेंट एक्सेसिबिलिटी गाइडलाइन्स) कंट्रास्ट अनुपात मापता है कि सामान्य या कम दृष्टि वाले किसी व्यक्ति को दो रंग कितने अलग दिखते हैं। इसकी गणना प्रत्येक रंग के सापेक्ष ल्यूमिनेंस से सूत्र (L1 + 0.05) / (L2 + 0.05) द्वारा की जाती है, जहाँ L1 हल्का रंग है और L2 गहरा। अनुपात 1:1 (एक जैसे रंग) से 21:1 (सफ़ेद पर काला) तक होता है। मौजूदा मानक WCAG 2.1 सामान्य टेक्स्ट के लिए कम-से-कम 4.5:1 (AA स्तर) और उन्नत AAA स्तर के लिए 7:1 की माँग करता है।

WCAG AA और AAA में क्या अंतर है?

अधिकांश देशों और ढाँचों के लिए AA न्यूनतम कानूनी अनुपालन स्तर है (WCAG 2.1 स्तर AA)। AAA उन्नत "स्वर्ण मानक" है। सामान्य टेक्स्ट के लिए: AA को ≥ 4.5:1 और AAA को ≥ 7:1 चाहिए। बड़े टेक्स्ट के लिए: AA को ≥ 3:1 और AAA को ≥ 4.5:1 चाहिए। अधिकांश सुगम्यता ऑडिट AA को लक्ष्य बनाते हैं; AAA चिकित्सा या कानूनी पेज जैसी उच्च-जोखिम वाली सामग्री के लिए आरक्षित है।

WCAG के अंतर्गत "बड़ा टेक्स्ट" किसे गिना जाता है?

WCAG बड़े टेक्स्ट को सामान्य वज़न में कम-से-कम 18pt (24px), या बोल्ड वज़न में कम-से-कम 14pt (लगभग 18.67px) के रूप में परिभाषित करता है। इन आकारों पर कम कंट्रास्ट स्वीकार्य है क्योंकि बड़े अक्षर-रूप पहचानने में आसान होते हैं, इसलिए AA की सीमा 4.5:1 से घटकर 3:1 हो जाती है।

क्या 3:1 अनुपात बॉडी टेक्स्ट के लिए WCAG पास करता है?

नहीं — 3:1 केवल बड़े टेक्स्ट (AA स्तर) और आइकन तथा बॉर्डर जैसे UI घटकों के लिए पास होता है। सामान्य आकार के बॉडी टेक्स्ट को AA के लिए कम-से-कम 4.5:1 और AAA के लिए 7:1 चाहिए। 3:1 से नीचे का अनुपात टेक्स्ट के आकार की परवाह किए बिना सभी WCAG स्तरों में विफल होता है।

सापेक्ष ल्यूमिनेंस की गणना कैसे होती है?

प्रत्येक RGB चैनल (0–255) को 255 से भाग देकर [0, 1] में एक मान मिलता है, फिर उसे रैखिक किया जाता है: 0.04045 से कम या बराबर मानों को 12.92 से भाग दिया जाता है; उससे अधिक मान ((c + 0.055) / 1.055) की 2.4 घात होते हैं। फिर ल्यूमिनेंस है: L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin। ये गुणांक मानवीय बोध को दर्शाते हैं: आँख हरे प्रकाश के प्रति सबसे अधिक और नीले के प्रति सबसे कम संवेदनशील है।

APCA / WCAG 3 के बारे में क्या?

WCAG 3 मसौदे में है और एडवांस्ड परसेप्चुअल कंट्रास्ट एल्गोरिदम (APCA) पेश करता है, जो आधुनिक स्क्रीन के लिए बोधगम्य कंट्रास्ट को अधिक सटीकता से मॉडल करता है। APCA अभी कहीं भी कानूनी आवश्यकता नहीं है। यह टूल WCAG 2.1 (मौजूदा अनुमोदित मानक) लागू करता है, जिसकी माँग ADA, EN 301 549 और अधिकांश राष्ट्रीय सुगम्यता क़ानून करते हैं।

संबंधित टूल

• कलर कन्वर्टर — HEX, RGB, HSL, HSV और CMYK
• SHA हैश जनरेटर
• JSON फ़ॉर्मैटर और वैलिडेटर