मुख पृष्ठ
/
ऐप्स
/
कलर ब्लाइंडनेस कंट्रास्ट चेकर
कलर ब्लाइंडनेस कंट्रास्ट चेकर

कलर ब्लाइंडनेस कंट्रास्ट चेकर

देखें कि आपके टेक्स्ट और बैकग्राउंड रंग प्रोटानोपिया, ड्यूटेरानोपिया, ट्राइटानोपिया और मोनोक्रोमेसी में कैसे दिखते हैं, और हर स्थिति के लिए WCAG AA/AAA कंट्रास्ट जांचें।

देखें कि आपके टेक्स्ट और बैकग्राउंड रंग प्रोटानोपिया, ड्यूटेरानोपिया, ट्राइटानोपिया और मोनोक्रोमेसी में कैसे दिखते हैं, और हर स्थिति के लिए WCAG AA/AAA कंट्रास्ट जांचें।

इस ऐप को साझा करें

कलर ब्लाइंडनेस कंट्रास्ट चेकर

यह कैलकुलेटर क्या करता है

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

सिमुलेशन कैसे काम करता है

हर कलर विजन डेफिशिएंसी को आपके टेक्स्ट और बैकग्राउंड रंग के sRGB मानों को एक निश्चित मैट्रिक्स से रूपांतरित करके सिम्युलेट किया जाता है, जो अनुमानित करता है कि वह स्थिति रंग सिग्नल को कैसे संकुचित करती है:

[RGB]=Mdeficiency×[RGB]\begin{bmatrix} R' \\ G' \\ B' \end{bmatrix} = M_{\text{deficiency}} \times \begin{bmatrix} R \\ G \\ B \end{bmatrix}

मोनोक्रोमेसी को दोनों रंगों को उनके परसेप्चुअल ल्यूमिनेंस (ग्रेस्केल) में बदलकर सिम्युलेट किया जाता है, क्योंकि पूरी तरह से कलर ब्लाइंड देखने वाला केवल ब्राइटनेस कंट्रास्ट पर निर्भर करता है:

Y=0.299R+0.587G+0.114BY = 0.299R + 0.587G + 0.114B

कंट्रास्ट रेशियो और WCAG सीमाएं

मूल रंगों और हर सिम्युलेटेड वेरिएंट के लिए, कंट्रास्ट की गणना मानक WCAG रिलेटिव ल्यूमिनेंस सूत्र से की जाती है:

L=0.2126Rlin+0.7152Glin+0.0722BlinL = 0.2126 R_{\text{lin}} + 0.7152 G_{\text{lin}} + 0.0722 B_{\text{lin}} Contrast Ratio=Llighter+0.05Ldarker+0.05\text{Contrast Ratio} = \frac{L_{\text{lighter}} + 0.05}{L_{\text{darker}} + 0.05}

फिर इस रेशियो को आपके चुने गए टेक्स्ट साइज़ के लिए WCAG 2.1 सीमाओं के अनुसार जांचा जाता है:

टेक्स्ट साइज़ AA (न्यूनतम) AAA (एन्हांस्ड)
सामान्य टेक्स्ट 4.5 : 1 7 : 1
बड़ा टेक्स्ट (18pt+/24px+, या बोल्ड 14pt+/18.66px+) 3 : 1 4.5 : 1

इसका उपयोग कैसे करें

  1. अपना टेक्स्ट रंग और बैकग्राउंड रंग चुनें।
  2. वह टेक्स्ट साइज़ श्रेणी चुनें जिसमें यह जोड़ी उपयोग होगी।
  3. सबमिट करें और सामान्य दृष्टि के साथ-साथ सभी चार डेफिशिएंसी प्रकारों के लिए सिम्युलेटेड रंगों और कंट्रास्ट रेशियो का विवरण, और WCAG AA के लिए एक त्वरित पास/फेल चेकलिस्ट देखें।

उदाहरण

#FFFFFF बैकग्राउंड पर #1A73E8 (एक सामान्य "लिंक ब्लू") टेक्स्ट, सामान्य दृष्टि में सामान्य टेक्स्ट के लिए WCAG AA पास करता है, लेकिन ड्यूटेरानोपिया में यह नीला रंग ग्रे की ओर शिफ्ट हो जाता है और सफेद से पर्याप्त ल्यूमिनेंस अंतर खो देता है जिससे प्रभावी कंट्रास्ट रेशियो कम हो जाता है — फॉर्म के नीचे की तालिका ठीक-ठीक दिखाती है कि कितना, ताकि आप शिप करने से पहले नीले रंग को गहरा करने या फ़ॉन्ट साइज़ बढ़ाने का निर्णय ले सकें।

नोट्स

  • यह टूल जन्मजात कलर विजन डेफिशिएंसी को सुस्थापित सन्निकटन मैट्रिक्स का उपयोग करके सिम्युलेट करता है; व्यक्तिगत धारणा अलग-अलग होती है, और यह सिम्युलेशन जहां संभव हो वहां वास्तविक उपयोगकर्ताओं के साथ परीक्षण का विकल्प नहीं है।
  • जो रंग जोड़ी केवल एक डेफिशिएंसी प्रकार में फेल होती है, उसे ठीक करना अभी भी उचित है — अकेले ड्यूटेरानोपिया दुनिया की लगभग 1% आबादी को प्रभावित करता है, जो कई अन्य एक्सेसिबिलिटी दिशानिर्देशों द्वारा संबोधित विकलांगताओं से अधिक है।
  • यदि तालिका की हर पंक्ति AA पास करती है, तो वह जोड़ी उस टेक्स्ट साइज़ पर कलर-ब्लाइंड पाठकों के लिए शिप करना सुरक्षित है; हर जगह AAA पास करना कम दृष्टि वाले उपयोगकर्ताओं के लिए भी अतिरिक्त गुंजाइश देता है।

संबंधित लेख

View all articles