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

अपने पाठ को सभी के लिए पठनीय बनाएं

लाइव पूर्वावलोकन और हेक्स या आरजीबी इनपुट के साथ, डब्ल्यूसीएजी एए और एएए मानकों के मुकाबले टेक्स्ट और पृष्ठभूमि रंग के बीच कंट्रास्ट अनुपात की जांच करें।

कम-कंट्रास्ट टेक्स्ट सबसे आम एक्सेसिबिलिटी विफलताओं में से एक है। यह चेकर आधिकारिक WCAG सापेक्ष-ल्यूमिनेंस फॉर्मूला का उपयोग करके आपके टेक्स्ट और पृष्ठभूमि रंगों के बीच सटीक कंट्रास्ट अनुपात की गणना करता है, फिर आपको बताता है कि क्या यह AA (सामान्य टेक्स्ट के लिए 4.5:1, बड़े के लिए 3:1) और सख्त AAA (7:1 और 4.5:1) को पास करता है। एक लाइव पूर्वावलोकन आपके चुने हुए रंगों पर वास्तविक टेक्स्ट दिखाता है।

विशेषताएँ

WCAG AA और AAA उत्तीर्ण/असफल परिणाम
लाइव कंट्रास्ट अनुपात गणना
रंग बीनने वालों के साथ हेक्स और आरजीबी इनपुट
आपके रंगों पर लाइव टेक्स्ट पूर्वावलोकन
सामान्य और बड़ी पाठ सीमाएँ
आपके ब्राउज़र में स्थानीय रूप से चलता है

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

1
टेक्स्ट का रंग चुनें
अग्रभूमि रंग चुनें या टाइप करें.
2
पृष्ठभूमि चुनें
पृष्ठभूमि रंग चुनें या टाइप करें.
3
अनुपात पढ़ें
कंट्रास्ट अनुपात और AA/AAA परिणाम देखें।
4
समायोजित करना
रंगों को तब तक घुमाएँ जब तक वे निकल न जाएँ।

सामान्य उपयोग के मामले

सत्यापित करें कि यूआई टेक्स्ट डब्ल्यूसीएजी पहुंच से मेल खाता है
चेक बटन और लिंक कंट्रास्ट
एक ब्रांड रंग पैलेट का ऑडिट करें
कम कंट्रास्ट वाली मार्केटिंग कॉपी ठीक करें

विस्तृत मार्गदर्शिका

अपनी पसंद के अनुसार रंग दर्ज करें

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

WCAG कंट्रास्ट स्तर का क्या मतलब है

WCAG 2 कंट्रास्ट को 1:1 (कोई कंट्रास्ट नहीं) से 21:1 (सफेद पर काला) के अनुपात के रूप में मापता है। स्तर एए, सामान्य कानूनी और उद्योग आधार रेखा, सामान्य पाठ के लिए कम से कम 4.5:1 और बड़े पाठ के लिए 3:1 की आवश्यकता होती है, जिसका अर्थ है 24px नियमित या लगभग 18.66px बोल्ड और ऊपर। स्तर AAA उन्हें बढ़ाकर 7:1 और 4.5:1 कर देता है। उपयोगकर्ता इंटरफ़ेस भाग जैसे कि इनपुट बॉर्डर, फ़ोकस रिंग और अर्थ रखने वाले आइकन को अपने परिवेश के विरुद्ध कम से कम 3:1 की आवश्यकता होती है। अनुपात की गणना प्रत्येक रंग की सापेक्ष चमक से की जाती है, इसलिए दो अलग-अलग दिखने वाले रंग तब भी असफल हो सकते हैं यदि वे समान रूप से उज्ज्वल हों, जो हरे पर लाल के साथ आम है।

ख़राब रंग जोड़ी को ठीक करना

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

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

WCAG पास करने के लिए मुझे किस कंट्रास्ट अनुपात की आवश्यकता होगी?

एए के लिए, सामान्य टेक्स्ट को 4.5:1 और बड़े टेक्स्ट को 3:1 की आवश्यकता होती है। सख्त एएए के लिए, सामान्य टेक्स्ट को 7:1 और बड़े टेक्स्ट को 4.5:1 की आवश्यकता होती है। बड़ा पाठ लगभग 18pt, या 14pt बोल्ड होता है।

कंट्रास्ट अनुपात की गणना कैसे की जाती है?

यह दोनों रंगों के लिए WCAG सापेक्ष-चमक सूत्र का उपयोग करता है, फिर हल्के चमक (प्लस 0.05) को गहरे (प्लस 0.05) से विभाजित करता है, जिससे 1:1 से 21:1 तक का मान मिलता है।

क्या मैं आरजीबी के साथ-साथ हेक्स भी दर्ज कर सकता हूं?

हां: #1e293बी या आरजीबी(30, 41, 59) जैसे हेक्स कोड टाइप करें, या कलर पिकर का उपयोग करें। दोनों प्रारूपों को तुरंत पार्स किया जाता है।

यह नि: शुल्क है?

हां, बिना किसी साइनअप के पूरी तरह से मुफ़्त, पूरी तरह से आपके ब्राउज़र में चल रहा है।

मैं कैसे जांचूं कि दो रंग एक साथ पहुंच योग्य हैं या नहीं?

पाठ और पृष्ठभूमि हेक्स मान दर्ज करें; चेकर कंट्रास्ट अनुपात की गणना करता है और दिखाता है कि क्या यह सामान्य और बड़े टेक्स्ट के लिए WCAG AA और AAA पास करता है।

पहुंच के लिए रंग विरोधाभास क्यों मायने रखता है?

कम कंट्रास्ट कम दृष्टि या रंग अंधापन वाले लोगों के लिए पाठ को पढ़ना कठिन बना देता है। WCAG अनुपात को पूरा करने से सामग्री सभी के लिए सुपाठ्य रहती है और यह एक सामान्य पहुंच और एसईओ आवश्यकता है।

अपने पाठ को सभी के लिए पठनीय बनाएं

विशेषताएँ

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

टेक्स्ट का रंग चुनें

पृष्ठभूमि चुनें

अनुपात पढ़ें

समायोजित करना

सामान्य उपयोग के मामले