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

WCAG 2.1 / 2.2 कंट्रास्ट दिशानिर्देशों को समझना

वेब एक्सेसिबिलिटी (सुगम्यता) को सुनिश्चित करने के लिए टेक्स्ट और उसके बैकग्राउंड के बीच पर्याप्त कंट्रास्ट होना अनिवार्य है। यह कंट्रास्ट चेकर टूल WCAG 2.1 / 2.2 मानकों के अनुसार रंगों के संयोजन की जाँच करता है। इन मानकों का उद्देश्य यह सुनिश्चित करना है कि कम दृष्टि वाले या विभिन्न प्रकार के वर्णांधता (color blindness) से प्रभावित लोग भी स्क्रीन पर लिखी गई सामग्री को आसानी से पढ़ सकें।

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

इनपुट और आउटपुट की कार्यप्रणाली

इस टूल का उपयोग करने के लिए आपको दो मुख्य इनपुट देने होते हैं:

• टेक्स्ट का रंग: वह रंग जिसे आप अक्षरों या अग्रभूमि (foreground) के लिए उपयोग करना चाहते हैं।
• बैकग्राउंड का रंग: वह रंग जो टेक्स्ट के पीछे दिखाई देगा।

ये दोनों इनपुट निम्नलिखित फ़ॉर्मैट में स्वीकार किए जाते हैं:

