कलर कंट्रास्ट चेकर (WCAG)
टेक्स्ट और बैकग्राउंड रंग के बीच कंट्रास्ट अनुपात को WCAG AA और AAA के हिसाब से जाँचें, सामान्य टेक्स्ट, बड़े टेक्स्ट और UI कंपोनेंट के लिए, सुझाए गए सुधारों के साथ।
कलर कंट्रास्ट चेकर लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
कलर कंट्रास्ट चेकर का इस्तेमाल कैसे करें
- 1
इस पेज पर कलर कंट्रास्ट चेकर खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
इस टूल के बारे में
कम कंट्रास्ट वाला टेक्स्ट वेब पर सबसे आम एक्सेसिबिलिटी समस्याओं में से एक है, और धूप में फ़ोन पर पढ़ने वाले हर व्यक्ति को परेशान करता है। यह कलर कंट्रास्ट चेकर टेक्स्ट रंग और बैकग्राउंड रंग के बीच कंट्रास्ट अनुपात निकालता है और बताता है कि यह WCAG 2 दिशानिर्देश पास करता है या नहीं।
फ़ेल होने पर यह पास होने वाले सबसे नज़दीकी रंग सुझाता है, ताकि आप डिज़ाइन बदले बिना सुधार कर सकें।
कंट्रास्ट कैसे जाँचें
- टेक्स्ट रंग और बैकग्राउंड रंग डालें, या उन्हें देखकर चुनें।
- कंट्रास्ट अनुपात और हर स्तर का पास या फ़ेल नतीजा पढ़ें।
- सामान्य टेक्स्ट, बड़ी हेडिंग और छोटे अक्षरों के साथ लाइव प्रीव्यू देखें।
- कोई स्तर फ़ेल हो तो सुझाया गया सुधार इस्तेमाल करें, या उल्टा जाँचने के लिए दोनों रंग बदलें।
- पास होने वाले कॉम्बिनेशन का CSS कॉपी करें।
WCAG कंट्रास्ट की ज़रूरतें
| एलिमेंट | AA | AAA |
|---|---|---|
| सामान्य टेक्स्ट | 4.5:1 | 7:1 |
| बड़ा टेक्स्ट (24px, या बोल्ड 18.66px) | 3:1 | 4.5:1 |
| UI कंपोनेंट और आइकन | 3:1 | तय नहीं |
ज़्यादातर क़ानून और एक्सेसिबिलिटी नीतियाँ AA स्तर का हवाला देती हैं। AAA ज़्यादा सख्त है और लंबे पढ़ने वाले टेक्स्ट के लिए सुझाया जाता है। लगभग 18px का बोल्ड टेक्स्ट भी बड़ा टेक्स्ट माना जाता है।
अनुपात कैसे निकलता है
चेकर दोनों रंगों को रिलेटिव ल्यूमिनेंस में बदलता है, जो महसूस होने वाली चमक का माप है, और हल्के रंग में 0.05 जोड़कर उसे गहरे रंग में 0.05 जोड़कर भाग देता है। नतीजा 1:1 (कोई कंट्रास्ट नहीं, एक ही रंग) से 21:1 (सफ़ेद पर काला) तक जाता है।
सुलभ रंगों के लिए सुझाव
- सफ़ेद पर ग्रे टेक्स्ट सबसे आम दोषी है: #767676 लगभग सबसे हल्का ग्रे है जो सफ़ेद पर सामान्य टेक्स्ट के लिए AA पास करता है।
- हर स्टेट जाँचें: प्लेसहोल्डर, डिसेबल बटन, लिंक, होवर रंग और इमेज पर टेक्स्ट।
- मतलब बताने के लिए सिर्फ़ रंग पर निर्भर न रहें, जैसे एरर के लिए लाल; आइकन या टेक्स्ट भी जोड़ें।
- ब्रांड रंग जल्दी जाँचें, क्योंकि चमकीले पीले और हल्के नीले अक्सर टेक्स्ट रंग के रूप में फ़ेल होते हैं।
पूरी स्कीम बना रहे हैं? कलर पैलेट जनरेटर हर रंग का कंट्रास्ट दिखाता है, और कलर कन्वर्टर HEX, RGB और HSL के बीच वैल्यू बदलता है।
अक्सर पूछे जाने वाले सवाल
WCAG AA के लिए कितना कंट्रास्ट अनुपात चाहिए?
सामान्य टेक्स्ट के लिए कम से कम 4.5:1, और बड़े टेक्स्ट और बटन, फ़ॉर्म बॉर्डर व आइकन जैसे UI कंपोनेंट के लिए 3:1।
बड़ा टेक्स्ट किसे माना जाता है?
कम से कम 24px का टेक्स्ट, या कम से कम लगभग 18.66px (14 पॉइंट) का बोल्ड टेक्स्ट। बड़े टेक्स्ट को AA के लिए 3:1 और AAA के लिए 4.5:1 चाहिए।
AA और AAA में क्या फ़र्क है?
AA वह मानक स्तर है जिसका ज़्यादातर एक्सेसिबिलिटी क़ानून हवाला देते हैं। AAA ज़्यादा सख्त है, सामान्य टेक्स्ट के लिए 7:1, और लंबे टेक्स्ट के लिए सुझाया जाता है।
सबसे ज़्यादा कंट्रास्ट अनुपात कितना हो सकता है?
21:1, यानी सफ़ेद बैकग्राउंड पर काला टेक्स्ट या इसका उल्टा।
मेरा ब्रांड रंग फ़ेल हो रहा है। क्या करूँ?
सुझाया गया सुधार इस्तेमाल करें, जो ह्यू वही रखकर पास होने तक लाइटनेस बदलता है, या ब्रांड रंग को बॉडी टेक्स्ट की जगह बड़ी हेडिंग और बैकग्राउंड में इस्तेमाल करें।
क्या यह इमेज पर टेक्स्ट जाँचता है?
नहीं। यह दो ठोस रंग जाँचता है। फ़ोटो पर टेक्स्ट के लिए रंग को टेक्स्ट के पीछे इमेज के सबसे हल्के और सबसे गहरे हिस्सों से जाँचें।