निःशुल्क WCAG रंग कंट्रास्ट चेकर: AA और AAA

WCAG 2.2 AA और AAA के विरुद्ध टेक्स्ट और पृष्ठभूमि रंगों का परीक्षण करें। सटीक कंट्रास्ट अनुपात देखें, चयनित फ़ॉन्ट आकार और वजन का पूर्वावलोकन करें, और पहचानें कि जोड़ी पास होती है या नहीं।

सटीक रंग जोड़ी की जाँच करें

परिणाम WCAG 2.2 सापेक्ष चमक का उपयोग करते हैं। पास या फेल पूर्ण मान का उपयोग करता है, भले ही बड़े अनुपात को प्रदर्शन के लिए गोल किया गया हो।

पाठ या अग्रभूमि रंग

अपारदर्शी #RGB या #RRGGBB। आवेदन करने के लिए Enter दबाएँ या फ़ील्ड छोड़ दें।

पृष्ठभूमि या निकटवर्ती रंग

अपारदर्शी #RGB या #RRGGBB। आवेदन करने के लिए Enter दबाएँ या फ़ील्ड छोड़ दें।

पूर्वावलोकन संदर्भ

फ़ॉन्ट आकारpxफ़ॉन्ट वजन

सामान्य पाठबड़े का अर्थ है कम से कम 24px नियमित या लगभग 18.67px बोल्ड।

पाठ का पूर्वावलोकन करें

उदाहरण जोड़े

लाइव टेक्स्ट पूर्वावलोकन

पठनीय पाठ हर किसी को कम प्रयास में कार्य पूरा करने में मदद करता है।

कंट्रास्ट अनुपात17.46:1पूर्ण: 17.457:1

सक्रिय नमूना

AA गुज़र जाता है सामान्य पाठ पाठ के लिए

इस आकार और वजन पर AA के लिए 4.5:1 और AAA के लिए 7:1 की आवश्यकता है।

WCAG जाँचन्यूनतमपरिणाम

एए सामान्य पाठ4.5:1उत्तीर्ण

एए बड़ा पाठ3:1उत्तीर्ण

एएए सामान्य पाठ7:1उत्तीर्ण

एएए बड़ा पाठ4.5:1उत्तीर्ण

यूआई और ग्राफिक्स एए3:1उत्तीर्ण

सक्रिय नमूना एए पास करता है। चयनित आकार और वजन रखें, फिर प्रत्येक राज्य के लिए जांच दोहराएं जो एक अलग रंग जोड़ी का उपयोग करता है।

यूआई और ग्राफ़िक्स पंक्ति केवल तभी लागू होती है जब ये रंग आवश्यक दृश्य और उसके वास्तविक आसन्न रंग का प्रतिनिधित्व करते हैं। एक जोड़ी परिणाम साइट-व्यापी एक्सेसिबिलिटी ऑडिट नहीं है।

रंग कंट्रास्ट ऑनलाइन कैसे जांचें

कदम 1

पाठ और पृष्ठभूमि रंग दर्ज करें

अपारदर्शी HEX मान चुनें या टाइप करें। एक अमान्य या अपूर्ण मान एक त्रुटि दिखाता है जबकि अंतिम वैध रंग सक्रिय रहता है।

कदम 2

नमूना पाठ का आकार और वजन सेट करें

इच्छित CSS संदर्भ से मेल करें ताकि सक्रिय निर्णय सामान्य या बड़े पाठ के लिए सही WCAG सीमा का उपयोग करे।

कदम 3

परिणाम की समीक्षा करें, उसे ठीक करें और कॉपी करें

अनुपात और पास या फेल मैट्रिक्स पढ़ें, ज़रूरत पड़ने पर एए सुझाव आज़माएं, फिर हैंडऑफ़ के लिए एक संक्षिप्त परिणाम कॉपी करें।

WCAG AA और AAA कंट्रास्ट परिणाम को समझें

एक परिकलित अनुपात की तुलना पाठ आकार, वजन और अनुरूपता स्तर के आधार पर विभिन्न WCAG 2.2 थ्रेशोल्ड से की जाती है।

सामान्य पाठ एक 4.5:1 AA थ्रेशोल्ड का उपयोग करता है

मुख्य प्रतिलिपि, लेबल, कैप्शन, और बड़े-पाठ परिभाषा के नीचे अन्य पाठ को AA के लिए कम से कम 4.5:1 की आवश्यकता है। उपकरण पूर्ण मान की तुलना करता है, इसलिए प्रदर्शित गोल परिणाम कभी भी विफलता को अपग्रेड नहीं करता है।

बड़ा टेक्स्ट 3:1 AA थ्रेशोल्ड का उपयोग कर सकता है

