contrast checker क्या है और WCAG अनुपात क्यों मायने रखता है?

एक contrast checker दो रंगों की तुलना करता है और उनके बीच WCAG contrast अनुपात रिपोर्ट करता है, जो भविष्यवाणी करता है कि text कितना पठनीय होगा। ArrayKit Contrast Checker सटीक अनुपात के साथ-साथ AA और AAA फैसले दिखाता है ताकि आप पुष्टि कर सकें कि low-vision उपयोगकर्ताओं के लिए text पठनीय है।

WCAG पास करने के लिए मुझे किस contrast अनुपात की ज़रूरत है?

WCAG AA को normal text के लिए कम से कम 4.5:1 और large text के लिए 3:1 चाहिए, जबकि AAA को normal text के लिए 7:1 और large text के लिए 4.5:1 चाहिए। Contrast Checker चारों फैसले एक साथ दिखाता है।

मैं अपने text और background के लिए contrast अनुपात कैसे जाँचूँ?

अपना text रंग Foreground फ़ील्ड में और अपना background रंग Background फ़ील्ड में (hex, rgb, या rgba) दर्ज करें, या स्वैच का उपयोग करें। Contrast Checker आपके टाइप करते ही अनुपात और AA/AAA बैज लाइव अपडेट करता है।

3:1 threshold के लिए large text के रूप में क्या गिना जाता है?

Large text आम तौर पर लगभग 18pt और उससे ऊपर है, या bold होने पर 14pt और उससे ऊपर। इससे छोटा कुछ भी normal text माना जाता है और उसे उच्च 4.5:1 अनुपात पूरा करना चाहिए।

क्या contrast अनुपात opacity का हिसाब रखता है?

नहीं। अनुपात ठोस RGB मानों पर आधारित है, इसलिए किसी अर्ध-पारदर्शी रंग को Contrast Checker में जाँचने से पहले उसके वास्तविक background के विरुद्ध flatten करें।

क्या Contrast Checker में मैं जो रंग दर्ज करता हूँ वे कहीं भेजे जाते हैं?

नहीं। Contrast Checker पूरी तरह आपके browser में चलता है, इसलिए आपके द्वारा दर्ज रंग आपके डिवाइस पर रहते हैं और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

कंट्रास्ट चेकर

दो रंगों के बीच WCAG कंट्रास्ट अनुपात और AA/AAA पास होना जाँचें।

आपके द्वारा दर्ज रंग मान आपके browser में स्थानीय रूप से प्रोसेस होते हैं और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

रंग कोड के साथ काम कर रहे हैं? CSS Color Converter आज़माएँ।

कंट्रास्ट चेकर के बारे में

यह contrast checker किन्हीं दो रंगों के बीच WCAG रंग contrast अनुपात मापता है और आपको तुरंत बताता है कि वे AA या AAA accessibility स्तर पास करते हैं या नहीं। एक foreground (text) रंग और एक background रंग hex या rgb/rgba के रूप में दर्ज करें, या उन्हें बिल्ट-इन रंग स्वैच से चुनें, और टूल सटीक अनुपात के साथ-साथ normal व large text के लिए पास/फेल फैसले की गणना करता है। यह उन डेवलपर्स, डिज़ाइनरों, और QA इंजीनियरों के लिए बनाया गया है जिन्हें accessible interfaces, design systems, या marketing पेज बनाते समय एक त्वरित रंग contrast अनुपात जाँच चाहिए। एक लाइव प्रीव्यू आपके चुने हुए रंगों में सैंपल टेक्स्ट रेंडर करता है ताकि आप एक नज़र में पठनीयता आँक सकें और accessibility contrast समस्याओं को जल्दी पकड़ सकें। सब कुछ आपके browser में स्थानीय रूप से चलता है, इसलिए आपके रंग मान आपके डिवाइस पर प्रोसेस होते हैं और कुछ भी किसी सर्वर पर अपलोड नहीं होता।

विशेषताएँ

दो रंगों के बीच सटीक WCAG 2.x contrast अनुपात की गणना करता है
hex (3 या 6 अंक), rgb(), और rgba() रंग फ़ॉर्मैट स्वीकार करता है
normal text (4.5:1) और large text (3:1) के लिए AA पास/फेल दिखाता है
normal text (7:1) और large text (4.5:1) के लिए AAA पास/फेल दिखाता है
foreground और background दोनों के लिए native रंग picker स्वैच
लाइव प्रीव्यू जो आपके चुने हुए रंगों में सैंपल टेक्स्ट रेंडर करता है
जब कोई रंग मान parse नहीं हो पाता तो स्पष्ट validation संदेश

