The Quick Brown Fox
Jumps over the lazy dog. यह sample दिखाता है कि आपका color combination अलग-अलग sizes में कैसा दिखता है।
छोटा text — 11px caption
Color Contrast Checker (WCAG 2.1)
यह tool क्या करता है
HEX format में foreground (text) color और background color enter करें, या color pickers उपयोग करें। Tool तुरंत WCAG 2.1 contrast ratio calculate करता है और पांच compliance levels के विरुद्ध जांचता है: AA Normal, AA Large, AA UI Components, AAA Normal, और AAA Large। Live preview दिखाता है कि आपका text उन colors के साथ कैसा दिखता है।
उपयोग कैसे करें
- Color picker या HEX value type करके foreground color सेट करें।
- उसी तरह background color सेट करें।
- Contrast ratio पढ़ें और जांचें कि कौन से WCAG levels pass या fail हुए।
- Colors reverse करने के लिए अदला-बदली उपयोग करें।
अक्सर पूछे जाने वाले प्रश्न
Contrast ratio क्या है?
Contrast ratio दो रंगों की सापेक्ष चमक (relative luminance) का अंतर मापता है। यह 1:1 (एक जैसे रंग, कोई कंट्रास्ट नहीं) से 21:1 (सफ़ेद पर काला, अधिकतम कंट्रास्ट) तक होता है। ऊँचा ratio मतलब टेक्स्ट पढ़ना आसान।
WCAG का पूरा नाम क्या है?
WCAG का मतलब Web Content Accessibility Guidelines है। W3C द्वारा प्रकाशित ये दिशानिर्देश न्यूनतम contrast ratio तय करते हैं ताकि कम दृष्टि या रंग-अंधता वाले लोग भी कंटेंट पढ़ सकें।
AA और AAA अनुपालन में क्या अंतर है?
Level AA में सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट के लिए 3:1 ज़रूरी है, यह ज़्यादातर वेबसाइटों के लिए न्यूनतम मानक है। Level AAA में सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 ज़रूरी है, और यह ज़्यादा टेक्स्ट वाली साइटों के मुख्य कंटेंट के लिए सुझाया जाता है।
WCAG में बड़ा टेक्स्ट किसे माना जाता है?
बड़ा टेक्स्ट कम से कम 18pt (24px) सामान्य वज़न, या कम से कम 14pt (लगभग 18.67px) bold होता है। इस सीमा वाले टेक्स्ट के लिए कंट्रास्ट की शर्त कम है क्योंकि आकार पढ़ने में मदद करता है।
क्या यह टूल इमेज या ग्राफ़िक्स पर कंट्रास्ट जाँचता है?
यह टूल दो सादे रंगों, यानी foreground और background, के बीच कंट्रास्ट जाँचता है। इमेज पर लिखे टेक्स्ट के लिए बैकग्राउंड के सबसे हल्के और सबसे गहरे हिस्से का रंग लेकर सबसे खराब स्थिति का कंट्रास्ट देखें।