CSS और फ़्रंट-एंड विकास उपकरण

WCAG कंट्रास्ट जाँच उपकरण

टेक्स्ट और बैकग्राउंड के रंग चुनें। कंट्रास्ट अनुपात और WCAG AA / AAA परिणाम तुरंत देखें।

इनपुट मान

आपके ब्राउज़र में प्रोसेस होता है

लाइव प्रीव्यू

बदलाव करते ही अपने आप अपडेट होता है
सीधे चुनें या कॉपी करें

टेक्स्ट और बैकग्राउंड का कंट्रास्ट निकालें तथा WCAG AA / AAA की चारों टेक्स्ट सीमाएँ जाँचें।

आपका इनपुट केवल आपके ब्राउज़र में प्रोसेस होता है और सर्वर पर अपलोड नहीं किया जाता।

इस उपकरण के बारे में

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

कैसे इस्तेमाल करें

  1. टेक्स्ट और बैकग्राउंड के रंग अपारदर्शी 3 या 6 अंकों वाले HEX में दर्ज करें।
  2. चुने हुए बैकग्राउंड पर टेक्स्ट का वास्तविक रूप देखें।
  3. कंट्रास्ट अनुपात और चारों सफल / असफल परिणाम जाँचें।
  4. रंग बदलें, दोबारा जाँचें और परिणाम कॉपी करें।

उदाहरण

  • #000000 और #ffffff → 21:1।
  • दो एक जैसे रंग → 1:1।
  • #777777 और #ffffff → लगभग 4.48:1, जो सामान्य टेक्स्ट के AA मानक 4.5:1 से कम है।

गणना की विधि

पहले हर sRGB चैनल को 255 से भाग दें। यदि c ≤ 0.04045 हो, तो रैखिक चैनल c / 12.92 है; अन्यथा ((c + 0.055) / 1.055)^2.4 है। सापेक्ष दीप्ति L = 0.2126R + 0.7152G + 0.0722B है। कंट्रास्ट = (अधिक दीप्ति वाला L + 0.05) / (कम दीप्ति वाला L + 0.05)। सफल / असफल का निर्णय पूरे, बिना राउंड किए परिणाम से होता है। राउंडिंग केवल दिखाने के लिए की जाती है।

WCAG 2.x टेक्स्ट कंट्रास्ट की न्यूनतम सीमाएँ

  • AA सामान्य टेक्स्ट: कम से कम 4.5:1।
  • AA बड़ा टेक्स्ट: कम से कम 3:1।
  • AAA सामान्य टेक्स्ट: कम से कम 7:1।
  • AAA बड़ा टेक्स्ट: कम से कम 4.5:1।

बड़ा टेक्स्ट सामान्यतः कम से कम 18pt (24 CSS px) का होता है, या कम से कम 14pt (लगभग 18.67 CSS px) का बोल्ड टेक्स्ट होता है। सीमा की जाँच हमेशा बिना राउंड किए कंट्रास्ट अनुपात से होती है।

सामान्य उपयोग

  • बटन के टेक्स्ट और बैकग्राउंड रंग का कंट्रास्ट जाँचना।
  • थीम में सामान्य टेक्स्ट और शीर्षकों का कंट्रास्ट जाँचना।
  • WCAG टेक्स्ट कंट्रास्ट सीमाओं के अनुसार डिज़ाइन बदलना।

गोपनीयता

आपका इनपुट और परिणाम केवल आपके ब्राउज़र में संसाधित होते हैं; उन्हें अपलोड या अपने आप सेव नहीं किया जाता। जिन परिणामों को रखना हो, उन्हें कॉपी करके संभालकर रखें।

FAQ

WCAG कंट्रास्ट क्या है?

यह सापेक्ष दीप्ति के आधार पर टेक्स्ट और बैकग्राउंड के रंगों का अंतर मापता है। अनुपात 1:1 से 21:1 तक होता है।

4.5:1 का क्या अर्थ है?

यह WCAG AA में सामान्य टेक्स्ट का न्यूनतम कंट्रास्ट अनुपात है। सफल होने के लिए परिणाम कम से कम 4.5 होना चाहिए।

AA और AAA में क्या अंतर है?

टेक्स्ट कंट्रास्ट के लिए AAA की शर्तें AA से कड़ी हैं। सामान्य टेक्स्ट में 7:1 और बड़े टेक्स्ट में 4.5:1 चाहिए।

बड़ा टेक्स्ट किसे कहते हैं?

सामान्यतः कम से कम 18pt का टेक्स्ट या कम से कम 14pt का बोल्ड टेक्स्ट, जो क्रमशः लगभग 24px और 18.67px के बराबर है।

क्या पारदर्शी रंग या ग्रेडिएंट जाँच सकते हैं?

यह पेज केवल अपारदर्शी ठोस रंग जाँचता है। पारदर्शी रंग पहले वास्तविक बैकग्राउंड पर मिलाने चाहिए। ग्रेडिएंट में जहाँ-जहाँ टेक्स्ट हो, वहाँ सबसे कम कंट्रास्ट जाँचना चाहिए।

डेवलपर उपकरण सूची पर लौटें