कंट्रास्ट चेकर का उपयोग कैसे करें

अपना text रंग Foreground (text) फ़ील्ड में दर्ज करें, या रंग स्वैच से चुनें।
अपना background रंग Background फ़ील्ड में दर्ज करें, या इसके स्वैच का उपयोग करें।
फैसले बैज के ऊपर दिखाया गया contrast अनुपात पढ़ें।
normal और large text के लिए AA व AAA पास/फेल बैज जाँचें।

उदाहरण

इनपुट

Foreground (text): #777777
Background: #ffffff

आउटपुट

contrast ratio: 4.48
AA · normal text (4.5:1): Fail
AA · large text (3:1): Pass
AAA · normal text (7:1): Fail
AAA · large text (4.5:1): Fail

सफेद पर मध्यम ग्रे normal-size body text के लिए AA को थोड़े अंतर से फेल करता है।

सामान्य त्रुटियाँ और समस्या निवारण

"red" या "rebeccapurple" जैसा CSS रंग नाम पेस्ट करने पर एक invalid color त्रुटि लौटती है। — named रंगों के बजाय एक hex मान (जैसे #ff0000), या rgb()/rgba() का उपयोग करें।
alpha वाला एक 8-अंकीय hex (#rrggbbaa) एक invalid color के रूप में अस्वीकार किया जाता है। — alpha चैनल हटाएँ और एक 6-अंकीय hex दें; checker केवल opaque रंग पढ़ता है।
Text AA large पास करता है पर AA normal फेल करता है, और आप अनिश्चित हैं कि कौन-सा लागू होता है। — Large text का मतलब लगभग 18pt+ (या 14pt+ bold) है; body copy को सख्त 4.5:1 normal threshold पूरा करना चाहिए।
एक rgba() alpha मान contrast अनुपात नहीं बदलता। — अनुपात केवल RGB चैनलों पर गणना किया जाता है, इसलिए जाँचने से पहले वास्तविक background रंग के विरुद्ध transparency को flatten करें।

अक्सर पूछे जाने वाले प्रश्न

contrast checker क्या है और WCAG अनुपात क्यों मायने रखता है?: एक contrast checker दो रंगों की तुलना करता है और उनके बीच WCAG contrast अनुपात रिपोर्ट करता है, जो भविष्यवाणी करता है कि text कितना पठनीय होगा। ArrayKit Contrast Checker सटीक अनुपात के साथ-साथ AA और AAA फैसले दिखाता है ताकि आप पुष्टि कर सकें कि low-vision उपयोगकर्ताओं के लिए text पठनीय है।
WCAG पास करने के लिए मुझे किस contrast अनुपात की ज़रूरत है?: WCAG AA को normal text के लिए कम से कम 4.5:1 और large text के लिए 3:1 चाहिए, जबकि AAA को normal text के लिए 7:1 और large text के लिए 4.5:1 चाहिए। Contrast Checker चारों फैसले एक साथ दिखाता है।
मैं अपने text और background के लिए contrast अनुपात कैसे जाँचूँ?: अपना text रंग Foreground फ़ील्ड में और अपना background रंग Background फ़ील्ड में (hex, rgb, या rgba) दर्ज करें, या स्वैच का उपयोग करें। Contrast Checker आपके टाइप करते ही अनुपात और AA/AAA बैज लाइव अपडेट करता है।
3:1 threshold के लिए large text के रूप में क्या गिना जाता है?: Large text आम तौर पर लगभग 18pt और उससे ऊपर है, या bold होने पर 14pt और उससे ऊपर। इससे छोटा कुछ भी normal text माना जाता है और उसे उच्च 4.5:1 अनुपात पूरा करना चाहिए।
क्या contrast अनुपात opacity का हिसाब रखता है?: नहीं। अनुपात ठोस RGB मानों पर आधारित है, इसलिए किसी अर्ध-पारदर्शी रंग को Contrast Checker में जाँचने से पहले उसके वास्तविक background के विरुद्ध flatten करें।
क्या Contrast Checker में मैं जो रंग दर्ज करता हूँ वे कहीं भेजे जाते हैं?: नहीं। Contrast Checker पूरी तरह आपके browser में चलता है, इसलिए आपके द्वारा दर्ज रंग आपके डिवाइस पर रहते हैं और कुछ भी किसी सर्वर पर अपलोड नहीं होता।