कलर कंट्रास्ट चेकर
नयाटेक्स्ट और बैकग्राउंड रंगों के बीच WCAG AA/AAA कंट्रास्ट अनुपात जाँचें।
Large heading — 24px bold
Large text, 18.66px and up reads at 3:1.
Normal body text. The quick brown fox jumps over the lazy dog and reads comfortably at 4.5:1 or better.
Small print and captions — the hardest text to read.
Keeps your hue & saturation — only the lightness changes — so brand colors stay recognizable.
Pairwise palette grid
Paste several colors (hex, one per line or separated by spaces / commas) to see which foreground/background pairs pass AA (4.5:1). First 8 colors are used.
Runs entirely in your browser. Nothing is uploaded.
ब्राउज़र में WCAG रंग कंट्रास्ट जांचें
यह रंग कंट्रास्ट चेकर टेक्स्ट और बैकग्राउंड रंग के बीच WCAG कंट्रास्ट अनुपात मापता है और तुरंत बताता है कि यह जोड़ा सामान्य टेक्स्ट, बड़े टेक्स्ट और UI घटकों के लिए AA और AAA पास करता है या नहीं। हेक्स वैल्यू टाइप करें, RGB या HSL फ़ील्ड संपादित करें, ब्राइटनेस स्लाइडर खींचें, या स्क्रीन पर कोई भी रंग लेने के लिए आईड्रॉपर का उपयोग करें — अनुपात, पास-फेल मैट्रिक्स और लाइव प्रीव्यू टाइप करते ही अपडेट हो जाते हैं।
यह उन टूल्स की तरह काम करता है जिन पर डिज़ाइनर पहले से भरोसा करते हैं — WebAIM और Adobe Color के पीछे वही WCAG गणित — लेकिन एक लाइव पठनीय प्रीव्यू, एक APCA (WCAG 3) स्कोर और विफल जोड़ों के लिए एक-क्लिक फिक्स जोड़ता है। सब कुछ JavaScript में स्थानीय रूप से चलता है: आपके रंग कभी आपके डिवाइस से नहीं जाते और कोई अकाउंट की ज़रूरत नहीं।
WCAG AA और AAA थ्रेशोल्ड समझाया
WCAG कंट्रास्ट अनुपात 1:1 (दो समान रंग) से 21:1 (सफेद पर काला) तक होता है। लेवल AA — जो ADA और सेक्शन 508 जैसे अधिकांश कानूनों की आवश्यकता है — सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट के लिए 3:1 की मांग करता है। लेवल AAA इसे 7:1 और 4.5:1 तक बढ़ाता है। बड़ा टेक्स्ट 18pt (24px) और उससे अधिक, या 14pt (लगभग 18.66px) और उससे अधिक बोल्ड होता है।
पास-फेल मैट्रिक्स हर थ्रेशोल्ड को अलग-अलग दिखाता है, ताकि आप एक नज़र में देख सकें कि सफेद पर #767676 जैसा ग्रे बॉडी टेक्स्ट AA को 4.54:1 पर पास करता है लेकिन AAA के लिए जरूरी 7:1 से कम रहता है।
एक्सेसिबल रंग जोड़े प्रीव्यू करें, ठीक करें और उपयोग करें
संख्याएं आधी कहानी ही बताती हैं, इसलिए लाइव प्रीव्यू आपके सटीक रंगों में असली हेडिंग, बॉडी कॉपी, छोटा प्रिंट और एक नमूना बटन और चिप रेंडर करता है — पठनीयता देखें, बस अनुपात न पढ़ें। जब कोई जोड़ा विफल हो जाता है, 'इसे पास कराएं' सुझावकर्ता आपकी ह्यू और सैचुरेशन बनाए रखता है और ब्राइटनेस को निकटतम रंग तक समायोजित करता है जो चुने गए स्तर (AA, AA बड़ा, या AAA) को क्लियर करे, फिर इसे एक क्लिक में लागू करता है।
पेयरवाइज़ ग्रिड एक पूरी पैलेट स्वीकार करता है और एक नज़र में दिखाता है कि कौन से रंग संयोजन पास होते हैं — उपयोगी तब जब आप एक डिज़ाइन सिस्टम बना रहे हों जहां हर फोरग्राउंड और बैकग्राउंड पेयरिंग सुरक्षित होनी चाहिए।
APCA: WCAG 3 कंट्रास्ट की झलक
क्लासिक अनुपात के साथ-साथ, यह चेकर एक APCA Lc स्कोर दिखाता है — WCAG 3 के लिए प्रस्तावित अवधारणात्मक कंट्रास्ट मेट्रिक। APCA मॉडल करता है कि आंख वास्तव में डार्क पर लाइट टेक्स्ट बनाम लाइट पर डार्क टेक्स्ट कैसे पढ़ती है और फ़ॉन्ट वेट को ध्यान में रखती है। रफ टार्गेट: बॉडी टेक्स्ट के लिए Lc 75+, बड़े टेक्स्ट के लिए Lc 60+, बड़े हेडिंग के लिए Lc 45+।
WCAG 3 अभी भी ड्राफ्ट में है और WCAG 2.2 को नहीं बदला है, इसलिए आज अनुपालन का मतलब 4.5:1 और 3:1 थ्रेशोल्ड पूरे करना है। APCA को वर्तमान अनुपात के साथ दिखाना आपको स्पेसिफिकेशन फाइनल होने का इंतज़ार किए बिना अपनी पैलेट को भविष्य के लिए तैयार करने देता है।
आइकन और UI घटकों के लिए गैर-टेक्स्ट कंट्रास्ट
कंट्रास्ट केवल टेक्स्ट के लिए नहीं है। WCAG 2.1 SC 1.4.11 इंटरैक्टिव घटकों की सीमाओं के लिए 3:1 कंट्रास्ट की मांग करता है — इनपुट बॉर्डर, फोकस इंडिकेटर, टॉगल स्टेट — और अर्थपूर्ण आइकन और ग्राफिक्स के लिए। मैट्रिक्स में 3:1 पर एक समर्पित UI और ग्राफिक्स जांच शामिल है।
यह एक ऐसा क्षेत्र है जहां कई टीमें बिना एहसास के ऑडिट में विफल हो जाती हैं। सफेद पर हल्का-ग्रे इनपुट बॉर्डर (#D1D1D1 पर 1.4:1) WCAG 2.1 का एक सामान्य उल्लंघन है। यहां अपने UI घटकों की जांच करने में सेकंड लगते हैं।
WebAIM, Adobe Color और Chrome DevTools से तुलना
WebAIM का कंट्रास्ट चेकर webaim.org पर सबसे अधिक उद्धृत मुफ्त एक्सेसिबिलिटी टूल है और इसी WCAG 2 फॉर्मूले का उपयोग करता है। यह APCA नहीं दिखाता, लाइव टेक्स्ट प्रीव्यू नहीं है और विफल जोड़ों को स्वतः ठीक नहीं कर सकता।
Adobe Color के एक्सेसिबिलिटी टूल्स AA/AAA परिणाम और कलर ब्लाइंडनेस सिम्युलेटर दिखाते हैं, लेकिन काम सहेजने के लिए मुफ्त Adobe अकाउंट की जरूरत होती है।
Chrome DevTools में Elements पैनल कलर पिकर में कंट्रास्ट अनुपात बैज है — उपयोगी, लेकिन केवल DevTools के अंदर।
यह चेकर बिना लॉगिन के चलता है, WCAG 2 अनुपात और APCA Lc स्कोर दोनों दिखाता है, आपके रंगों में लाइव प्रीव्यू रेंडर करता है, और एक व्यू में पूरी पैलेट ग्रिड टेस्ट करने देता है। सभी गणनाएं JavaScript में स्थानीय रूप से चलती हैं।
Frequently asked questions
रंग कंट्रास्ट चेकर क्या होता है?
रंग कंट्रास्ट चेकर टेक्स्ट (फोरग्राउंड) रंग और उसके बैकग्राउंड के बीच WCAG कंट्रास्ट अनुपात मापता है, फिर बताता है कि जोड़ा एक्सेसिबिलिटी दिशानिर्देशों के तहत पढ़ने योग्य है या नहीं। दो रंग दर्ज करें और यह 1:1 (समान) से 21:1 (सफेद पर काला) तक का अनुपात, साथ ही सामान्य टेक्स्ट, बड़े टेक्स्ट और UI घटकों के लिए AA और AAA परिणाम देता है।
WCAG के अनुसार न्यूनतम कंट्रास्ट अनुपात क्या है?
WCAG टेक्स्ट और बैकग्राउंड के बीच न्यूनतम कंट्रास्ट अनुपात निर्धारित करता है: AA स्तर पर सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट के लिए 3:1, AAA स्तर पर 7:1 और 4.5:1 तक। शुद्ध काला (#000000) सफेद पर अधिकतम 21:1 पर है। ये थ्रेशोल्ड WCAG 2.0, 2.1 और 2.2 पर लागू होते हैं।
WCAG AA और AAA में क्या अंतर है?
AA व्यापक रूप से आवश्यक आधार रेखा है — सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट के लिए 3:1। AAA उन्नत स्तर है — सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1। अधिकांश एक्सेसिबिलिटी कानून AA को लक्षित करते हैं। कम दृष्टि वाले उपयोगकर्ताओं के लिए AAA अनुसरण करने योग्य है।
आइकन और UI घटकों को कंट्रास्ट की जरूरत है?
हां। WCAG 2.1 SC 1.4.11 (गैर-टेक्स्ट कंट्रास्ट) इंटरैक्टिव घटकों की दृश्य सीमाओं के लिए कम से कम 3:1 की मांग करता है — इनपुट बॉर्डर, फोकस रिंग, टॉगल स्टेट — और अर्थपूर्ण आइकन और ग्राफिक्स के लिए। इस टूल की रिज़ल्ट ग्रिड में 3:1 पर एक समर्पित UI और ग्राफिक्स पंक्ति शामिल है।
विफल कंट्रास्ट अनुपात को कैसे ठीक करें?
सबसे तेज़ समाधान टेक्स्ट रंग को गहरा करना या बैकग्राउंड को हल्का करना है जब तक थ्रेशोल्ड पार न हो जाए, केवल ब्राइटनेस बदलकर ब्रांड ह्यू बनाए रखें। इस टूल का अंतर्निहित 'इसे पास कराएं' सुझावकर्ता यह स्वचालित रूप से करता है — टेक्स्ट या बैकग्राउंड को निकटतम पासिंग रंग तक समायोजित करता है और एक क्लिक में लागू करता है।
APCA क्या है और यह क्यों मायने रखता है?
APCA (Accessible Perceptual Contrast Algorithm) आने वाले WCAG 3 के लिए प्रस्तावित कंट्रास्ट विधि है। एकल अनुपात के बजाय यह लगभग -108 से 106 तक एक अवधारणात्मक ब्राइटनेस कंट्रास्ट (Lc) मान देता है; परिमाण जितना बड़ा, उतना अधिक कंट्रास्ट। रफ गाइडेंस: बॉडी टेक्स्ट के लिए Lc 75+, बड़े टेक्स्ट के लिए Lc 60+, बड़े हेडिंग के लिए Lc 45+।
WCAG 2.1 या 2.2 में से कौन सा लागू है?
कंट्रास्ट थ्रेशोल्ड WCAG 2.0, 2.1 और 2.2 में समान हैं। WCAG 2.2 वर्तमान W3C अनुशंसा है और अधिकांश नए नियम इसी का संदर्भ देते हैं। 2.0 या 2.1 AA में मौजूदा टेक्स्ट कंट्रास्ट कार्य अभी भी अनुपालन में है क्योंकि मुख्य कंट्रास्ट आवश्यकताएं नहीं बदली हैं।
Related tools
सभी टूल्स देखें
नया CSS Box-Shadow जेनरेटर
प्रीसेट और लाइव प्रीव्यू के साथ मल्टी-लेयर CSS box-shadow बनाएँ। CSS, value या React style तुरंत कॉपी करें।
नया कलर पैलेट जेनरेटर
complementary, analogous, triadic और monochromatic पैलेट बनाएँ।
नया Cubic Bezier जेनरेटर
कंट्रोल पॉइंट खींचकर CSS easing curve डिज़ाइन करें — लाइव प्रीव्यू के साथ।
नया Border Radius जेनरेटर
CSS गोल कोने और ऑर्गैनिक blob आकार दृश्य रूप से बनाएँ।
नया CSS Flexbox प्लेग्राउंड
लाइव प्रीव्यू के साथ flex properties एडजस्ट करें और CSS कॉपी करें।
नया CSS Grid प्लेग्राउंड
लाइव प्रीव्यू और CSS के साथ grid columns, gap और alignment एडजस्ट करें।