डिज़ाइन से पठनीय

इस रंग युग्म को यथार्थवादी पाठ ब्लॉक में देखें।

कंट्रास्ट अनुपात

17.32:1

सामान्य पाठ AA

पास

सामान्य पाठ AAA

पास

बड़ा पाठ AA

पास

बड़ा पाठ AAA

पास

UI घटक AA

पास

रंग कंट्रास्ट जाँचक

WCAG रंग कंट्रास्ट जाँचें और HEX, RGB और HSL के बीच रंग बदलें।

कंट्रास्ट कैसे जाँचें

दोनों रंग दर्ज करें, WCAG परिणामों की समीक्षा करें, फिर परिवर्तित मान कॉपी करें।

कंट्रास्ट कैसे जाँचें

कंट्रास्ट अनुपात की गणना कैसे की जाती है?

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

WCAG AA और AAA कंट्रास्ट परिणामों का क्या अर्थ है?

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

क्या आइकन, नियंत्रण और फोकस संकेतकों को कंट्रास्ट जाँच की आवश्यकता है?

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

पारदर्शिता, ग्रेडिएंट और छवि पृष्ठभूमि का परीक्षण कैसे करें?

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

क्या कंट्रास्ट जाँचक पास करना एक सुलभ डिज़ाइन की गारंटी देता है?

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