सीधे सामग्री पर जाएँ

1:1 से 21:1 · AA · AAA

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

सफ़ेद पर काले का WCAG कंट्रास्ट रेशियो 21:1 है, जो सबसे ऊँचा संभव मान है, और #0060fd पर सफ़ेद का 5.13:1। अपना जोड़ा जाँचने के लिए टेक्स्ट रंग और बैकग्राउंड लिखें।

रेशियो और पाँचों जाँचें टाइप करते ही अपडेट होती हैं। रेशियो दो दशमलव तक काटा जाता है, ऊपर राउंड नहीं होता, इसलिए 4.499 का रूप 4.49:1 दिखता है और 4.5:1 की जाँच में फ़ेल होता है।

Scanned by NortonTM Safe Web

एक नज़र में

क़ीमत
कोई शुल्क नहीं
खाता
ज़रूरत नहीं
अपलोड
लागू नहीं — आप रंग लिखते हैं, कुछ कहीं नहीं भेजा जाता
फ़ॉर्मूला
(हल्के का ल्यूमिनेंस + 0.05) ÷ (गहरे का ल्यूमिनेंस + 0.05)
सीमाएँ
AA: सामान्य 4.5:1 और बड़ा टेक्स्ट 3:1; AAA: सामान्य 7:1 और बड़ा टेक्स्ट 4.5:1; इंटरफ़ेस हिस्सों के लिए 3:1
मानक
रिलेटिव ल्यूमिनेंस और कंट्रास्ट रेशियो की WCAG 2.2 परिभाषाएँ

जाने-पहचाने जोड़ों के कंट्रास्ट रेशियो

ये पंक्तियाँ चेकर के उसी कोड से बनी हैं। टिक का निशान बताता है कि जोड़ा ज़रूरत पूरी करता है; क्रॉस का मतलब है कि नहीं करता।

रंगों के जोड़े और पाँच जाँचें
टेक्स्ट रंगबैकग्राउंडरेशियोAA सामान्यAA बड़ाAAA सामान्यAAA बड़ाइंटरफ़ेस हिस्से
#000000#ffffff21.00:1✓✓✓✓✓
#ffffff#0060fd5.13:1✓✓✗✓✓
#767676#ffffff4.54:1✓✓✗✓✓
#777777#ffffff4.47:1✗✓✗✗✓
#0060fd#ffffff5.13:1✓✓✗✓✓
#ffffff#ffffff1.00:1✗✗✗✗✗
न्यूनतम रेशियो
जाँचन्यूनतम रेशियो
AA, सामान्य टेक्स्ट4.5:1
AA, बड़ा टेक्स्ट3:1
AAA, सामान्य टेक्स्ट7:1
AAA, बड़ा टेक्स्ट4.5:1
AA, इंटरफ़ेस हिस्से और ग्राफ़िक्स3:1

रंगों का जोड़ा कैसे जाँचें

1

दोनों रंग लिखें

टेक्स्ट रंग और बैकग्राउंड रंग किसी भी CSS रूप में लिखें, या पिकर इस्तेमाल करें। स्वैप बटन दोनों को आपस में बदल देता है, जो गहरे बैकग्राउंड पर हल्के टेक्स्ट के लिए काम आता है।

2

रेशियो पढ़ें

रेशियो 1:1 (एक जैसे रंग) से 21:1 (सफ़ेद पर काला) तक जाता है। फ़ील्ड के नीचे का नमूना जोड़े को 16 px और 24 px पर दिखाता है, ताकि आप नतीजा अपनी आँखों से परख सकें।

3

पाँचों जाँचें देखें

हर टाइल एक WCAG ज़रूरत के लिए पास या फ़ेल बताती है: सामान्य टेक्स्ट के लिए AA और AAA, बड़े टेक्स्ट के लिए AA और AAA, और इंटरफ़ेस के हिस्सों के लिए AA। सामान्य टेक्स्ट AA में फ़ेल हो तो पेज सबसे नज़दीकी टेक्स्ट रंग सुझाता है जो पास होता है।

कंट्रास्ट रेशियो कैसे निकाला जाता है

WCAG कंट्रास्ट को रिलेटिव ल्यूमिनेंस से नापता है, यानी रंग की चमक 0 (काला) से 1 (सफ़ेद) तक। हर लाल, हरे और नीले चैनल को 255 से भाग दिया जाता है; 0.04045 तक का मान 12.92 से भाग दिया जाता है, और बड़े मान पर घात लगती है: (मान + 0.055) भाग 1.055, फिर घात 2.4। ल्यूमिनेंस फिर 0.2126 गुणा लाल जमा 0.7152 गुणा हरा जमा 0.0722 गुणा नीला है, जो दिखाता है कि आँख हर एक पर कितना प्रतिक्रिया देती है। कंट्रास्ट रेशियो हल्के रंग का ल्यूमिनेंस जमा 0.05, भाग गहरे रंग का ल्यूमिनेंस जमा 0.05 है।

