कलर कंट्रास्ट चेकर
जाँचें कि आपका रंग संयोजन WCAG एक्सेसिबिलिटी मानकों को पूरा करता है या नहीं।
कलर कंट्रास्ट चेकर के बारे में
GuruAlpha कलर कंट्रास्ट चेकर फ़ोरग्राउंड और बैकग्राउंड रंगों के बीच कंट्रास्ट अनुपात को WCAG (वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस) मानकों के अनुसार मापता है। कोई भी दो रंग दर्ज करें और टूल उनका कंट्रास्ट अनुपात गणना करेगा, जो बताएगा कि यह संयोजन सामान्य और बड़े टेक्स्ट के लिए AA या AAA सुगम्यता मानकों को पूरा करता है या नहीं।
वेब सुगम्यता एक नैतिक अनिवार्यता भी है और कानूनी आवश्यकता भी। WCAG 2.1 दिशानिर्देश न्यूनतम कंट्रास्ट अनुपात निर्धारित करते हैं ताकि यह सुनिश्चित हो सके कि टेक्स्ट दृष्टि बाधित लोगों के लिए पठनीय हो, जिसमें रंग अंधता, कम दृष्टि और उम्र संबंधी दृष्टि गिरावट शामिल है। कंट्रास्ट चेकर आपके रंग विकल्पों पर तुरंत फ़ीडबैक देकर अनुपालन को आसान बना देता है।
टूल WCAG 2.1 में निर्दिष्ट सापेक्ष प्रकाशमानता सूत्र का उपयोग करके कंट्रास्ट अनुपात की गणना करता है। 1:1 का अनुपात यानी कोई कंट्रास्ट नहीं (समान रंग)। 21:1 का अनुपात अधिकतम कंट्रास्ट है (सफ़ेद पर काला)। WCAG आवश्यकताएँ हैं: AA सामान्य टेक्स्ट को 4.5:1, AA बड़े टेक्स्ट को 3:1, AAA सामान्य टेक्स्ट को 7:1 और AAA बड़े टेक्स्ट को 4.5:1 चाहिए। टूल स्पष्ट रूप से दिखाता है कि आपका रंग संयोजन प्रत्येक सीमा को पूरा करता है या नहीं।
दृश्य पूर्वावलोकन आपके टेक्स्ट का रंग बैकग्राउंड रंग पर दिखाता है, जिससे आपको पठनीयता का वास्तविक दृश्य मिलता है। पूर्वावलोकन में सामान्य (16px) और बड़े (24px+) दोनों टेक्स्ट नमूने शामिल हैं, क्योंकि विभिन्न आकारों की अलग WCAG आवश्यकताएँ होती हैं। पास/फ़ेल संकेतक रंग समायोजित करते ही रियल-टाइम में अपडेट होते हैं।
वेब डेवलपर्स और डिज़ाइनर्स के लिए, कंट्रास्ट चेकर यह सुनिश्चित करने के लिए आवश्यक है कि वेबसाइटें सभी उपयोगकर्ताओं के लिए सुलभ हों। यह डिज़ाइन वर्कफ़्लो में स्वाभाविक रूप से समाहित हो जाता है — रंग चुनें, कंट्रास्ट जाँचें, ज़रूरत हो तो समायोजित करें, और इस विश्वास के साथ आगे बढ़ें कि आपका टेक्स्ट पठनीय है।
कलर कंट्रास्ट चेकर की मुख्य विशेषताएँ
- किन्हीं दो रंगों के बीच कंट्रास्ट अनुपात की गणना
- WCAG AA और AAA अनुपालन जाँच
- सामान्य टेक्स्ट (4.5:1) और बड़े टेक्स्ट (3:1) की सीमाएँ
- बैकग्राउंड पर टेक्स्ट का लाइव पूर्वावलोकन
- मानकों को पूरा करने के लिए सुझाए गए रंग समायोजन
- HEX, RGB और HSL इनपुट समर्थन
- सभी उपकरणों पर काम करता है
- साइन-अप की आवश्यकता नहीं
कलर कंट्रास्ट चेकर का उपयोग कैसे करें
- GuruAlpha पर कंट्रास्ट चेकर खोलें।
- फ़ोरग्राउंड (टेक्स्ट) रंग दर्ज या चुनें।
- बैकग्राउंड रंग दर्ज या चुनें।
- कंट्रास्ट अनुपात और WCAG अनुपालन स्थिति देखें।
- सामान्य और बड़े दोनों टेक्स्ट की आवश्यकताएँ जाँचें।
- यदि संयोजन विफल हो तो रंग समायोजित करें।
- AA या AAA पूरा करने के लिए सुझाए गए समायोजन का उपयोग करें।
कलर कंट्रास्ट चेकर उपयोग करने के सुझाव
- AA अनुपालन (4.5:1) सार्वजनिक वेबसाइटों के लिए न्यूनतम है।
- AAA अनुपालन (7:1) अधिकतम सुगम्यता के लिए बेहतर है।
- बड़े टेक्स्ट (18px बोल्ड या 24px सामान्य) की कंट्रास्ट आवश्यकताएँ कम होती हैं।
- जानकारी देने के लिए केवल रंग पर निर्भर न रहें — टेक्स्ट लेबल या पैटर्न जोड़ें।
- अतिरिक्त सुगम्यता सत्यापन के लिए कलर ब्लाइंडनेस सिम्युलेटर से परीक्षण करें।
कलर कंट्रास्ट चेकर के बारे में अक्सर पूछे जाने वाले सवाल
WCAG क्या है?
WCAG (वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस) वेब सुगम्यता का अंतरराष्ट्रीय मानक है। यह विकलांग लोगों के लिए सामग्री को सुलभ बनाने की आवश्यकताएँ परिभाषित करता है।
मुझे किस कंट्रास्ट अनुपात की आवश्यकता है?
AA सामान्य टेक्स्ट: 4.5:1। AA बड़ा टेक्स्ट: 3:1। AAA सामान्य टेक्स्ट: 7:1। AAA बड़ा टेक्स्ट: 4.5:1। कम से कम AA अनुपालन का लक्ष्य रखें।
'बड़ा टेक्स्ट' क्या माना जाता है?
18px (24pt) सामान्य वज़न या 14px (18.66pt) बोल्ड वज़न। बड़े टेक्स्ट की कंट्रास्ट आवश्यकताएँ कम होती हैं क्योंकि बड़े अक्षर पढ़ने में आसान होते हैं।
क्या यह गैर-टेक्स्ट तत्वों की जाँच करता है?
टूल टेक्स्ट कंट्रास्ट पर केंद्रित है। WCAG गैर-टेक्स्ट UI घटकों के लिए भी 3:1 कंट्रास्ट की आवश्यकता रखता है, जिसे आप इसी टूल से मैन्युअल रूप से जाँच सकते हैं।