कंट्रास्ट चेकर – WCAG कंट्रास्ट अनुपात
टेक्स्ट का रंग और बैकग्राउंड रंग दर्ज करें, कंट्रास्ट अनुपात की गणना करें और जानें कि आपका रंग संयोजन WCAG AA और AAA एक्सेसिबिलिटी मानकों को पूरा करता है या नहीं।
कंट्रास्ट जांचने के लिए दो रंग दर्ज करें
HEX, RGB, HSL और OKLCH प्रारूप समर्थित हैं
उदाहरण आज़माएं
एक्सेसिबिलिटी के लिए कलर कंट्रास्ट जाँचें
कलर कंट्रास्ट का पठनीयता पर सीधा प्रभाव पड़ता है। जब टेक्स्ट का रंग बैकग्राउंड से पर्याप्त अलग नहीं होता, तो उसे पढ़ना मुश्किल हो जाता है — विशेषकर कम दृष्टि वाले या रंग पहचान में कमी वाले उपयोगकर्ताओं के लिए।
यह कंट्रास्ट चेकर किन्हीं दो रंगों के बीच कंट्रास्ट अनुपात की गणना करता है और इसे WCAG 2.1 के मानदंडों के आधार पर मूल्यांकित करता है। HEX, RGB या HSL प्रारूप में रंग दर्ज करें और तुरंत परिणाम प्राप्त करें।
WCAG कंट्रास्ट स्तरों को समझें
वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस (WCAG) टेक्स्ट की पठनीयता के लिए न्यूनतम कंट्रास्ट अनुपात निर्धारित करती हैं। दो अनुपालन स्तर हैं:
- WCAG AA, सामान्य टेक्स्ट — कम से कम 4.5:1 कंट्रास्ट अनुपात आवश्यक
- WCAG AA, बड़ा टेक्स्ट — कम से कम 3:1 कंट्रास्ट अनुपात आवश्यक (बड़ा टेक्स्ट: 18pt+ या 14pt+ बोल्ड)
- WCAG AAA, सामान्य टेक्स्ट — कम से कम 7:1 कंट्रास्ट अनुपात आवश्यक
- WCAG AAA, बड़ा टेक्स्ट — कम से कम 4.5:1 कंट्रास्ट अनुपात आवश्यक
AA वह बुनियादी मानक है जिसे अधिकांश वेबसाइट और ऐप्स पूरा करना चाहते हैं। AAA उन्नत मानक है, जो उन स्थितियों में अनुशंसित है जहाँ अधिकतम पठनीयता ज़रूरी हो।
कंट्रास्ट चेकर का उपयोग कैसे करें
- टेक्स्ट (फ़ोरग्राउंड) रंग दर्ज करें — HEX, RGB या HSL प्रारूप में
- किसी भी समर्थित प्रारूप में बैकग्राउंड रंग दर्ज करें
- कंट्रास्ट अनुपात और उस बैकग्राउंड पर टेक्स्ट का लाइव प्रीव्यू देखें
- WCAG AA और AAA स्तरों के लिए पास/फ़ेल परिणाम जाँचें
- फ़ोरग्राउंड और बैकग्राउंड रंग को जल्दी बदलने के लिए स्वैप बटन का उपयोग करें
कलर कंट्रास्ट कब जाँचना चाहिए
- वेबसाइट या ऐप के लिए टेक्स्ट और बैकग्राउंड रंग चुनते समय
- यह सत्यापित करते समय कि डिज़ाइन सिस्टम एक्सेसिबिलिटी आवश्यकताओं को पूरा करता है
- बटन, लिंक या आइकन के रंगों को उनके बैकग्राउंड के विरुद्ध परखते समय
- डार्क मोड में रंग संयोजनों की जाँच करते समय
- कानूनी एक्सेसिबिलिटी मानकों (ADA, EAA, Section 508) का पालन करते समय
सटीक, तत्काल और मुफ़्त
यह टूल WCAG 2.1 की मानक सापेक्ष ल्यूमिनेंस फ़ॉर्मूले का उपयोग करके कंट्रास्ट अनुपात की गणना करता है। सभी गणनाएँ आपके ब्राउज़र में ही होती हैं — कोई डेटा किसी सर्वर पर नहीं भेजा जाता।
पहले कोई रंग खोजना या बदलना चाहते हैं? इमेज से रंग निकालने के लिए कलर पिकर का उपयोग करें, या HEX, RGB और HSL के बीच रूपांतरण के लिए कलर कनवर्टर का उपयोग करें।
अक्सर पूछे जाने वाले प्रश्न
- टेक्स्ट के लिए अच्छा कंट्रास्ट अनुपात क्या है?
- सामान्य आकार के टेक्स्ट के लिए, WCAG AA को कम से कम 4.5:1 कंट्रास्ट अनुपात चाहिए। बड़े टेक्स्ट (18pt या 14pt बोल्ड और ऊपर) के लिए न्यूनतम 3:1 है। उच्चतम एक्सेसिबिलिटी स्तर (WCAG AAA) पर सामान्य टेक्स्ट को कम से कम 7:1 चाहिए।
- WCAG AA और AAA में क्या अंतर है?
- AA वह मानक अनुपालन स्तर है जिसे अधिकांश वेबसाइट और ऐप्स को पूरा करना चाहिए। AAA उन्नत स्तर है जिसमें कंट्रास्ट की अधिक सख्त आवश्यकताएँ हैं, और यह उन स्थितियों में अनुशंसित है जहाँ अधिकतम पठनीयता महत्वपूर्ण हो, जैसे सरकारी या स्वास्थ्य सेवा वेबसाइटों पर।
- WCAG में बड़ा टेक्स्ट किसे कहते हैं?
- बड़ा टेक्स्ट 18 पॉइंट (24px) या उससे अधिक सामान्य वज़न में, या 14 पॉइंट (लगभग 18.66px) या उससे अधिक बोल्ड में परिभाषित होता है। बड़े टेक्स्ट के लिए कंट्रास्ट की कम आवश्यकताएँ हैं क्योंकि इसका आकार इसे स्वाभाविक रूप से पढ़ने में आसान बनाता है।
- यह चेकर कौन से कलर फ़ॉर्मेट सपोर्ट करता है?
- आप HEX (जैसे #1E293B), RGB (जैसे rgb(30, 41, 59)) या HSL (जैसे hsl(222, 33%, 17%)) प्रारूप में रंग दर्ज कर सकते हैं। टूल स्वचालित रूप से प्रारूप पहचान लेता है।
- कंट्रास्ट अनुपात की गणना कैसे होती है?
- कंट्रास्ट अनुपात WCAG 2.1 फ़ॉर्मूले से गणना किया जाता है: (L1 + 0.05) / (L2 + 0.05), जहाँ L1 हल्के रंग की सापेक्ष ल्यूमिनेंस है और L2 गहरे रंग की। परिणाम 1:1 (कोई कंट्रास्ट नहीं) से 21:1 (अधिकतम कंट्रास्ट, सफ़ेद पर काला) तक होता है।
- क्या यह टूल मोबाइल पर काम करता है?
- हाँ। कंट्रास्ट चेकर किसी भी आधुनिक ब्राउज़र वाले डिवाइस पर काम करता है — डेस्कटॉप, टैबलेट या फ़ोन।
- क्या यह टूल मुफ़्त है?
- हाँ। ColourPicker.app पूरी तरह मुफ़्त है और इसमें किसी साइनअप की ज़रूरत नहीं है।
- क्या मैं सिर्फ़ टेक्स्ट ही नहीं, बल्कि UI कंपोनेंट्स का भी कंट्रास्ट जाँच सकता हूँ?
- WCAG 2.1 में सार्थक UI कंपोनेंट्स और ग्राफ़िकल ऑब्जेक्ट्स के लिए भी न्यूनतम 3:1 कंट्रास्ट अनुपात आवश्यक है (सक्सेस क्राइटेरियन 1.4.11)। आप इस चेकर का उपयोग उन संयोजनों की जाँच के लिए भी कर सकते हैं — अनुपात गणना की विधि वही है।