यह checker WCAG के आधिकारिक relative-luminance फ़ॉर्मूले का इस्तेमाल करता है, इसलिए इसके नंबर WebAIM checker और ज़्यादातर accessibility ऑडिट से मेल खाते हैं। सब कुछ आपके ब्राउज़र में चलता है - रंग कहीं अपलोड नहीं होते, और कोई सीमा नहीं।
Color Contrast Checker
पूरी तरह आपके ब्राउज़र में चलता है - न कुछ अपलोड, न साइन-अप।
Contrast ratio
Passचाहिए 4.5:1
Passचाहिए 3:1
Failचाहिए 7:1
Passचाहिए 4.5:1
Large = 18pt (24px), या 14pt (18.66px) bold।
Color contrast checker क्या होता है?
Color contrast checker टेक्स्ट रंग और उसकी बैकग्राउंड के बीच कंट्रास्ट रेशियो मापता है और बताता है कि यह WCAG accessibility मानकों पर खरा उतरता है या नहीं। यह 1:1 से 21:1 तक का रेशियो देता है, साथ ही normal और large text दोनों के लिए AA और AAA का pass या fail भी।
कैसे इस्तेमाल करें
- 1रंग डालें. टेक्स्ट और बैकग्राउंड के लिए hex कोड, rgb() वैल्यू या CSS color name टाइप करें, या color swatch से चुनें।
- 2रेशियो देखें. कंट्रास्ट रेशियो live अपडेट होता है, साथ में बैकग्राउंड पर टेक्स्ट का preview भी।
- 3बैज चेक करें. हर बैज normal और large text में WCAG AA और AAA के लिए pass या fail दिखाता है।
किसके लिए है
- डिज़ाइनर जो ब्रांड रंगों को डेवलपमेंट में जाने से पहले जाँचते हैं।
- Front-end developers जो बटन, लिंक और लेबल के रंगों को WCAG AA के हिसाब से चेक करते हैं।
- Accessibility auditors जो exact रेशियो के साथ contrast failures का दस्तावेज़ बनाते हैं।
- Content और email टीमें जो रंगीन बैकग्राउंड पर टेक्स्ट की पठनीयता पक्की करती हैं।
अक्सर पूछे जाने वाले सवाल
क्या color contrast checker मुफ़्त है?
हाँ - यह 100% मुफ़्त है, न साइन-अप और न कोई सीमा। यह पूरी तरह आपके ब्राउज़र में चलता है।
WCAG AA के लिए कितना contrast ratio चाहिए?
WCAG 2.1 Level AA में normal text के लिए कम से कम 4.5:1 और large text के लिए 3:1 का contrast ratio ज़रूरी है। Level AAA में normal text के लिए 7:1 और large text के लिए 4.5:1 चाहिए।
Large text किसे माना जाता है?
Regular weight में कम से कम 18pt (लगभग 24px), या bold में 14pt (लगभग 18.66px)। बड़े अक्षर पढ़ने में आसान होते हैं, इसलिए इनके लिए कम contrast ratio की छूट होती है।
Contrast ratio कैसे निकाला जाता है?
फ़ॉर्मूला है (L1 + 0.05) / (L2 + 0.05), जहाँ L1 और L2 हल्के और गहरे रंगों की relative luminance हैं। Luminance WCAG 2.x की परिभाषा के अनुसार sRGB के red, green और blue channels से निकाली जाती है।
क्या यह hex, RGB और color names सपोर्ट करता है?
हाँ। 3-, 4-, 6- या 8-अंकीय hex, rgb() और rgba() वैल्यू, या कोई भी CSS color name जैसे 'teal' डाल सकते हैं। Native color swatch से भी रंग चुन सकते हैं।
एक ही ratio कभी pass और कभी fail क्यों होता है?
ज़रूरी ratio टेक्स्ट के आकार और आप जो level चाहते हैं उस पर निर्भर करता है। 3.5:1 का ratio normal text के लिए AA में fail होता है लेकिन large text के लिए pass - इसलिए हमेशा वही size और level चेक करें जो आप असल में इस्तेमाल करते हैं।