टेक्स्ट और पृष्ठभूमि रंगों के कंट्रास्ट अनुपात की गणना करें और WCAG 2.1 AA/AAA एक्सेसिबिलिटी मानकों की जांच करें।
WCAG कलर कंट्रास्ट चेकर यूआई/यूएक्स डिजाइनरों, एक्सेसिबिलिटी (a11y) ऑडिटर्स और फ्रंटेंड डेवलपर्स के लिए डिजिटल इंटरफेस में टेक्स्ट और बैकग्राउंड रंगों के बीच कंट्रास्ट अनुपात का मूल्यांकन करने का एक वैज्ञानिक उपकरण है। W3C वेब सामग्री एक्सेसिबिलिटी दिशानिर्देश (WCAG 2.1) के तहत, कम दृष्टि वाले, दृष्टिबाधित या तेज धूप में मोबाइल फोन का उपयोग करने वाले उपयोगकर्ताओं के लिए टेक्स्ट को आसानी से पढ़ने योग्य बनाने हेतु पर्याप्त ल्यूमिनेन्स कंट्रास्ट होना कानूनी और नैतिक रूप से आवश्यक है।
एक वास्तविक डिज़ाइन सिस्टम परिदृश्य में, मान लीजिए आप किसी प्राइमरी बटन के लिए बैकग्राउंड कलर #3B82F6 (ब्लू) और टेक्स्ट कलर #FFFFFF (सफेद) चुनते हैं। टूल दोनों रंगों के हेक्स कोड को तुरंत sRGB कलर स्पेस में सामान्यीकृत करता है और सापेक्ष ल्यूमिनेन्स (Relative Luminance) फॉर्मूले का उपयोग करके 3.68:1 का कंट्रास्ट रेशियो परिकलित करता है। यह तुरंत दिखाता है कि यह सामान्य टेक्स्ट के लिए WCAG AA (न्यूनतम 4.5:1) पर विफल है, लेकिन लार्ज टेक्स्ट (18pt+) के लिए 3:1 की सीमा पार करता है। इसके बाद थोड़ा गहरा शेड #1D4ED8 चुनने पर अनुपात बढ़कर 6.54:1 हो जाता है, जो AA और AAA दोनों मानकों को सफलतापूर्वक पास करता है।
आपकी कॉर्पोरेट ब्रांड पहचान और डिज़ाइन संपत्तियों की गोपनीयता के लिए, सभी रंग ज्यामिति और गणितीय अनुपात गणनाएं 100% क्लाइंट-साइड जावास्क्रिप्ट में होती हैं। आपके ब्रांड कलर पैलेट्स या डिज़ाइन पैरामीटर्स कभी किसी बाहरी सर्वर पर अपलोड नहीं किए जाते हैं।
सापेक्ष ल्यूमिनेन्स: L = 0.2126R' + 0.7152G' + 0.0722B' ; कंट्रास्ट अनुपात = (L₁ + 0.05) / (L₂ + 0.05)
sRGB रंग घटकों को गामा-विस्तारित करके सापेक्ष ल्यूमिनेन्स (0 = काला, 1 = सफेद) निकाला जाता है; हल्के रंग (L₁) और गहरे रंग (L₂) के अनुपात से 1:1 से 21:1 के बीच कंट्रास्ट अनुपात प्राप्त होता है।