QuickATools

डेवलपर टूल्स · Free browser tool

WCAG कलर कंट्रास्ट चेकर

टेक्स्ट-टू-बैकग्राउंड कलर कंट्रास्ट रेशियो रियल-टाइम जाँचें। एक्सेसिबल वेब डिज़ाइन के लिए WCAG 2.1 AA और AAA कम्प्लायंस तुरंत सत्यापित करें।

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

WCAG 2.1 वास्तव में कौन-से कंट्रास्ट रेशियो चाहता है?

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) Level AA पर सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 चाहता है। Level AAA (1.4.6 Contrast Enhanced) उन फ़्लोर को सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 तक बढ़ाता है। रेशियो हर रंग की रिलेटिव ल्यूमिनेंस से गणना होते हैं और 1:1 (समान रंग) से 21:1 (शुद्ध काला पर शुद्ध सफेद) तक होते हैं।

AA और AAA में व्यावहारिक अंतर क्या है?

AA सार्वजनिक वेबसाइट, सरकारी सेवाओं और कमर्शियल प्रोडक्ट के लिए सबसे आम कम्प्लायंस लक्ष्य है — पठनीयता और डिज़ाइन लचीलेपन का बैलेंस। AAA सख्त एन्हांस्ड लेवल है जब अधिकतम पठनीयता चाहिए (उदाहरण लंबी रीडिंग या महत्वपूर्ण लो विज़न वाले ऑडियंस)। हर UI एलिमेंट पर AAA अक्सर अव्यावहारिक, इसलिए कई टीमें ग्लोबली AA और क्रिटिकल बॉडी टेक्स्ट पर AAA लक्ष्य रखती हैं।

WCAG के तहत "large text" क्या गिना जाता है?

Large text कम से कम 18 पॉइंट (आमतौर पर ~24px) नियमित वजन, या कम से कम 14 पॉइंट (आमतौर पर ~18.66px) बोल्ड। हेडिंग और हीरो कॉपी अक्सर योग्य; बॉडी पैराग्राफ आमतौर पर नहीं। बड़े टेक्स्ट को कम कंट्रास्ट थ्रेशोल्ड मिलता है क्योंकि बड़े ग्लिफ़ कमज़ोर कंट्रास्ट पर भी पढ़े जाते हैं — लेकिन डिज़ाइन फ़ाइल नहीं, CSS में असली रेंडर साइज़ सत्यापित करें।

एक्सेसिबिलिटी के लिए कलर कंट्रास्ट इतना क्यों मायने रखता है?

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

टूल्स जिनकी आपको भी ज़रूरत हो सकती है

विक्रेताओं, क्रिएटर्स और प्रोफेशनल्स के लिए अन्य मुफ़्त ब्राउज़र यूटिलिटीज़ देखें।

एक्सेसिबल इंटरफ़ेस के लिए कलर कंट्रास्ट गैर-negotiable क्यों है

बैरियर-फ्री डिज़ाइन केवल पॉलिश स्टेप नहीं — यही तरीका है जिससे लो विज़न, कलर विज़न डेफिशिएंसी या कठोर आउटडोर ग्लेयर वाले लोग फिर भी आपका UI पढ़ें। WCAG 2.1 टेक्स्ट और बैकग्राउंड के बीच न्यूनतम कंट्रास्ट रेशियो परिभाषित करता है ताकि कंटेंट कहीं व्यापक यूज़र रेंज के लिए पठनीय रहे। उन थ्रेशोल्ड फेल करना चुपचाप लोगों को फॉर्म, डॉक, डैशबोर्ड और मार्केटिंग पेजों से बाहर करता है जो कैलिब्रेटेड मॉनिटर पर डिज़ाइनरों को ठीक लगते हैं।

सरकारी साइट, एंटरप्राइज़ प्रोडक्ट और कई ग्लोबल कंज़्यूमर ऐप से कम से कम WCAG AA की अपेक्षा होती है। ब्राउज़र में कंट्रास्ट जाँच — स्पेसिफिकेशन वाले उसी रिलेटिव-ल्यूमिनेंस फ़ॉर्मूला से — पैलेट निर्णय शिप से पहले वैलिडेट करने देती है, बिना ब्रांड रंग थर्ड-पार्टी सर्विस पर अपलोड। टेक्स्ट और बैकग्राउंड स्वैप करें, बड़े बनाम सामान्य टेक्स्ट प्रीव्यू करें, और कॉम्बिनेशन पास होने पर टीम के साथ पैलेट लिंक शेयर करें।

AA सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट के लिए 3:1 चाहता है; AAA उन बार को 7:1 और 4.5:1 तक उठाता है। Large text आम तौर पर 18pt (लगभग 24px) नियमित या 14pt (लगभग 18.66px) बोल्ड। डिज़ाइन रिव्यू में तेज़ गेट के रूप में इस्तेमाल करें, फिर कॉन्टेक्स्ट में फाइनल UI कन्फर्म करें — आइकन, ग्रेडिएंट और ओवरले प्रभावी कंट्रास्ट बदल सकते हैं भले दो फ्लैट हेक्स वैल्यू पास हों।

इस साइट पर और डेवलपर यूटिलिटी: Regex Tester से फॉर्म पैटर्न वैलिडेट करें, JWT Decoder में ऑथ टोकन निरीक्षण करें, JSON Formatter & Validator से डिज़ाइन टोकन JSON साफ़ करें, या Base64 Encode/Decode से एसेट एनकोड करें। मार्केटप्लेस प्रोडक्ट फ़ोटो के लिए Product Photo Background Checker उसी ल्यूमिनेंस गणित को असली इमेजरी पर दोहराता है।