रंग विषमता जाँचक
कलर कॉन्ट्रास्ट चेकर एक मुफ्त ऑनलाइन उपकरण है जो दो रंगों के बीच के कॉन्ट्रास्ट अनुपात का मूल्यांकन करता है ताकि यह सुनिश्चित हो सके कि वे WCAG (वेब कंटेंट एक्सेसिबिलिटी गाइडलाइन्स) के पहुँच योग्यता मानकों को पूरा करते हैं। दो रंग—फ्रंटग्राउंड (टेक्स्ट) और बैकग्राउंड—दर्ज करें या चुनें, और उपकरण तुरंत कॉन्ट्रास्ट अनुपात की गणना करेगा तथा यह दिखाएगा कि यह संयोजन सामान्य एवं बड़े टेक्स्ट के लिए WCAG 2.1 लेवल AA या AAA की आवश्यकताओं को पूरा करता है या नहीं।यह वेब डिज़ाइनरों, डेवलपर्स और कंटेंट निर्माताओं के लिए आवश्यक है, जिन्हें यह सुनिश्चित करने की आवश्यकता होती है कि उनका पाठ दृष्टिबाधित उपयोगकर्ताओं या कठिन प्रकाश परिस्थितियों में भी पढ़ने योग्य हो।
क्या है
रंग विपरीतता से तात्पर्य अग्रभूमि पर मौजूद पाठ और उसकी पृष्ठभूमि के बीच प्रकाशमानता (अनुभूत चमक) में अंतर से है। वेब सामग्री सुलभता दिशानिर्देश (WCAG) 2.1, दृष्टिबाधित व्यक्तियों के लिए पाठ को पठनीय बनाने हेतु न्यूनतम विपरीतता अनुपातों को परिभाषित करते हैं। WCAG कंट्रास्ट आवश्यकताएँ: - स्तर AA (न्यूनतम): सामान्य पाठ के लिए 4.5:1 (18pt/24px से कम), बड़े पाठ के लिए 3:1 (18pt + बोल्ड या 24pt + रेगुलर) - स्तर AAA (सुधारित): सामान्य पाठ के लिए 7:1, बड़े पाठ के लिए 4.5:1 - गैर-पाठ तत्व (आइकन, यूआई घटक): पड़ोसी रंगों के मुकाबले 3:1 कॉन्ट्रास्ट अनुपात की गणना कैसे की जाती है: सूत्र है: (L1 + 0.05) / (L2 + 0.05) जहाँ L1 हल्के रंग की सापेक्ष प्रकाशमानता है, और L2 गहरे रंग की सापेक्ष प्रकाशमानता है। सापेक्ष प्रकाशमानता की गणना γ-सुधार का उपयोग करके sRGB मानों को रैखिक प्रकाश में परिवर्तित करके की जाती है। कॉन्ट्रास्ट अनुपात 1:1 (कोई कॉन्ट्रास्ट नहीं, एक ही रंग) से लेकर 21:1 (अधिकतम कॉन्ट्रास्ट, सफेद पर काला) तक होता है। विपरीतता क्यों महत्वपूर्ण है: प्रति 12 पुरुषों में से एक को रंग दृष्टि की कमी होती है। उम्र बढ़ने से कॉन्ट्रास्ट संवेदनशीलता में कमी आती है। बाहरी स्क्रीन पर दृश्य देखने के लिए उच्च कंट्रास्ट की आवश्यकता होती है। कम दृष्टि वाले उपयोगकर्ता उच्च कंट्रास्ट पर निर्भर होते हैं। - कानूनी आवश्यकताएँ: एडीए (ADA), धारा 508, ईएन 301/549 यह उपकरण किसी भी रंग प्रारूप का इनपुट स्वीकार करता है और पास/फेल स्थिति के लिए स्पष्ट दृश्य संकेतकों के साथ अनुपालन स्तरों पर वास्तविक समय में प्रतिक्रिया प्रदान करता है।
कैसे उपयोग करें
- अपना फ्रंटग्राउंड रंग (टेक्स्ट का रंग) कलर पिकर, हेक्स इनपुट या किसी समर्थित रंग प्रारूप को पेस्ट करके चुनें। सामान्य विकल्पों में डार्क ग्रे (#333333) या आपका ब्रांड रंग शामिल हैं।
- उन्हीं विधियों का उपयोग करके अपना पृष्ठभूमि रंग चुनें। यह सफेद (#FFFFFF), हल्का ग्रे, या आपके डिज़ाइन में उपयोग किया गया कोई भी पृष्ठभूमि रंग हो सकता है।
- गणना किया गया कॉन्ट्रास्ट अनुपात स्पष्ट रूप से प्रदर्शित होता है। यह उपकरण प्रत्येक WCAG स्तर के लिए संख्यात्मक अनुपात (जैसे, 7.23:1) तथा दृश्य पास/फेल संकेतक दोनों दिखाता है।
- WCAG अनुपालन परिणामों की जाँच करें: यह उपकरण दिखाता है कि क्या आपका रंग संयोजन सामान्य टेक्स्ट एवं बड़े टेक्स्ट दोनों के लिए AA और AAA मानदंडों को पूरा करता है। हरा संकेतक 'पास' का अर्थ है, लाल संकेतक 'फेल' का अर्थ है।
- अपने डिज़ाइन के उद्देश्य को बनाए रखते हुए अपने रंगों को आवश्यकताओं के अनुरूप समायोजित करने के लिए 'हल्कापन/गहरापन समायोजित करें' स्लाइडर का उपयोग करें। दृश्य पूर्वावलोकन दिखाते हैं कि चुने गए पृष्ठभूमि पर आपका पाठ कैसा दिखेगा।
- स्वैप बटन का उपयोग करके फ्रंटग्राउंड और बैकग्राउंड रंगों को बदलकर एक साथ कई रंग विकल्पों का त्वरित परीक्षण करें। अपने CSS में उपयोग के लिए अंतिम अनुपालनीय रंग जोड़े के मान कॉपी करें।
उदाहरण
इनपुट: Foreground: #000000, Background: #FFFFFF
प्रक्रिया: L1=1.0, L2=0.0 → (L1+0.05)/(L2+0.05)
परिणाम: Contrast ratio: 21:1 (AAA pass for all sizes)
इनपुट: Foreground: #767676, Background: #FFFFFF
प्रक्रिया: Relative luminance calc → Ratio formula
परिणाम: Contrast ratio: 4.54:1 (AA pass, AAA fail normal text)
संबंधित खोजें
लोग यह भी खोजते हैं: रंग विरोधाभास जाँचक, WCAC कॉन्ट्रास्ट, पहुँच अनुकूलता कंट्रास्ट, कॉन्ट्रास्ट अनुपात।
रंग विरोधाभास जाँचकWCAC कॉन्ट्रास्टपहुँच अनुकूलता कंट्रास्टकॉन्ट्रास्ट अनुपात
अक्सर पूछे जाने वाले प्रश्न
सामान्य पाठ के लिए स्वीकार्य कॉन्ट्रास्ट अनुपात क्या है?
सामान्य पाठ के लिए (18 पॉइंट्स से कम बोल्ड या 24 पिक्सेल रेगुलर फॉन्ट में), WCAG 2.1 लेवल AA के अनुसार न्यूनतम कॉन्ट्रास्ट अनुपात 4.5:1 होना आवश्यक है। लेवल AAA के लिए यह अनुपात 7:1 होना चाहिए। यदि आपका अनुपात 4.5:1 से कम है, तो आपको पाठ को गहरा या पृष्ठभूमि को हल्का करना चाहिए। सामान्य पाठ के लिए 7:1 या उससे अधिक का अनुपात AA एवं AAA दोनों मानदंडों को पूरा करता है और सर्वोत्तम पहुँच योग्यता प्रदान करता है।
क्या बड़े टेक्स्ट के लिए कॉन्ट्रास्ट अनुपात में परिवर्तन होता है?
हाँ। बड़े टेक्स्ट (18 पॉइंट का बोल्ड या उससे बड़ा, या 24 पॉइंट का सामान्य या उससे बड़ा) के लिए न्यूनतम कॉन्ट्रास्ट की आवश्यकताएँ कम होती हैं: AA के लिए 3:1 और AAA के लिए 4.5:1। ऐसा इसलिए है क्योंकि बड़े टेक्स्ट को कम कॉन्ट्रास्ट पर भी पढ़ना आसान होता है। हालाँकि, यदि आपका टेक्स्ट 4.5:1 पर भी पढ़ा जा सकता है, तो यह अधिक सुरक्षित है, क्योंकि उपयोगकर्ता ब्राउज़र ज़ूम या डिवाइस में अंतर के कारण हमेशा अपेक्षित आकारों में टेक्स्ट नहीं देख पाते।
WCAG के विपरीतता आवश्यकताओं में कोई अपवाद हैं या नहीं?
Yes. WCAG exempts: 1) Logos and brand names (no contrast requirement). 2) Decorative text that conveys no information. 3) Inactive/disabled UI elements. 4) Text in photographs or images (though alt text should be provided). However, if text conveys information, it must meet contrast requirements regardless of context.
क्या मैं कंट्रास्ट सुधारने के लिए अर्ध-पारदर्शी पृष्ठभूमि का उपयोग कर सकता हूँ?
हाँ, लेकिन गणना और अधिक जटिल हो जाती है। यदि आपकी पृष्ठभूमि अर्ध-पारदर्शी है एवं किसी अन्य रंग पर स्थित है, तो प्रभावी पृष्ठभूमि रंग मिश्रण होता है। यह उपकरण आपको अल्फा पारदर्शिता को ध्यान में रखने की अनुमति देता है एवं मिश्रित परिणाम को प्रदर्शित करता है। अल्फा संयोजन के बाद प्राप्त अंतिम दृश्य रंग ही कंट्रास्ट गणना के लिए महत्वपूर्ण होता है।
मैं अपने ब्रांड पैलेट से सुलभ रंग कैसे चुनूँ?
अपने ब्रांड रंगों को पूर्वभूमि या पृष्ठभूमि के रूप में चुनें, फिर अन्य रंगों को आवश्यकताओं के अनुसार समायोजित करें। उजालापन स्लाइडर का उपयोग करें: यदि आपका ब्रांड रंग गहरा है, तो इसे हल्की पृष्ठभूमि के साथ जोड़ें; यदि यह हल्का है, तो गहरे/धूसर टेक्स्ट के साथ। वैकल्पिक रूप से, ब्रांड पहचान को बनाए रखते हुए एवं कॉन्ट्रास्ट की आवश्यकताओं को पूरा करते हुए अपने ब्रांड रंग के थोड़े गहरे या हल्के शेड का उपयोग करें।