WCAG 2 स्तर AA पर सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 माँगता है, और स्तर AAA पर 7:1 और 4.5:1। बड़ा टेक्स्ट कम से कम 18 पॉइंट होता है, जो 24 CSS पिक्सेल है, या बोल्ड में कम से कम 14 पॉइंट, लगभग 18.66 पिक्सेल। सक्सेस क्राइटेरियन 1.4.11 इंटरफ़ेस के उन हिस्सों और ग्राफ़िक्स के लिए 3:1 माँगता है जिन्हें पाठक को देखना ज़रूरी है, जैसे फ़ील्ड का बॉर्डर या चार्ट की रेखा। रेशियो की तुलना हर सीमा से बिना राउंड किए होती है। किसी रंग में पारदर्शिता हो तो नापने से पहले पारदर्शी बैकग्राउंड को सफ़ेद पर और पारदर्शी टेक्स्ट रंग को बैकग्राउंड पर बिछाया जाता है। यह पेज केवल WCAG 2.x लागू करता है; यह APCA की गणना नहीं करता, जिस पर दिशानिर्देशों के अगले संस्करण के लिए चर्चा हो रही है।

कंट्रास्ट से जुड़े सवाल

WCAG टेक्स्ट के लिए कितना कंट्रास्ट रेशियो माँगता है?

स्तर AA पर सामान्य टेक्स्ट को कम से कम 4.5:1 और बड़े टेक्स्ट को कम से कम 3:1 चाहिए। स्तर AAA पर आँकड़े सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 हैं। रेशियो टेक्स्ट रंग और ठीक उसके पीछे के रंग के बीच नापा जाता है।

बड़ा टेक्स्ट किसे माना जाता है?

WCAG बड़े टेक्स्ट को कम से कम 18 पॉइंट यानी 24 CSS पिक्सेल, या बोल्ड में कम से कम 14 पॉइंट यानी लगभग 18.66 CSS पिक्सेल बताता है। इससे छोटा हर टेक्स्ट सामान्य माना जाता है और उसे ऊँचा रेशियो चाहिए।

सफ़ेद पर AA पास करने वाला सबसे हल्का स्लेटी कौन-सा है?

सफ़ेद पर #767676 का रेशियो 4.54:1 है और वह सामान्य टेक्स्ट की 4.5:1 जाँच पास करता है। उससे अगला हल्का स्लेटी #777777 4.47:1 पाता है और फ़ेल होता है। 7:1 (AAA) के लिए सबसे हल्का स्लेटी #595959 है, जिसका स्कोर 7.00:1 है।

4.49 जब 4.5 जैसा दिखता है तो फ़ेल क्यों होता है?

जाँचें सटीक रेशियो की तुलना सीमा से करती हैं। 4.499 का रेशियो 4.5 से नीचे है, इसलिए फ़ेल होता है, और पेज उसे ऊपर राउंड करने के बजाय 4.49:1 छापता है। सफ़ेद पर शुद्ध लाल इसका असली उदाहरण है: 3.99:1 सामान्य टेक्स्ट की 4.5:1 जाँच में फ़ेल होता है, भले ही क़रीब हो।

आइकन, बॉर्डर और फ़ॉर्म फ़ील्ड को कितना कंट्रास्ट चाहिए?

सक्सेस क्राइटेरियन 1.4.11 नॉन-टेक्स्ट कंट्रास्ट, जो WCAG 2.1 में जुड़ा, इंटरफ़ेस के उन हिस्सों या ग्राफ़िक और उनके पास के रंगों के बीच कम से कम 3:1 माँगता है जिन्हें पाठक को देखना ज़रूरी है, जैसे फ़ील्ड का बॉर्डर, फ़ोकस रिंग या चार्ट की रेखा। निष्क्रिय नियंत्रण और केवल सजावटी ग्राफ़िक इससे छूट पाते हैं।

क्या रेशियो पास होने से पेज सुलभ बन जाता है?

नहीं। कंट्रास्ट कई ज़रूरतों में से एक है। फ़ॉन्ट का आकार और मोटाई, पंक्तियों की दूरी, अकेले रंग से अर्थ देना, फ़ोकस का दिखना, छवियों और ग्रेडिएंट पर टेक्स्ट, और अलग-अलग तरह की रंग-दृष्टि वाले लोग पेज कैसे देखते हैं, ये सब भी मायने रखते हैं। इस नतीजे को एक इनपुट मानें और पेज को असली कंटेंट के साथ परखें।

मिलते-जुलते टूल