WCAG कंट्रास्ट चेकर और सिम्युलेटर
एडवांस्ड WCAG 2.1 / 2.2 कलर कंट्रास्ट चेकर और एक्सेसिबिलिटी सिम्युलेटर। टेक्स्ट, UI कंपोनेंट्स, ग्रेडिएंट टेस्ट करें और रीयल-टाइम में कलर ब्लाइंडनेस का अनुकरण करें।
सुगम्य डिज़ाइन मायने रखता है
यह एक नमूना पैराग्राफ है जो दिखाता है कि आपके चुने गए रंग साथ में कैसे दिखते हैं। अच्छा कंट्रास्ट सभी के लिए पठनीयता सुनिश्चित करता है।
Select a simulation mode below to apply filters to the live preview area.
If your current colors fail the WCAG checks, use the auto-fix suggestions below to find the closest compliant colors while keeping your original brand aesthetics.
Current colors pass WCAG AA. No fixes needed!
Suggested Compliant Variants:
Export your selected colors as CSS variables, Tailwind configuration, or design tokens.
सामान्य टेक्स्ट
बड़ा टेक्स्ट
UI कंपोनेंट्स
अक्सर पूछे जाने वाले प्रश्न
कंट्रास्ट चेकर का उपयोग कैसे करें
-
फोरग्राउंड और बैकग्राउंड रंग सेट करें
कलर पिकर का उपयोग करके या HEX, RGB, या HSL मान टाइप करके अपना टेक्स्ट रंग (फोरग्राउंड) और बैकग्राउंड रंग दर्ज करें। कंट्रास्ट अनुपात तुरंत अपडेट होता है। -
अपना WCAG परिणाम पढ़ें
टूल कंट्रास्ट अनुपात (जैसे 5.2:1) दिखाता है और क्या यह WCAG AA (सामान्य टेक्स्ट के लिए 4.5:1) और AAA (7:1) पास करता है। बड़े टेक्स्ट (18pt+) की सीमाएं कम होती हैं। -
कलर ब्लाइंडनेस का अनुकरण करें
यह देखने के लिए सिम्युलेटर टैब पर स्विच करें कि आपका रंग संयोजन ड्यूटेरानोपिया, प्रोटानोपिया, ट्राइटानोपिया, या अन्य दृष्टि प्रकार वाले उपयोगकर्ताओं को कैसा दिखता है। -
यदि आवश्यक हो तो ऑटो-फिक्स का उपयोग करें
यदि आपके रंग विफल होते हैं, तो ऑटो-फिक्स पर क्लिक करें। टूल आपके ह्यू और सैचुरेशन को यथासंभव संरक्षित रखते हुए निकटतम AA या AAA अनुरूप शेड की गणना करता है।
कंट्रास्ट अनुपात संदर्भ
विभिन्न टेक्स्ट श्रेणियों के लिए WCAG 2.1 न्यूनतम कंट्रास्ट आवश्यकताएं:
| सामग्री प्रकार | WCAG AA | WCAG AAA | उदाहरण अनुपात |
|---|---|---|---|
| सामान्य टेक्स्ट (<18pt) | 4.5:1 ✓ | 7:1 ✓ | #fff पर #000 → 21:1 |
| बड़ा टेक्स्ट (≥18pt बोल्ड) | 3:1 ✓ | 4.5:1 ✓ | #fff पर #333 → 12.6:1 |
| UI कंपोनेंट्स और आइकन | 3:1 ✓ | N/A | #fff पर #767676 → 4.5:1 |
| सजावटी एलिमेंट | कोई आवश्यकता नहीं | कोई आवश्यकता नहीं | बैकग्राउंड इमेज छूट प्राप्त |
सामान्य उपयोग के मामले
UI / विज़ुअल डिज़ाइन समीक्षा
डेवलपमेंट को सौंपे जाने से पहले अपने डिज़ाइन सिस्टम में हर टेक्स्ट और बैकग्राउंड संयोजन का परीक्षण करें, जल्दी विफलताओं को पकड़ें।
एक्सेसिबिलिटी ऑडिट
क्लाइंट एक्सेसिबिलिटी रिपोर्ट और WCAG 2.1 / 2.2 अनुपालन प्रमाणन के लिए दस्तावेज़ीकृत कंट्रास्ट अनुपात प्रदान करें।
कलर ब्लाइंडनेस परीक्षण
अनुकरण करें कि 8% पुरुष उपयोगकर्ता आपके पैलेट को कैसे अनुभव करते हैं ताकि यह सुनिश्चित हो सके कि कलर-ब्लाइंड दर्शकों के लिए कोई महत्वपूर्ण जानकारी नहीं खोती है।
कानूनी अनुपालन
प्रोडक्ट लॉन्च या सार्वजनिक टेंडर से पहले ADA (USA), EAA (EU), और EN 301 549 डिजिटल एक्सेसिबिलिटी आवश्यकताओं को पूरा करें।
डेवलपर QA
डिज़ाइन टूल पर स्विच किए बिना, कोड समीक्षा के दौरान CSS रंग वेरिएबल्स के कंट्रास्ट को तेजी से सत्यापित करें।
यह कैसे काम करता है
सभी गणनाएं WCAG 2.1 ल्यूमिनेंस फॉर्मूला का उपयोग करके आपके ब्राउज़र में चलती हैं — कोई सर्वर संपर्क आवश्यक नहीं है।
WCAG ल्यूमिनेंस को लीनियराइज़्ड RGB चैनलों के भारित योग के रूप में परिभाषित करता है: L = 0.2126R + 0.7152G + 0.0722B। कंट्रास्ट अनुपात तब (L1 + 0.05) / (L2 + 0.05) होता है, जहां L1 हल्का रंग है।
सिम्युलेटर मानक डाल्टोनाइज़ेशन मैट्रिक्स (Machado et al., 2009) लागू करता है ताकि sRGB मानों को प्रत्येक प्रकार की कलर विज़न डेफिशिएंसी द्वारा अनुभूत के रूप में रूपांतरित किया जा सके।
ऑटो-फिक्स HSL स्पेस में लाइटनेस चैनल पर पुनरावृत्ति करता है, ह्यू और सैचुरेशन को अपरिवर्तित रखते हुए लक्ष्य अनुपात (AA या AAA) तक पहुंचने वाला न्यूनतम समायोजन खोजता है।
यह टूल किसके लिए है
UI/UX डिज़ाइनर
डिज़ाइन सौंपे जाने से पहले रंग संयोजनों का परीक्षण करें और एक अनुरूप डिज़ाइन सिस्टम बनाए रखें।
एक्सेसिबिलिटी विशेषज्ञ
WCAG ऑडिट, क्लाइंट रिपोर्ट, और अनुपालन प्रमाणन के लिए कंट्रास्ट प्रमाण तैयार करें।
फ्रंटएंड डेवलपर्स
ब्राउज़र छोड़े बिना, डेवलपमेंट और कोड समीक्षा के दौरान CSS रंग वेरिएबल्स की तेजी से जांच करें।
प्रोडक्ट मैनेजर
प्रोडक्ट लॉन्च या सार्वजनिक टेंडर सबमिशन से पहले कानूनी एक्सेसिबिलिटी अनुपालन (ADA, EAA) सुनिश्चित करें।
कंटेंट क्रिएटर
सत्यापित करें कि इमेज या रंगीन बैकग्राउंड पर लगाया गया टेक्स्ट सभी दर्शकों के लिए पठनीय है।
बेहतर सुगम्य डिज़ाइन के लिए सुझाव
- हमेशा अपने आधार रेखा के रूप में WCAG AA (4.5:1) को लक्षित करें, और बॉडी टेक्स्ट के लिए AAA (7:1) का लक्ष्य रखें — विशेष रूप से हेल्थकेयर, सरकारी, और वित्तीय साइटों पर।
- सभी 8 प्रकारों के लिए कलर ब्लाइंडनेस सिमुलेशन चलाएं, केवल ड्यूटेरानोपिया नहीं। प्रत्येक प्रकार विभिन्न रंग जोड़ों को अलग-अलग तरीके से प्रभावित करता है।
- जानकारी देने के लिए कभी भी केवल रंग पर निर्भर न रहें — हमेशा रंग संकेतों को आइकन, पैटर्न, या टेक्स्ट लेबल के साथ जोड़ें।
- कंट्रास्ट ट्यून करने के लिए HSL का उपयोग करें: ह्यू बदलने के बजाय फोरग्राउंड और बैकग्राउंड के बीच लाइटनेस अंतर बढ़ाएं।
- तेज धूप में एक भौतिक मोबाइल डिवाइस पर परीक्षण करें — वास्तविक-दुनिया की स्थितियां कंट्रास्ट समस्याओं को उजागर करती हैं जिन्हें मॉनिटर छिपा देते हैं।
एक्सेसिबिलिटी कंट्रास्ट क्यों मायने रखता है
- लगभग 12 में से 1 पुरुष और 200 में से 1 महिला में किसी न किसी प्रकार की कलर विज़न डेफिशिएंसी होती है — खराब कंट्रास्ट सीधे इन उपयोगकर्ताओं को बाहर कर देता है।
- ADA (USA) और यूरोपियन एक्सेसिबिलिटी एक्ट (EU 2025) को सार्वजनिक-सामना वाले डिजिटल उत्पादों के लिए WCAG 2.1 AA अनुपालन की आवश्यकता है।
- खराब कंट्रास्ट वैश्विक स्तर पर एक्सेसिबिलिटी ऑडिट में पाई जाने वाली शीर्ष 3 सबसे सामान्य WCAG विफलताओं में से एक है (WebAIM Million रिपोर्ट)।
- सुगम्य रंग डिज़ाइन सभी उपयोगकर्ताओं के लिए पठनीयता में सुधार करता है — तेज धूप में, कम-गुणवत्ता वाले डिस्प्ले पर, और जैसे-जैसे उपयोगकर्ता बड़े होते हैं।
प्रदर्शन और गोपनीयता
प्रत्येक कंट्रास्ट गणना, कलर ब्लाइंडनेस सिमुलेशन, और ऑटो-फिक्स पूरी तरह से JavaScript का उपयोग करके आपके ब्राउज़र में चलता है। कोई भी रंग मान, स्क्रीनशॉट, या उपयोग डेटा कभी भी किसी सर्वर पर प्रेषित नहीं होता। टूल प्रति गणना 5 ms से कम में प्रतिक्रिया देता है और पहले पेज लोड के बाद ऑफ़लाइन काम करता है।
शैक्षणिक नोट: WCAG और कलर विज़न
WCAG 2.1 बनाम 2.2
WCAG 2.2 (2023) ने नए सफलता मानदंड (2.4.11 फोकस उपस्थिति, 3.2.6 सुसंगत सहायता) पेश किए लेकिन मुख्य कंट्रास्ट आवश्यकताओं (1.4.3, 1.4.6) को 2.1 के समान रखा।
ल्यूमिनेंस बनाम ब्राइटनेस
WCAG सापेक्ष ल्यूमिनेंस का उपयोग करता है — एक अनुभूति-भारित माप। एक चमकीले पीले (#ffff00) की ल्यूमिनेंस बहुत अधिक (0.93) होती है जबकि एक गहरे नेवी (#003366) की ल्यूमिनेंस कम (0.02) होती है, जिससे 9.8:1 का अनुपात मिलता है।
कलर ब्लाइंडनेस के प्रकार
ड्यूटेरानोपिया (लाल-हरा, सबसे सामान्य) लगभग 6% पुरुषों को प्रभावित करता है। प्रोटानोपिया (लाल अंधापन) लगभग 2%। ट्राइटानोपिया (नीला-पीला) लगभग 0.01%। अक्रोमेटोप्सिया (पूर्ण कलर ब्लाइंडनेस) लगभग 0.003%।
APCA — भविष्य का मानक
एडवांस्ड परसेप्चुअल कंट्रास्ट एल्गोरिदम (APCA) WCAG 3.0 के लिए प्रस्तावित है। यह फ़ॉन्ट साइज़, वेट, और पोलैरिटी के आधार पर कंट्रास्ट का अलग तरह से मूल्यांकन करता है — इस स्थान पर नज़र रखें।
समस्या निवारण
क्या आप जानते हैं?
WCAG कंट्रास्ट अनुपात फॉर्मूला पहली बार WCAG 1.0 (1999) में एक साधारण ब्राइटनेस अंतर जांच के रूप में पेश किया गया था। इसे WCAG 2.0 (2008) में सापेक्ष ल्यूमिनेंस का उपयोग करने के लिए महत्वपूर्ण रूप से संशोधित किया गया — एक मॉडल जो CIE 1931 कलर स्पेस और मानव दृश्य प्रणाली प्रकाश को कैसे संसाधित करती है, इस पर आधारित है। वर्तमान 4.5:1 सीमा को इसलिए चुना गया क्योंकि यह लगभग 20/80 दृष्टि (सहायक तकनीक के बिना कम दृष्टि) वाले उपयोगकर्ताओं द्वारा अनुभव किए जाने वाले 3:1 कंट्रास्ट हानि की भरपाई करता है।
ऐसे उत्पाद बनाएं जिन्हें हर कोई उपयोग कर सके
सुगम्य रंग कंट्रास्ट केवल एक अनुपालन चेकबॉक्स नहीं है — यह एक मौलिक डिज़ाइन गुणवत्ता है जो हर उपयोगकर्ता को लाभान्वित करती है। यह मुफ्त टूल आपको एक ही स्थान पर रीयल-टाइम WCAG जांच, कलर ब्लाइंडनेस सिमुलेशन, और बुद्धिमान ऑटो-फिक्स देता है, जिसमें कोई डेटा आपके ब्राउज़र से बाहर नहीं जाता। अभी अपने पैलेट का परीक्षण करें, जो विफल होता है उसे ठीक करें, और एक ऐसा उत्पाद शिप करें जो सभी के लिए काम करे।