कलर कंट्रास्ट चेकर
पक्का करें कि आपका टेक्स्ट सबके लिए आसानी से पढ़ा जा सके, और न हो तो उसका हल पाएँ।
इसी डिवाइस पर सुरक्षित
आपके ब्राउज़र में चलता है। कुछ भी अपलोड नहीं होता।
सुरक्षित
रंग
- कंट्रास्ट रेशियो
- सामान्य टेक्स्ट
- AA · 4.5:1
- AAA · 7:1
- बड़ा टेक्स्ट
- AA · 3:1
- AAA · 4.5:1
- इंटरफ़ेस एलिमेंट और आइकन
- AA · 3:1
- APCA कंट्रास्ट (जानकारी के लिए)
APCA एक नया तरीका है जिस पर भविष्य की एक्सेसिबिलिटी गाइडलाइन के लिए अध्ययन चल रहा है। आज भी WCAG 2.2 ही मानक है।
प्रीव्यू
बड़ा टेक्स्ट ऐसा दिखता है
सामान्य टेक्स्ट हर किसी के लिए आसानी से पढ़ने लायक रहना चाहिए, कमज़ोर नज़र वाले लोगों के लिए भी, तेज़ धूप में फ़ोन पर या किसी पुरानी स्क्रीन पर भी।
बारीक अक्षरों और कैप्शन को सबसे ज़्यादा कंट्रास्ट चाहिए।
सुझाए गए सुधार
यह कैसे काम करता है
-
अपने दो रंग डालें
टेक्स्ट का रंग और बैकग्राउंड का रंग लिखें या चुनें। कोई भी फ़ॉर्मेट चलेगा: HEX, RGB, HSL या CSS नाम।
-
नतीजा देखें
कंट्रास्ट रेशियो देखें और जानें कि यह सामान्य टेक्स्ट, बड़े टेक्स्ट और इंटरफ़ेस एलिमेंट के लिए WCAG 2.2 AA और AAA पर पास है या नहीं।
-
ज़रूरत हो तो सुधार लगाएँ
अगर कोई लेवल फ़ेल हो, तो सुझाए गए रंगों में से कोई इस्तेमाल करें: यह उसी ह्यू वाला सबसे क़रीबी रंग है जो पास होता है।
अक्सर पूछे जाने वाले सवाल
मुझे कितना कंट्रास्ट रेशियो चाहिए?
WCAG 2.2 लेवल AA सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 माँगता है। लेवल AAA 7:1 और 4.5:1 माँगता है। आइकन, इनपुट बॉर्डर और दूसरे इंटरफ़ेस एलिमेंट को अपने आस-पास की चीज़ से कम से कम 3:1 चाहिए।
बड़ा टेक्स्ट किसे माना जाता है?
कम से कम 18 पॉइंट (24 CSS पिक्सल) का टेक्स्ट, या बोल्ड होने पर कम से कम 14 पॉइंट (लगभग 18.7 CSS पिक्सल)। इससे छोटा सब कुछ सामान्य टेक्स्ट है।
4.49:1 इतना क़रीब होकर भी 4.5:1 पर फ़ेल क्यों होता है?
WCAG की सीमाएँ सख़्त न्यूनतम हैं और रेशियो को ऊपर की ओर राउंड नहीं करना चाहिए। इसीलिए यह चेकर रेशियो को नीचे की ओर राउंड करके दिखाता है: जो वैल्यू पास दिखती है, वह सच में पास है।
APCA क्या है?
APCA (Accessible Perceptual Contrast Algorithm) कंट्रास्ट मापने का एक नया तरीका है, जो यह भी ध्यान में रखता है कि टेक्स्ट हल्के पर गहरा है या गहरे पर हल्का। गाइडलाइन के भविष्य के वर्ज़न के लिए इस पर अध्ययन चल रहा है। यहाँ इसे सिर्फ़ जानकारी के लिए दिखाया गया है: आज कानूनी और ऑडिट की ज़रूरतें WCAG 2 रेशियो पर ही आधारित हैं।
सुझाए गए रंग कैसे चुने जाते हैं?
चेकर आपके रंग का ह्यू और चटक बनाए रखता है और सिर्फ़ उसकी लाइटनेस बदलता है, OKLCH कलर स्पेस में जो इंसानी नज़र के हिसाब से है, जब तक लेवल तक पहुँचने वाली सबसे क़रीबी वैल्यू न मिल जाए। आपका रंग वैसा ही दिखता है, बस थोड़ा हल्का या गहरा।
क्या यह पारदर्शी रंगों के साथ काम करता है?
टेक्स्ट के रंग के लिए हाँ: आधा पारदर्शी टेक्स्ट रंग पहले बैकग्राउंड के साथ मिलाया जाता है, क्योंकि लोगों को असल में वही रंग दिखता है। बैकग्राउंड को ठोस माना जाता है।