रंग कंट्रास्ट चेकर: WCAG 2.2 AA और AAA के लिए

इसका इस्तेमाल कैसे करें

टेक्स्ट रंग में टेक्स्ट का रंग लिखें और बैकग्राउंड रंग में उसके पीछे का रंग।
कंट्रास्ट अनुपात पढ़ें। चार टेक्स्ट जाँच और कंपोनेंट जाँच बताती हैं कि जोड़ी कौन से स्तर तक पहुँचती है।
मुख्य टेक्स्ट के लिए AA, सामान्य टेक्स्ट का लक्ष्य रखें। बड़े टेक्स्ट को कम कंट्रास्ट चाहिए; आकार नीचे के भागों में हैं।
जाँच फेल हो तो सुझाया गया टेक्स्ट रंग से शुरू करें और परिणाम अपने असली डिज़ाइन में जाँचें।

अनुपात कैसे निकाला जाता है

WCAG 2.2 हर रंग को एक सापेक्ष ल्यूमिनेंस देता है। हर लाल, हरे और नीले मान को पहले रैखिक बनाया जाता है: 0 से 1 के पैमाने पर 0.04045 तक का मान 12.92 से भाग दिया जाता है, और बड़े मान में 0.055 जोड़कर और 1.055 से भाग देकर फिर 2.4 की घात ली जाती है। तीनों परिणाम लाल के लिए 0.2126, हरे के लिए 0.7152 और नीले के लिए 0.0722 के भार से जोड़े जाते हैं। कंट्रास्ट अनुपात है हल्के रंग का ल्यूमिनेंस जमा 0.05, भाग गहरे रंग का ल्यूमिनेंस जमा 0.05।

परिणाम 1 से लेकर 21 तक चलता है: 1 दो एक जैसे रंगों के लिए, और 21 सफेद पर काले के लिए।

L = 0.2126 × R + 0.7152 × G + 0.0722 × B
अनुपात = (L1 + 0.05) ÷ (L2 + 0.05)

L1  हल्के रंग का ल्यूमिनेंस
L2  गहरे रंग का ल्यूमिनेंस

स्तर

WCAG 2.2 ये न्यूनतम अनुपात तय करता है। स्तर और सफलता मानदंड दिखाए जाते हैं ताकि आप सटीक शब्द देख सकें।

AA, सामान्य टेक्स्ट: 4.5:1 (सफलता मानदंड 1.4.3)।
AA, बड़ा टेक्स्ट: 3:1, 18 पॉइंट के टेक्स्ट के लिए, या बोल्ड होने पर 14 पॉइंट के लिए (1.4.3)।
AAA, सामान्य टेक्स्ट: 7:1 (सफलता मानदंड 1.4.6)।
AAA, बड़ा टेक्स्ट: 4.5:1 (1.4.6)।
बटन, बॉर्डर और आइकन जिनकी पेज इस्तेमाल करने के लिए पाठक को जरूरत है: 3:1 (1.4.11)।

यह चेकर क्या शामिल नहीं करता

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

हल किया हुआ उदाहरण: सफेद पर स्लेटी #777

स्लेटी #777 का हर चैनल 255 में से 119 है, जो लगभग 0.184 का सापेक्ष ल्यूमिनेंस देता है। सफेद का ल्यूमिनेंस 1 है, इसलिए अनुपात है (1 + 0.05) ÷ (0.184 + 0.05) = 4.48।

इसलिए सफेद पर #777 सामान्य टेक्स्ट के लिए AA को थोड़े अंतर से फेल करता है, बड़े टेक्स्ट के लिए AA और कंपोनेंट के लिए 3:1 जाँच पास करता है, और AAA फेल करता है। सबसे नजदीकी गहरा स्लेटी जो AA पास करता है #767676 है, जिसका अनुपात 4.54 है।

जाँच	चाहिए	#777 सफेद पर
AA, सामान्य टेक्स्ट	4.5:1	4.48: फेल
AA, बड़ा टेक्स्ट	3:1	पास
AAA, सामान्य टेक्स्ट	7:1	फेल
AAA, बड़ा टेक्स्ट	4.5:1	फेल
बटन, बॉर्डर और आइकन	3:1	पास

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

मुख्य टेक्स्ट को कौन सा कंट्रास्ट अनुपात चाहिए?

WCAG 2.2 स्तर AA के लिए सामान्य टेक्स्ट को कम से कम 4.5:1 और बड़े टेक्स्ट को 3:1 चाहिए। स्तर AAA सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 माँगता है।

4.4999 का अनुपात 4.50 दिखकर भी फेल क्यों होता है?

जाँच सटीक अनुपात से होती है, स्क्रीन पर दिखने वाले दो दशमलव से नहीं। 4.5 से ठीक नीचे का अनुपात दिखाने पर 4.50 बनता है, पर वह 4.5:1 तक नहीं पहुँचता, इसलिए जाँच फेल होती है।

दो रंगों का क्रम अनुपात बदलता है क्या?

नहीं। अनुपात वही रहता है, चाहे कौन सा रंग टेक्स्ट हो और कौन सा बैकग्राउंड, क्योंकि हल्का रंग हमेशा अंश में रहता है।

सुझाया गया रंग क्या है?

यह आपके रंग के सबसे नजदीक का टेक्स्ट रंग है, जो आपके बैकग्राउंड पर 4.5:1 तक पहुँचता है। वह वही रंग-छटा और संतृप्ति रखता है, और जो छोटा बदलाव हो, उसके हिसाब से गहरा या हल्का होता है।

क्या पारदर्शी रंग लिखा जा सकता है?

यहाँ नहीं। वह रंग लिखें जो विज़िटर सचमुच देखता है, यानी वह पारदर्शी रंग जो उसके पीछे के बैकग्राउंड के साथ मिल चुका है।

क्या मेरे रंग किसी सर्वर पर भेजे जाते हैं?

नहीं। हिसाब आपके ब्राउज़र में होता है, और जो आप लिखते हैं वह न सहेजा जाता है न भेजा जाता है।

क्या अनुपात पास होने का मतलब है कि टेक्स्ट पढ़ने में आसान है?

हमेशा नहीं। अनुपात WCAG का न्यूनतम है। फ़ॉन्ट आकार, मोटाई, दूरी और पाठक की नजर भी मायने रखती है, इसलिए जहाँ हो सके असली डिज़ाइन लोगों के साथ जाँचें।

स्रोत

आँकड़े और टेक्स्ट आखिरी बार मंगलवार, 10 नवंबर 2026 को जाँचे गए।

परिणाम