कॉन्ट्रास्ट चेकर

सामने और पृष्ठभूमि के रंगों की तुलना करें, जोड़ी का पूर्वावलोकन देखें, और WCAG-शैली की AA तथा AAA कंट्रास्ट मार्गदर्शिका पढ़ें।

सभी कंट्रास्ट जाँच आपके ब्राउज़र में स्थानीय रूप से चलती हैं। कोई रंग मान हमारे सर्वरों पर भेजे नहीं जाते।

कॉन्ट्रास्ट चेकर

WCAG-शैली की सीमाओं के साथ सामने और पृष्ठभूमि के रंगों की तुलना करें।

यह अनुपात अपारदर्शी sRGB रंगों का उपयोग करता है। पारदर्शिता, ग्रेडिएंट, और फ़ॉन्ट रेंडरिंग के प्रभावों की मानव समीक्षा अभी भी आवश्यक है।

नमूना पूर्वावलोकन

पठनीय शीर्षक टेक्स्ट

सामान्य बॉडी टेक्स्ट दिखाता है कि कंट्रास्ट के निर्णय वास्तविक आकार और वजन पर निर्भर क्यों होते हैं।

#111827 / #FFFFFF
कॉन्ट्रास्ट अनुपात
17.74:1
AA सामान्य टेक्स्ट
पास
AA बड़ा टेक्स्ट
पास
AAA सामान्य टेक्स्ट
पास
AAA बड़ा टेक्स्ट
पास
ये WCAG-शैली के कंट्रास्ट संकेतक हैं, पूर्ण पहुँच ऑडिट नहीं। प्रोडक्ट भेजने से पहले वास्तविक फ़ॉन्ट आकार, वजन, स्थिति रंग और आसपास के UI की जाँच करें।

त्वरित उदाहरण

कौन सा चीज़ कंट्रास्ट चेकर मापता है?

एक कंट्रास्ट चेकर अग्रभूमि रंग और पृष्ठभूमि रंग की सापेक्ष चमक (relative luminance) की तुलना करता है। परिणाम 1:1 से लेकर 21:1 तक अनुपात के रूप में दिखाया जाता है, जहाँ रंग नेत्रहीन रूप से समान होते हैं (1:1) और काला एवं सफेद अधिकतम कंट्रास्ट देते हैं (21:1)।

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

परिणाम कैसे पढ़ें

Check न्यूनतम अनुपात Meaning
AA सामान्य टेक्स्ट 4.5:1 सामान्य बॉडी टेक्स्ट के लिए सामान्य लक्ष्य।
AA बड़े टेक्स्ट 3:1 उन पर लागू होता है जो बड़े या भारी अक्षर वाले होते हैं, जहाँ अक्षर के आकार पढ़ने में आसान होते हैं।
AAA सामान्य टेक्स्ट 7:1 उच्च-एक्सेसिबिलिटी संदर्भों में सामान्य टेक्स्ट के लिए कड़ा लक्ष्य।
AAA बड़े टेक्स्ट 4.5:1 बड़े टेक्स्ट के लिए कड़ा लक्ष्य।

यह टूल क्या प्रमाणित नहीं करता

एक अनुपात एक मजबूत संकेत है, पर यह पूर्ण एक्सेसिबिलिटी ऑडिट नहीं है। वास्तविक पठनीयता टाइपोग्राफी, फ़ॉन्ट वज़न, होवर/फोकस स्टेट्स, डिसेबल्ड स्टेट्स, आसपास के रंग, स्क्रीन की गुणवत्ता, और यह कि टेक्स्ट छवियों या ग्रेडिएंट्स पर दिखाई देता है या नहीं, इन पर भी निर्भर करती है।

  • पारदर्शिता और ग्रेडिएंट्स के लिए अलग समीक्षा आवश्यक है।
  • छोटे आइकन और पतले स्ट्रोक के लिए नजदीकी टेक्स्ट से अधिक मजबूत कंट्रास्ट की आवश्यकता हो सकती है।
  • ब्रांड रंग किसी एक पेयर में पास हो सकते हैं और दूसरे में फेल।
  • QR स्कैन कंट्रास्ट और टेक्स्ट पठनीयता कंट्रास्ट संबंधित हैं लेकिन समान जाँच नहीं हैं।

कमज़ोर कंट्रास्ट में सुधार के तरीके

फॉरग्राउंड को गहरा करें

हल्के पृष्ठभूमि के लिए, टेक्स्ट का रंग एक गहरे न्यूट्रल या मजबूत ब्रांड शेड के करीब ले जाएँ।

पृष्ठभूमि को हल्का करें

छोटे पृष्ठभूमि परिवर्तन ब्रांड रंग को बिना फॉरग्राउंड टोकन बदले पास करवा सकते हैं।

टेक्स्ट का आकार या वज़न बढ़ाएँ

बड़े या मोटे अक्षर वाले पाठ के लिए AA सीमा कम होती है, लेकिन फिर भी पर्याप्त दृश्य विभेदन आवश्यक है।

हर स्टेट की जाँच करें

होवर, फोकस, डिसेबल्ड, चयनित और त्रुटि स्टेट्स अक्सर विभिन्न रंग जोड़ों का उपयोग करते हैं।

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

क्या यह एक पूर्ण WCAG अनुरूपता ऑडिट है?

नहीं। यह रंग जोड़ों के लिए WCAG-मॉडल के कंट्रास्ट थ्रेशोल्ड्स की गणना करता है। एक पूर्ण समीक्षा लेआउट, कीबोर्ड व्यवहार, सिमेंटिक्स, फोकस स्टेट्स, टेक्स्ट विकल्प और वास्तविक रेंडर की गई टाइपोग्राफी की भी जाँच करती है।

बड़े टेक्स्ट की परिभाषा क्या है?

WCAG मार्गदर्शन बड़े टेक्स्ट को लगभग 18 pt सामान्य टेक्स्ट या 14 pt बोल्ड टेक्स्ट और उससे ऊपर के रूप में मानता है। वेब में, केवल डिजाइन लेबल नहीं बल्कि वास्तविक रेंडर किए गए आकार और वज़न की पुष्टि करें।

क्या मैं पारदर्शी रंगों के लिए इसे उपयोग कर सकता/सकती हूँ?

यह संक्षिप्त चेकर अपारदर्शी sRGB रंगों का उपयोग करता है। यदि आपका UI पारदर्शिता का उपयोग करता है, तो अंतिम रेंडर किया गया अग्रभूमि और पृष्ठभूमि पहले मिश्रित (blend) करें, फिर उस जोड़ी की जाँच करें।

क्या AA पास होने का अर्थ है कि डिज़ाइन हमेशा पठनीय है?

हम्मेशा नहीं। बहुत पतले फ़ॉन्ट्स, छोटे UI लेबल, व्यस्त पृष्ठभूमियाँ और निम्न-गुणवत्ता वाले डिस्प्ले फिर भी टेक्स्ट को पढ़ने में कठिन बना सकते हैं। अनुपात को एक महत्वपूर्ण संकेत के रूप में मानें।

क्या यह QR कोड कंट्रास्ट के समान है?

नहीं। QR कोड का कंट्रास्ट स्कैनर की विश्वसनीयता को प्रभावित करता है, जबकि यह टूल पाठ की पठनीयता की सीमाओं पर केंद्रित है। गणित संबंधित है, पर व्यवहारिक निर्णय अलग है।