पाठ नियमित वजन के साथ 24px पर या बोल्ड होने पर 18.67px के बराबर बड़ा होता है। एक शीर्षक तत्व या दृश्यमान रूप से प्रमुख लेबल स्वचालित रूप से बड़ा पाठ नहीं है।

AAA 7:1 और 4.5:1 थ्रेसहोल्ड का उपयोग करता है

उन्नत कंट्रास्ट के लिए सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 की आवश्यकता होती है। इन्हें चयनित जोड़ी के परिणामों के रूप में मानें, न कि इस दावे के रूप में कि पूरा पृष्ठ स्तर एएए के अनुरूप है।

एक विफल रंग जोड़ी को ठीक करें

एक असफल परिणाम को ब्रांड और डिज़ाइन-सिस्टम समीक्षा के लिए जगह छोड़ते हुए एक ठोस अगले कदम की ओर ले जाना चाहिए।

सुझाए गए एए टेक्स्ट रंग आज़माएं

सुझाव अग्रभूमि को काले या सफेद की ओर ले जाता है जब तक कि यह सक्रिय नमूने के एए लक्ष्य तक नहीं पहुंच जाता। यह एक व्यावहारिक सुधार है, न कि अवधारणात्मक रूप से निकटतम ब्रांड रंग होने का दावा।

काले और सफ़ेद टेक्स्ट की तुलना करें

सरल चरम सीमाओं का परीक्षण करने से यह पता लगाने में मदद मिलती है कि कौन सी दिशा जोड़ी को बेहतर बनाती है। एक बार में कई चर बदलने के बजाय किसी ब्रांड शेड को जानबूझकर समायोजित करने के लिए उस दिशा का उपयोग करें।

प्रत्येक इंटरैक्टिव स्थिति की पुनः जाँच करें

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

यूआई घटक, आइकन और डिज़ाइन स्थिति जांचें

आवश्यक गैर-पाठ्य दृश्यों में उनके प्रासंगिक आसन्न रंग के विरुद्ध एक अलग 3:1 आवश्यकता होती है, और रंग को अकेले अर्थ नहीं देना चाहिए।

परीक्षण सीमाएँ और आवश्यक ग्राफ़िक्स

वास्तविक इनपुट बॉर्डर, बटन रूपरेखा, आइकन, चार्ट खंड, या फ़ोकस संकेतक और सीधे उसके बगल की सतह के लिए अग्रभूमि और पृष्ठभूमि फ़ील्ड का उपयोग करें।

फ़ोकस, चयनित और त्रुटि स्थिति की जाँच करें

एक घटक आराम की स्थिति में निष्क्रिय हो सकता है और अंतःक्रिया के बाद विफल हो सकता है। प्रत्येक सार्थक स्थिति का परीक्षण उन रंगों का उपयोग करके करें जो वास्तव में उस स्थिति में प्रस्तुत किए गए हैं।

केवल संकेत के रूप में रंग का उपयोग न करें

स्थिति और अर्थ के लिए टेक्स्ट, आइकन, पैटर्न, आकार या कोई अन्य दृश्य संकेत जोड़ें। एक मजबूत अनुपात केवल रंग निर्देश को हर किसी के लिए समझने योग्य नहीं बनाता है।

जानें कि सॉलिड-कलर कंट्रास्ट टेस्ट क्या साबित नहीं कर सकता

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

छवियाँ, ग्रेडिएंट और पारदर्शिता के लिए संदर्भ की आवश्यकता है

प्रभावी पृष्ठभूमि किसी तत्व में भिन्न हो सकती है। अंतिम मिश्रित डिज़ाइन का मूल्यांकन करें और एक ठोस जोड़ी को प्रतिनिधि मानने के बजाय सबसे कम-विपरीत क्षेत्रों की जाँच करें।

पतले फ़ॉन्ट और रेंडरिंग अभी भी पठनीयता को प्रभावित करते हैं

एंटी-अलियासिंग और पतले ग्लिफ़ निर्दिष्ट CSS रंग से हल्के दिखाई दे सकते हैं। गणना की गई जोड़ी को पास करना आवश्यक है, लेकिन इच्छित आकार पर दृश्य समीक्षा अभी भी मायने रखती है।

एक जोड़ी को पास करना पूर्ण एक्सेसिबिलिटी ऑडिट नहीं है

कंट्रास्ट कई आवश्यकताओं में से एक है। एक संपूर्ण समीक्षा में प्रत्येक घटक और स्थिति, संरचना, कीबोर्ड संचालन, ज़ूम और रिफ़्लो और सहायक प्रौद्योगिकी व्यवहार को भी शामिल किया गया है।

गोपनीयता और सीमाएँ

गणना इस ब्राउज़र टैब में चलती है। यह चेकर अपारदर्शी sRGB #RGB और #RRGGBB रंगों का समर्थन करता है; यह ग्रेडिएंट्स, छवियों, पारदर्शिता या संपूर्ण वेबसाइट का निरीक्षण नहीं करता है।