• Hex मान (जैसे कि #1a1a1a)
• rgb() मान (जैसे कि rgb(26, 26, 26))
• hsl() मान

टूल में एक स्वैप बटन भी दिया गया है जो टेक्स्ट और बैकग्राउंड के रंगों को आपस में बदल देता है। शुरुआती तौर पर, टूल में टेक्स्ट के रंग के लिए #4f46e5 और बैकग्राउंड के रंग के लिए #ffffff सेट रहता है, जिससे 6.29 का कंट्रास्ट रेशियो प्राप्त होता है।

यदि आप कोई अमान्य रंग दर्ज करते हैं, तो टूल निम्नलिखित त्रुटि संदेश दिखाता है:

• टेक्स्ट रंग अमान्य होने पर: "कोई सही टेक्स्ट रंग डालें, जैसे #1a1a1a या rgb(26, 26, 26)।"
• बैकग्राउंड रंग अमान्य होने पर: "कोई सही बैकग्राउंड रंग डालें, जैसे #ffffff या rgb(255, 255, 255)।"

जाँच के बाद टूल निम्नलिखित आउटपुट प्रदान करता है:

• कंट्रास्ट रेशियो: दोनों रंगों के बीच का गणितीय अनुपात, जिसे "X:1" के रूप में दर्शाया जाता है।
• सामान्य टेक्स्ट: इसके लिए AA और AAA स्तरों के तहत "पास" या "फेल" का परिणाम दिखाया जाता है।
• बड़ा टेक्स्ट: इसके लिए भी AA और AAA स्तरों के तहत "पास" या "फेल" का परिणाम प्रदर्शित होता है।
• UI और ग्राफ़िक्स: यह पंक्ति केवल 3:1 की एकल सीमा (threshold) के आधार पर "पास" या "फेल" दर्शाती है। इसमें AA और AAA का कोई अलग वर्गीकरण नहीं होता है।

AA और AAA एक्सेसिबिलिटी स्तरों में अंतर

WCAG मानकों के तहत सुगम्यता को दो मुख्य स्तरों में विभाजित किया गया है:

AA स्तर को अधिकांश वेबसाइटों और डिजिटल सामग्रियों के लिए एक मानक अनुपालन माना जाता है। AAA स्तर अधिक कड़ा है और यह उन डिज़ाइनों के लिए आवश्यक होता है जहाँ अत्यधिक स्पष्टता और सुगम्यता की आवश्यकता होती है।

सामान्य टेक्स्ट बनाम बड़ा टेक्स्ट

एक्सेसिबिलिटी के नियमों में टेक्स्ट के आकार के आधार पर कंट्रास्ट की आवश्यकताएं बदल जाती हैं। बड़ा टेक्स्ट अपनी मोटाई और आकार के कारण कम कंट्रास्ट में भी आसानी से पढ़ा जा सकता है।

WCAG के अनुसार "बड़ा टेक्स्ट" उसे माना जाता है जो:

• बिना बोल्ड किए कम से कम 18pt (लगभग 24px) आकार का हो।
• बोल्ड होने पर कम से कम 14pt (लगभग 18.5px) आकार का हो।

इससे छोटे आकार के सभी टेक्स्ट को "सामान्य टेक्स्ट" की श्रेणी में रखा जाता है, जिसके लिए अधिक कड़े कंट्रास्ट रेशियो (AA के लिए 4.5:1 और AAA के लिए 7:1) की आवश्यकता होती है।

UI कंपोनेंट्स और ग्राफ़िक्स का महत्व

केवल टेक्स्ट ही नहीं, बल्कि वेबसाइट या ऐप के अन्य दृश्य तत्व भी सुगम होने चाहिए। टूल में मौजूद "UI और ग्राफ़िक्स" श्रेणी सक्रिय यूजर इंटरफेस घटकों (जैसे बटन के बॉर्डर, इनपुट फ़ील्ड की सीमाएं) और महत्वपूर्ण ग्राफ़िकल तत्वों की सुगम्यता की जाँच करती है।

इस श्रेणी के लिए मानक नियम यह है कि कंट्रास्ट रेशियो कम से कम 3:1 होना चाहिए। इस श्रेणी में सामान्य और बड़े टेक्स्ट की तरह AA या AAA के अलग-अलग स्तर नहीं होते हैं, बल्कि यह केवल एक ही 3:1 की सीमा पर "पास" या "फेल" का परिणाम देती है।

टूल का निष्कर्ष (Verdict)

आपके द्वारा चुने गए रंगों के आधार पर टूल एक अंतिम निष्कर्ष जारी करता है जो इस प्रकार होते हैं:

• सामान्य टेक्स्ट के लिए AA और AAA पास। (यह तब दिखता है जब कंट्रास्ट रेशियो 7:1 या उससे अधिक हो)।
• सामान्य टेक्स्ट के लिए AA पास। (यह तब दिखता है जब कंट्रास्ट रेशियो 4.5:1 से 6.99:1 के बीच हो)।
• सिर्फ़ बड़े टेक्स्ट के लिए AA पास। (यह तब दिखता है जब कंट्रास्ट रेशियो 3:1 से 4.49:1 के बीच हो)।
• AA की न्यूनतम सीमा से नीचे — कंट्रास्ट बढ़ाएँ। (यह तब दिखता है जब कंट्रास्ट रेशियो 3:1 से कम हो)।

गोपनीयता और डेटा प्रोसेसिंग

इस टूल का उपयोग करते समय आपकी गोपनीयता पूरी तरह सुरक्षित रहती है। हर जाँच आपके ब्राउज़र में ही चलती है। आपका डाला हुआ कोई भी डेटा या रंग का मान BroBroGo पर अपलोड नहीं होता है।

---

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

AA और AAA नतीजों का क्या मतलब है?

AA वह लेवल है जिसे ज़्यादातर साइटें हासिल करने की कोशिश करती हैं: इसके लिए सामान्य टेक्स्ट में कम से कम 4.5:1 और बड़े टेक्स्ट में 3:1 रेशियो चाहिए। AAA इससे सख़्त है — सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1। रेशियो 1:1 (कोई कंट्रास्ट नहीं) से 21:1 (सफ़ेद पर काला) तक होता है।

बड़ा टेक्स्ट किसे माना जाता है?

18pt (करीब 24px) से बड़ा टेक्स्ट, या बोल्ड होने पर 14pt (करीब 18.5px) से बड़ा। बड़ा टेक्स्ट कम कंट्रास्ट पर भी पढ़ने लायक रहता है, इसलिए सामान्य टेक्स्ट की सख़्त सीमाओं के बजाय यह AA में 3:1 और AAA में 4.5:1 पर पास हो जाता है।

मैं रंग किन फ़ॉर्मैट में डाल सकता हूँ?

#1a1a1a जैसा HEX मान डालें, rgb(26, 26, 26) जैसा rgb() मान, या कोई hsl() मान — या रंग चुनने के लिए किसी भी स्वैच पर क्लिक करें। टेक्स्ट और बैकग्राउंड के रंग आपस में बदलने के लिए स्वैप बटन दबाएँ।

यह WCAG 2 है या नया APCA तरीका?

यह WCAG 2.1 / 2.2 फ़ॉर्मूला इस्तेमाल करता है, वही जिसे आज एक्सेसिबिलिटी नियम और ऑडिट मानते हैं। APCA एक नया, धारणा पर ज़्यादा आधारित तरीका है जो अभी WCAG 3 के लिए तैयार हो रहा है — उम्मीद जगाता है, पर अभी अनुपालन का मानक नहीं, इसलिए यहाँ के पास/फेल नतीजे इसका इस्तेमाल नहीं करते।