इस लेख में
रंग कंट्रास्ट क्या है और यह क्यों मायने रखता है
रंग कंट्रास्ट दो रंगों के बीच चमक का अंतर है, आमतौर पर अग्रभूमि टेक्स्ट और उसकी पृष्ठभूमि के बीच। पर्याप्त कंट्रास्ट यह सुनिश्चित करता है कि टेक्स्ट सभी के लिए पठनीय हो, जिनमें कम दृष्टि या रंग अंधता वाले लोग भी शामिल हैं। ख़राब कंट्रास्ट सामग्री को पढ़ना कठिन या असंभव बना देता है, जिससे लाखों उपयोगकर्ता बाहर हो जाते हैं।
Web Content Accessibility Guidelines (WCAG) न्यूनतम कंट्रास्ट अनुपात परिभाषित करते हैं जो दृश्य क्षमताओं की विस्तृत श्रेणी में पठनीयता सुनिश्चित करते हैं। इन मानकों को पूरा करना केवल अच्छी प्रथा ही नहीं है — यह ADA, EAA और EN 301 549 जैसे सुलभता क़ानूनों के तहत कई क्षेत्राधिकारों में एक क़ानूनी आवश्यकता है।
WCAG कंट्रास्ट अनुपात कैसे काम करते हैं
WCAG दो रंगों के बीच कंट्रास्ट अनुपात की गणना के लिए सापेक्ष चमक (relative luminance) का उपयोग करता है। यह सूत्र 1:1 (कोई कंट्रास्ट नहीं, समान रंग) से 21:1 (अधिकतम कंट्रास्ट, सफ़ेद पर काला) तक का अनुपात देता है।
- सापेक्ष चमक की गणना रैखिक sRGB मानों से इस सूत्र का उपयोग करके की जाती है: L = 0.2126R + 0.7152G + 0.0722B
- कंट्रास्ट अनुपात (L1 + 0.05) / (L2 + 0.05) होता है जहाँ L1 हल्का रंग है और L2 गहरा
- सामान्य टेक्स्ट (18pt या 14pt बोल्ड से कम) के लिए AA हेतु कम से कम 4.5:1 और AAA अनुपालन हेतु 7:1 आवश्यक है
निःशुल्क आज़माएँ — कोई साइनअप आवश्यक नहीं
रंग कंट्रास्ट जाँचें →WCAG AA बनाम AAA अनुपालन स्तरों को समझना
WCAG रंग कंट्रास्ट के लिए दो अनुपालन स्तर परिभाषित करता है। स्तर AA अधिकांश सुलभता विनियमों द्वारा आवश्यक न्यूनतम मानक है, जबकि AAA अधिक गंभीर दृश्य दुर्बलताओं वाले उपयोगकर्ताओं के लिए उन्नत सुलभता प्रदान करता है।
- AA सामान्य टेक्स्ट — 18pt (या 14pt बोल्ड) से छोटे टेक्स्ट के लिए कम से कम 4.5:1 का कंट्रास्ट अनुपात आवश्यक है
- AA बड़ा टेक्स्ट — 18pt और उससे ऊपर (या 14pt बोल्ड और ऊपर) के टेक्स्ट के लिए कम से कम 3:1 आवश्यक है
- AAA सामान्य टेक्स्ट — पठनीयता के उच्चतम स्तर के लिए कम से कम 7:1 आवश्यक है
- AAA बड़ा टेक्स्ट — उन्नत स्तर पर बड़े टेक्स्ट के लिए कम से कम 4.5:1 आवश्यक है
- ग़ैर-टेक्स्ट कंट्रास्ट — UI घटकों और ग्राफ़िक वस्तुओं के लिए आसपास के रंगों के मुक़ाबले कम से कम 3:1 आवश्यक है
सुलभ रंग डिज़ाइन के लिए सुझाव
सुलभता को ध्यान में रखकर डिज़ाइन करने का मतलब सौंदर्य की बलि देना नहीं है। ये व्यावहारिक सुझाव आपको ऐसे सुंदर डिज़ाइन बनाने में मदद करते हैं जिन्हें हर कोई इस्तेमाल कर सके।
- कंट्रास्ट से शुरुआत करें — पहले अपने टेक्स्ट और पृष्ठभूमि के रंग चुनें, फिर उनके इर्द-गिर्द अपना पैलेट बनाएँ
- कभी केवल रंग पर निर्भर न रहें — अर्थ बताने के लिए रंग के साथ आइकन, पैटर्न या लेबल का उपयोग करें
- वास्तविक सामग्री के साथ परीक्षण करें — प्लेसहोल्डर टेक्स्ट ठीक लग सकता है, पर अलग-अलग लंबाई की वास्तविक सामग्री कंट्रास्ट की समस्याएँ उजागर कर सकती है
- डार्क मोड पर अलग से विचार करें — लाइट मोड में पास होने वाले रंग डार्क मोड में विफल हो सकते हैं और इसके विपरीत भी
- कंट्रास्ट चेकर टूल का उपयोग करें — स्वचालित टूल मैन्युअल जाँच की तुलना में समस्याओं को तेज़ी से पकड़ते हैं और गिरावट को रोकते हैं
अक्सर पूछे जाने वाले प्रश्न
WCAG अनुपालन के लिए न्यूनतम कंट्रास्ट अनुपात क्या है?
WCAG 2.1 स्तर AA के लिए, सामान्य टेक्स्ट को कम से कम 4.5:1 कंट्रास्ट अनुपात की आवश्यकता होती है, और बड़े टेक्स्ट (18pt या 14pt बोल्ड) को कम से कम 3:1 की। स्तर AAA इन्हें क्रमशः 7:1 और 4.5:1 तक बढ़ा देता है। अधिकांश सुलभता क़ानून स्तर AA को न्यूनतम मानक के रूप में संदर्भित करते हैं।
क्या रंग कंट्रास्ट छवियों और आइकन के लिए मायने रखता है?
हाँ। WCAG 2.1 Success Criterion 1.4.11 के अनुसार UI घटकों और ग्राफ़िक वस्तुओं का आसपास के रंगों के मुक़ाबले कम से कम 3:1 कंट्रास्ट होना चाहिए। इसमें आइकन, फ़ॉर्म फ़ील्ड की सीमाएँ, फ़ोकस संकेतक और चार्ट एलिमेंट शामिल हैं। सजावटी छवियाँ इससे मुक्त हैं।
मैं अपने ब्रांड रंग बदले बिना कम कंट्रास्ट कैसे ठीक करूँ?
आप एक ही रंग और संतृप्ति (saturation) रखते हुए अपने ब्रांड रंगों की हल्कापन (lightness) समायोजित कर सकते हैं। उदाहरण के लिए, टेक्स्ट के लिए किसी हल्के नीले को गहरा करें या किसी गहरी पृष्ठभूमि को हल्का करें। एक और तरीक़ा यह है कि अपने ब्रांड रंगों का उपयोग बड़े सजावटी एलिमेंट के लिए करें जहाँ कंट्रास्ट आवश्यकताएँ कम होती हैं, और मुख्य टेक्स्ट के लिए उच्च-कंट्रास्ट वाले तटस्थ रंगों का उपयोग करें।