• केवल अपारदर्शी sRGB #RGB और #RRGGBB रंग समर्थित हैं।
• परिणाम एक रंग जोड़ी की जांच करता है और यह कानूनी या साइट-व्यापी पहुंच प्रमाणन नहीं है।
• ग्रेडिएंट, पृष्ठभूमि छवियां, पारदर्शिता, पतले-फ़ॉन्ट रेंडरिंग और बदलती स्थितियों के लिए प्रासंगिक समीक्षा की आवश्यकता होती है।

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

क्या यह रंग कंट्रास्ट चेकर उपयोग के लिए मुफ़्त है?

हां. रंग कंट्रास्ट चेकर पंजीकरण या लॉगिन के बिना ऑनलाइन उपयोग करने के लिए स्वतंत्र है, और परिणाम किसी अकाउंट गेट के पीछे छिपा नहीं है।

कौन सा कंट्रास्ट अनुपात WCAG AA से गुजरता है?

WCAG 2.2 AA को सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 की आवश्यकता होती है। उपयोगकर्ता इंटरफ़ेस घटकों और ग्राफ़िकल ऑब्जेक्ट्स में आवश्यक दृश्य जानकारी को प्रासंगिक आसन्न रंग के विरुद्ध कम से कम 3:1 की आवश्यकता होती है।

कौन सा कंट्रास्ट अनुपात WCAG AAA पास करता है?

WCAG 2.2 AAA को सामान्य टेक्स्ट के लिए कम से कम 7:1 और बड़े टेक्स्ट के लिए 4.5:1 की आवश्यकता होती है। जोड़ी-स्तरीय एएए परिणाम का मतलब यह नहीं है कि पूरा पृष्ठ या वेबसाइट एएए स्तर के अनुरूप है।

WCAG में बड़े टेक्स्ट के रूप में क्या गिना जाता है?

बड़ा टेक्स्ट नियमित वजन पर कम से कम 24 CSS पिक्सेल का होता है, या बोल्ड होने पर लगभग 18.67 CSS पिक्सेल का होता है। यह उपकरण वजन 700 को बोल्ड मानता है और सक्रिय पूर्वावलोकन को वर्गीकृत करने के लिए चयनित आकार और वजन का उपयोग करता है।

क्या प्रदर्शित 4.50:1 हमेशा सामान्य-पाठ AA पास करता है?

नहीं. पठनीयता के लिए दृश्यमान अनुपात को दो दशमलव तक पूर्णांकित किया जाता है, लेकिन उत्तीर्ण या असफल होने पर पूर्ण परिकलित मान का उपयोग किया जाता है। 4.499:1 जैसे मान को 4.5:1 आवश्यकता को पूरा करने के लिए पूर्णांकित नहीं किया जाता है।

क्या यह उपकरण गुजरने वाले रंग का सुझाव दे सकता है?

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

क्या मैं बटन, आइकन और बॉर्डर की जांच कर सकता हूं?

हां, जब दो चयनित रंग आवश्यक घटक सीमा, आइकन, या ग्राफ़िक और उसके वास्तविक आसन्न रंग का प्रतिनिधित्व करते हैं। यूआई और ग्राफिक्स एए पंक्ति का उपयोग करें, जो 3:1 थ्रेशोल्ड की जांच करता है, और प्रत्येक विशिष्ट स्थिति का अलग से परीक्षण करता है।

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

इस ठोस रंग वाले चेकर के साथ नहीं। यह अपारदर्शी sRGB HEX रंगों को स्वीकार करता है क्योंकि ग्रेडिएंट, चित्र और पारदर्शिता एक ही तत्व में अलग-अलग प्रभावी पृष्ठभूमि बना सकते हैं और प्रासंगिक मूल्यांकन की आवश्यकता होती है।

क्या उत्तीर्ण परिणाम मेरी वेबसाइट को WCAG के अनुरूप बनाता है?

नहीं. यह परिणाम एक निर्दिष्ट रंग जोड़ी को कवर करता है। संपूर्ण पहुंच समीक्षा में सभी स्थितियों और घटकों, कीबोर्ड उपयोग, शब्दार्थ, ज़ूम और रिफ्लो, सामग्री संरचना और सहायक प्रौद्योगिकी व्यवहार की जांच करने की भी आवश्यकता होती है।

क्या टूल मेरे रंगों को अपलोड या सहेजता है?

गणना के लिए किसी बाहरी सेवा का उपयोग नहीं किया जाता है। आपके रंग, नमूना पाठ और सेटिंग्स वर्तमान ब्राउज़र टैब में रहती हैं और पृष्ठ पुनः लोड होने पर स्टार्टर मानों पर वापस आ जाती हैं।