कोई अपलोड नहीं, 100% स्थानीय, कोई खाता नहीं

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

दो रंग टाइप करें या चुनें और तुरंत WCAG कंट्रास्ट रेशियो देखें, नॉर्मल और बड़े टेक्स्ट के लिए AA/AAA पास बैज के साथ।

कंट्रास्ट चेकर कैसे काम करता है

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

कंट्रास्ट चेकर: चरण दर चरण उपयोग विधि

  1. फ़ोरग्राउंड (टेक्स्ट) रंग दर्ज करें या चुनें।
  2. बैकग्राउंड रंग दर्ज करें या चुनें।
  3. सामान्य टेक्स्ट, बड़े टेक्स्ट, और गैर-टेक्स्ट UI तत्वों के लिए कंट्रास्ट अनुपात और AA/AAA बैज पढ़ें।
  4. जोड़ी को उलटकर चेक करने के लिए Swap colors का उपयोग करें।

सामान्य उपयोग के मामले

  • किसी बटन कंपोनेंट को शिप करने से पहले किसी ब्रांड के प्राइमरी रंग को सफ़ेद या काले के मुक़ाबले जाँचना।
  • यह पुष्टि करना कि हल्के ग्रे बॉडी टेक्स्ट किसी हल्के कार्ड बैकग्राउंड पर अब भी AA पार करता है।
  • यह पुष्टि करना कि किसी पैराग्राफ़ के अंदर लिंक का रंग 4.5:1 वाले नॉर्मल-टेक्स्ट थ्रेशोल्ड तक पहुँचता है।
  • यह जाँचना कि क्या कोई बड़ा, हल्के वज़न वाला हेडिंग अब भी 3:1 वाले ढीले लार्ज-टेक्स्ट थ्रेशोल्ड को पार करता है।

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

क्या यह टूल मेरे रंगों को किसी सर्वर पर भेजता है?

नहीं, गणना पूरी तरह आपके ब्राउज़र में जावास्क्रिप्ट से होती है; आपके द्वारा दर्ज कुछ भी अपलोड नहीं होता।

AA या AAA के लिए मुझे कितना कंट्रास्ट अनुपात चाहिए?

WCAG 2.x को सामान्य टेक्स्ट के लिए AA में 4.5:1, AAA में 7:1, और बड़े टेक्स्ट के लिए AA में 3:1, AAA में 4.5:1 चाहिए।

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

सामान्य मोटाई में कम से कम 24px (18pt), या बोल्ड में लगभग 18.7px (14pt); इससे छोटा कोई भी टेक्स्ट सामान्य टेक्स्ट की सीमा उपयोग करता है।

फ़ोरग्राउंड और बैकग्राउंड स्वैप करने से अनुपात क्यों नहीं बदलता?

अनुपात का फ़ॉर्मूला सिमेट्रिक है: यह सिर्फ़ हल्के और गहरे ल्यूमिनेंस की तुलना करता है, यह नहीं कि टेक्स्ट के लिए कौन-सा रंग उपयोग हो रहा है। फिर भी स्वैप करना उपयोगी है क्योंकि इससे पता चलता है कि जोड़ी भूमिकाएँ पलटने पर भी काम करती है या नहीं, जैसे हल्के चिप पर गहरा टेक्स्ट बनाम गहरे चिप पर हल्का टेक्स्ट।

क्या AA पास करने से मेरे डिज़ाइन के एक्सेसिबल होने की गारंटी मिलती है?

नहीं। कंट्रास्ट कई WCAG सफलता मानदंडों में से सिर्फ़ एक है। रंग-दृष्टि की कमी वाले लोगों के लिए रंग चुनाव, फ़ोकस की दिखावट, टेक्स्ट रीसाइज़िंग और कीबोर्ड नेविगेशन अलग-अलग जाँच हैं; इस साइट पर मौजूद कलर-ब्लाइंडनेस सिम्युलेटर इनमें से एक को कवर करता है।

क्या यह W3C या WebAIM का आधिकारिक टूल है?

नहीं। यह पब्लिक WCAG 2.x कंट्रास्ट फ़ॉर्मूला स्वतंत्र रूप से लागू करता है और W3C या किसी भी अन्य एक्सेसिबिलिटी संगठन से संबद्ध नहीं है।