डिज़ाइनरों के लिए WCAG कलर कंट्रास्ट
4.5:1 नियम, कंट्रास्ट अनुपात गणित, और किसी भी रंग जोड़ी की जांच करने के लिए मुफ्त उपकरण।
यदि आपका टेक्स्ट WCAG AA कंट्रास्ट में विफल रहता है, तो अनुमानित 285 मिलियन दृष्टिबाधित लोग इसे नहीं पढ़ सकते। साथ ही, EU और US में आप कानूनी रूप से अस्थिर जमीन पर हैं। अच्छी खबर: नियम सरल है।
4.5:1 नियम
बॉडी टेक्स्ट का अपनी पृष्ठभूमि के विरुद्ध कम से कम 4.5:1 का कंट्रास्ट अनुपात होना चाहिए ताकि WCAG AA पास हो सके। बड़े टेक्स्ट (24px+ नियमित या 18px+ बोल्ड) के लिए 3:1 की कम बाधा है।
AAA अनुरूपता के लिए: बॉडी के लिए 7:1, बड़े टेक्स्ट के लिए 4.5:1।
कंट्रास्ट अनुपात की गणना कैसे की जाती है
WCAG सापेक्ष ल्यूमिनेंस का उपयोग करता है — प्रत्येक रंग को एक विशिष्ट सूत्र का उपयोग करके ल्यूमिनेंस मान (0 = काला, 1 = सफेद) में बदलें, फिर (L1 + 0.05) / (L2 + 0.05) की गणना करें, जहां L1 हल्का रंग है।
आपको गणित करने की आवश्यकता नहीं है — किन्हीं दो रंगों को डालने और अनुपात देखने के लिए हमारे मुफ्त कंट्रास्ट चेकर का उपयोग करें।
सामान्य विफलता के मामले
- सफेद पर हल्का ग्रे — #999 on #fff = 2.85 (विफल)। #767676 on #fff = 4.54 (पास)।
- पीले पर सफेद — लगभग हमेशा विफल होता है। पीले पर गहरा टेक्स्ट उपयोग करें।
- बॉडी टेक्स्ट में रंगीन लिंक — अधिकांश नीले लिंक सफेद पर पास होते हैं लेकिन हल्के ग्रे पर विफल होते हैं। वास्तविक आसपास की पृष्ठभूमि का परीक्षण करें।
- ब्रांड रंग जो बहुत अच्छे लगते हैं — वे अक्सर विफल होते हैं। ऑफ-व्हाइट पृष्ठभूमि जोड़ें या टेक्स्ट को गहरा करें।
सुलभ रंग जोड़े चुनना
तीन विश्वसनीय पैटर्न:
- हल्के पर गहरा — #1f2937 on #fff = 14:1 (परफेक्ट)।
- गहरे पर सफेद — #fff on #1f2937 = 14:1 (परफेक्ट)।
- एक्सेंट पर गहरा — #1f2937 on #fbbf24 = 9:1 (बटन के लिए परफेक्ट)।
टेक्स्ट से परे
WCAG 2.1 को गैर-टेक्स्ट तत्वों (बटन, फोकस रिंग, फॉर्म बॉर्डर) के लिए भी 3:1 की आवश्यकता है। चेकर दोनों को संभालता है।
वॉलपेपर जो आपके विजेट से नहीं लड़ेंगे
यदि आप एक डिज़ाइनर हैं जो क्लॉक विजेट और नोटिफिकेशन के पीछे वॉलपेपर सेट कर रहे हैं, तो विजेट ज़ोन में 5:1 से कम कंट्रास्ट वाले वॉलपेपर चुनें। हमारा गॉसियन ब्लर टूल बेहतर विजेट पठनीयता के लिए किसी भी वॉलपेपर के व्यस्त क्षेत्रों को नरम कर सकता है।
हमारे मुफ्त टूल आज़माएं
इनमें से अधिकांश गाइड एक व्यावहारिक टूल के साथ आते हैं जिसे आप अभी उपयोग कर सकते हैं — पहली बार उपयोग के लिए साइन-अप की आवश्यकता नहीं:
- इमेज रिसाइज़र — पिक्सेल-परफेक्ट डाउनस्केल + अपस्केल।
- WebP में बदलें — JPG से 30-50% छोटी फ़ाइलें।
- बैकग्राउंड हटाने वाला — एक-क्लिक कटआउट, पारदर्शी PNG।
- फ़ेविकॉन जनरेटर — एक स्रोत से हर ब्राउज़र आकार।
- सोशल-मीडिया रिसाइज़र — हर प्लेटफ़ॉर्म के सटीक आयाम।
- बल्क प्रोसेसिंग — एक बार में 200 इमेज तक कोई भी टूल लागू करें।
पूरा टूल कैटलॉग ब्राउज़ करें।
