{
    "@context": "https://schema.org",
    "@type": "Article",
    "@id": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui",
    "url": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui",
    "identifier": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui",
    "name": "UI में उपयोग से पहले चुने गए रंग का टेक्स्ट कंट्रास्ट कैसे जाँचें",
    "headline": "UI में उपयोग से पहले चुने गए रंग का टेक्स्ट कंट्रास्ट कैसे जाँचें",
    "description": "WCAG कंट्रास्ट रेश्यो जाँचना और HSL में रंग एडजस्ट करना सीखें ताकि आपकी UI हमेशा accessible और पठनीय रहे।",
    "inLanguage": "hi",
    "datePublished": "2026-08-29",
    "dateModified": "2026-08-29",
    "author": {
        "@type": "Person",
        "name": "Lubor Šimůnek"
    },
    "publisher": {
        "@type": "Organization",
        "name": "lapnito.cz s.r.o.",
        "url": "https://appstoryo.com"
    },
    "isPartOf": {
        "@type": "WebSite",
        "name": "AppStoryo",
        "url": "https://appstoryo.com"
    },
    "license": "https://creativecommons.org/licenses/by/4.0/",
    "keywords": [
        "डिज़ाइन",
        "article",
        "AppStoryo"
    ],
    "articleSection": "डिज़ाइन",
    "image": "https://appstoryo.com/upload/blog/check-text-contrast-picked-color-ui-hero.jpg",
    "encoding": [
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui.pdf",
            "encodingFormat": "application/pdf"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui.md",
            "encodingFormat": "text/markdown"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui.txt",
            "encodingFormat": "text/plain"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui.json",
            "encodingFormat": "application/json"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui.epub",
            "encodingFormat": "application/epub+zip"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui.jats.xml",
            "encodingFormat": "application/xml"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui.bib",
            "encodingFormat": "application/x-bibtex"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui.ris",
            "encodingFormat": "application/x-research-info-systems"
        },
        {
            "@type": "MediaObject",
            "contentUrl": "https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui.csl.json",
            "encodingFormat": "application/vnd.citationstyles.csl+json"
        }
    ],
    "cite": "Lubor Šimůnek (2026). UI में उपयोग से पहले चुने गए रंग का टेक्स्ट कंट्रास्ट कैसे जाँचें. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/hi/blog/check-text-contrast-picked-color-ui",
    "sections": [
        {
            "level": 2,
            "heading": "कंट्रास्ट क्यों महत्वपूर्ण है",
            "text": "दुनिया भर में लगभग 30 करोड़ लोग किसी न किसी प्रकार के रंग-दृष्टि विकार से पीड़ित हैं। अच्छे कंट्रास्ट के साथ डिज़ाइन करना केवल सौंदर्यशास्त्र नहीं है — कई क्षेत्रों में यह कानूनी आवश्यकता भी है। संदर्भ मानक WCAG 2.1 है, जो दो मुख्य स्तर परिभाषित करता है:\n\n- Level AA: सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट (18px या 14px बोल्ड) के लिए 3:1 कंट्रास्ट अनुपात।\n- Level AAA: सामान्य टेक्स्ट के लिए 7:1।"
        },
        {
            "level": 2,
            "heading": "सामान्य गलतियाँ",
            "text": "सबसे आम समस्याएं हैं: सफेद पृष्ठभूमि पर हल्का ग्रे (1.5:1 तक हो सकता है), रंगीन बटन पर सफेद टेक्स्ट जो दृश्यमान लगता है लेकिन AA पास नहीं करता, और ऐसे रंग जो लाइट मोड में पास हों लेकिन डार्क मोड में फेल हों।"
        },
        {
            "level": 2,
            "heading": "व्यावहारिक वर्कफ़्लो",
            "text": "1. बैकग्राउंड कलर कैप्चर करें। Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) खोलें, कैमरा सतह पर लगाएं और एक टैप में HEX वैल्यू पाएं। ऐप HSL भी एक साथ दिखाता है।\n2. उसी तरह टेक्स्ट कलर कैप्चर करें।\n3. किसी कंट्रास्ट चेकर में जोड़ी जाँचें — जैसे WebAIM Contrast Checker, DevTools का Accessibility पैनल, या Figma का Contrast प्लगइन।\n4. HSL में lightness एडजस्ट करें जब तक रेश्यो पास न हो। H और S को बनाए रखते हुए L घटाएं ताकि रंग गहरा हो बिना उसकी पहचान बदले।"
        },
        {
            "level": 2,
            "heading": "कंट्रास्ट एडजस्टमेंट के लिए HSL क्यों आदर्श है",
            "text": "RGB और HEX brightness पर सहज नियंत्रण नहीं देते। HSL hue, saturation और lightness को अलग करता है। Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker) एक साथ HEX, RGB, HSL और CMYK दिखाता है — कोई मैन्युअल कन्वर्ज़न नहीं।"
        },
        {
            "level": 2,
            "heading": "वास्तविक उदाहरण",
            "text": "मध्यम नीले (#4A90E2) पर सफेद टेक्स्ट बटन का कंट्रास्ट लगभग 3.1:1 है — AA पास नहीं। डार्क नेवी (#1A3A6B) पर जाएं और यह 9.4:1 हो जाता है, AAA भी पार।"
        },
        {
            "level": 2,
            "heading": "WCAG 3.0 और APCA के बारे में",
            "text": "अगली पीढ़ी के दिशानिर्देश APCA पेश करते हैं — एक अधिक सूक्ष्म perceptual contrast मॉडल। WCAG 2.1 AA अभी लागू मानक है, लेकिन दीर्घकालिक प्रोजेक्ट्स के लिए APCA का परीक्षण भी उपयोगी है।\n\nColor Picker Camera: HEX RGB को iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) या Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) पर मुफ़्त डाउनलोड करें — कोई विज्ञापन नहीं, कोई ट्रैकिंग नहीं, और यह पूरी तरह ऑफ़लाइन काम करता है।"
        }
    ],
    "text": "कंट्रास्ट क्यों महत्वपूर्ण है\n\nदुनिया भर में लगभग 30 करोड़ लोग किसी न किसी प्रकार के रंग-दृष्टि विकार से पीड़ित हैं। अच्छे कंट्रास्ट के साथ डिज़ाइन करना केवल सौंदर्यशास्त्र नहीं है — कई क्षेत्रों में यह कानूनी आवश्यकता भी है। संदर्भ मानक WCAG 2.1 है, जो दो मुख्य स्तर परिभाषित करता है:\n\n- Level AA: सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट (18px या 14px बोल्ड) के लिए 3:1 कंट्रास्ट अनुपात।\n- Level AAA: सामान्य टेक्स्ट के लिए 7:1।\n\nसामान्य गलतियाँ\n\nसबसे आम समस्याएं हैं: सफेद पृष्ठभूमि पर हल्का ग्रे (1.5:1 तक हो सकता है), रंगीन बटन पर सफेद टेक्स्ट जो दृश्यमान लगता है लेकिन AA पास नहीं करता, और ऐसे रंग जो लाइट मोड में पास हों लेकिन डार्क मोड में फेल हों।\n\nव्यावहारिक वर्कफ़्लो\n\n1. बैकग्राउंड कलर कैप्चर करें। Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) खोलें, कैमरा सतह पर लगाएं और एक टैप में HEX वैल्यू पाएं। ऐप HSL भी एक साथ दिखाता है।\n2. उसी तरह टेक्स्ट कलर कैप्चर करें।\n3. किसी कंट्रास्ट चेकर में जोड़ी जाँचें — जैसे WebAIM Contrast Checker, DevTools का Accessibility पैनल, या Figma का Contrast प्लगइन।\n4. HSL में lightness एडजस्ट करें जब तक रेश्यो पास न हो। H और S को बनाए रखते हुए L घटाएं ताकि रंग गहरा हो बिना उसकी पहचान बदले।\n\nकंट्रास्ट एडजस्टमेंट के लिए HSL क्यों आदर्श है\n\nRGB और HEX brightness पर सहज नियंत्रण नहीं देते। HSL hue, saturation और lightness को अलग करता है। Color Picker Camera: HEX RGB (https://play.google.com/store/apps/details?id=com.tomas.color_picker) एक साथ HEX, RGB, HSL और CMYK दिखाता है — कोई मैन्युअल कन्वर्ज़न नहीं।\n\nवास्तविक उदाहरण\n\nमध्यम नीले (#4A90E2) पर सफेद टेक्स्ट बटन का कंट्रास्ट लगभग 3.1:1 है — AA पास नहीं। डार्क नेवी (#1A3A6B) पर जाएं और यह 9.4:1 हो जाता है, AAA भी पार।\n\nWCAG 3.0 और APCA के बारे में\n\nअगली पीढ़ी के दिशानिर्देश APCA पेश करते हैं — एक अधिक सूक्ष्म perceptual contrast मॉडल। WCAG 2.1 AA अभी लागू मानक है, लेकिन दीर्घकालिक प्रोजेक्ट्स के लिए APCA का परीक्षण भी उपयोगी है।\n\nColor Picker Camera: HEX RGB को iOS (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) या Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) पर मुफ़्त डाउनलोड करें — कोई विज्ञापन नहीं, कोई ट्रैकिंग नहीं, और यह पूरी तरह ऑफ़लाइन काम करता है।",
    "markdown": "## कंट्रास्ट क्यों महत्वपूर्ण है\n\nदुनिया भर में लगभग 30 करोड़ लोग किसी न किसी प्रकार के रंग-दृष्टि विकार से पीड़ित हैं। अच्छे कंट्रास्ट के साथ डिज़ाइन करना केवल सौंदर्यशास्त्र नहीं है — कई क्षेत्रों में यह कानूनी आवश्यकता भी है। संदर्भ मानक **WCAG 2.1** है, जो दो मुख्य स्तर परिभाषित करता है:\n\n- **Level AA**: सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट (18px या 14px बोल्ड) के लिए 3:1 कंट्रास्ट अनुपात।\n- **Level AAA**: सामान्य टेक्स्ट के लिए 7:1।\n\n## सामान्य गलतियाँ\n\nसबसे आम समस्याएं हैं: सफेद पृष्ठभूमि पर हल्का ग्रे (1.5:1 तक हो सकता है), रंगीन बटन पर सफेद टेक्स्ट जो दृश्यमान लगता है लेकिन AA पास नहीं करता, और ऐसे रंग जो लाइट मोड में पास हों लेकिन डार्क मोड में फेल हों।\n\n## व्यावहारिक वर्कफ़्लो\n\n1. **बैकग्राउंड कलर कैप्चर करें।** [Color Picker Camera: HEX RGB](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) खोलें, कैमरा सतह पर लगाएं और एक टैप में HEX वैल्यू पाएं। ऐप HSL भी एक साथ दिखाता है।\n2. उसी तरह **टेक्स्ट कलर** कैप्चर करें।\n3. **किसी कंट्रास्ट चेकर में जोड़ी जाँचें** — जैसे WebAIM Contrast Checker, DevTools का Accessibility पैनल, या Figma का Contrast प्लगइन।\n4. **HSL में lightness एडजस्ट करें जब तक रेश्यो पास न हो।** H और S को बनाए रखते हुए L घटाएं ताकि रंग गहरा हो बिना उसकी पहचान बदले।\n\n## कंट्रास्ट एडजस्टमेंट के लिए HSL क्यों आदर्श है\n\nRGB और HEX brightness पर सहज नियंत्रण नहीं देते। HSL hue, saturation और lightness को अलग करता है। [Color Picker Camera: HEX RGB](https://play.google.com/store/apps/details?id=com.tomas.color_picker) एक साथ HEX, RGB, HSL और CMYK दिखाता है — कोई मैन्युअल कन्वर्ज़न नहीं।\n\n## वास्तविक उदाहरण\n\nमध्यम नीले (#4A90E2) पर सफेद टेक्स्ट बटन का कंट्रास्ट लगभग 3.1:1 है — AA पास नहीं। डार्क नेवी (#1A3A6B) पर जाएं और यह 9.4:1 हो जाता है, AAA भी पार।\n\n## WCAG 3.0 और APCA के बारे में\n\nअगली पीढ़ी के दिशानिर्देश APCA पेश करते हैं — एक अधिक सूक्ष्म perceptual contrast मॉडल। WCAG 2.1 AA अभी लागू मानक है, लेकिन दीर्घकालिक प्रोजेक्ट्स के लिए APCA का परीक्षण भी उपयोगी है।\n\n**Color Picker Camera: HEX RGB को [iOS](https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) या [Android](https://play.google.com/store/apps/details?id=com.tomas.color_picker) पर मुफ़्त डाउनलोड करें** — कोई विज्ञापन नहीं, कोई ट्रैकिंग नहीं, और यह पूरी तरह ऑफ़लाइन काम करता है।",
    "html": "<h2>कंट्रास्ट क्यों महत्वपूर्ण है</h2><p>दुनिया भर में लगभग 30 करोड़ लोग किसी न किसी प्रकार के रंग-दृष्टि विकार से पीड़ित हैं। अच्छे कंट्रास्ट के साथ डिज़ाइन करना केवल सौंदर्यशास्त्र नहीं है — कई क्षेत्रों में यह कानूनी आवश्यकता भी है। संदर्भ मानक <strong>WCAG 2.1</strong> है, जो दो मुख्य स्तर परिभाषित करता है:</p><ul><li><strong>Level AA</strong>: सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट (18px या 14px बोल्ड) के लिए 3:1 कंट्रास्ट अनुपात।</li><li><strong>Level AAA</strong>: सामान्य टेक्स्ट के लिए 7:1।</li></ul><h2>सामान्य गलतियाँ</h2><p>सबसे आम समस्याएं हैं: सफेद पृष्ठभूमि पर हल्का ग्रे (1.5:1 तक हो सकता है), रंगीन बटन पर सफेद टेक्स्ट जो दृश्यमान लगता है लेकिन AA पास नहीं करता, और ऐसे रंग जो लाइट मोड में पास हों लेकिन डार्क मोड में फेल हों।</p><h2>व्यावहारिक वर्कफ़्लो</h2><ol><li><strong>बैकग्राउंड कलर कैप्चर करें।</strong> <a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">Color Picker Camera: HEX RGB</a> खोलें, कैमरा सतह पर लगाएं और एक टैप में HEX वैल्यू पाएं। ऐप HSL भी एक साथ दिखाता है।</li><li>उसी तरह <strong>टेक्स्ट कलर</strong> कैप्चर करें।</li><li><strong>किसी कंट्रास्ट चेकर में जोड़ी जाँचें</strong> — जैसे WebAIM Contrast Checker, DevTools का Accessibility पैनल, या Figma का Contrast प्लगइन।</li><li><strong>HSL में lightness एडजस्ट करें जब तक रेश्यो पास न हो।</strong> H और S को बनाए रखते हुए L घटाएं ताकि रंग गहरा हो बिना उसकी पहचान बदले।</li></ol><h2>कंट्रास्ट एडजस्टमेंट के लिए HSL क्यों आदर्श है</h2><p>RGB और HEX brightness पर सहज नियंत्रण नहीं देते। HSL hue, saturation और lightness को अलग करता है। <a href=\"https://play.google.com/store/apps/details?id=com.tomas.color_picker\">Color Picker Camera: HEX RGB</a> एक साथ HEX, RGB, HSL और CMYK दिखाता है — कोई मैन्युअल कन्वर्ज़न नहीं।</p><h2>वास्तविक उदाहरण</h2><p>मध्यम नीले (#4A90E2) पर सफेद टेक्स्ट बटन का कंट्रास्ट लगभग 3.1:1 है — AA पास नहीं। डार्क नेवी (#1A3A6B) पर जाएं और यह 9.4:1 हो जाता है, AAA भी पार।</p><h2>WCAG 3.0 और APCA के बारे में</h2><p>अगली पीढ़ी के दिशानिर्देश APCA पेश करते हैं — एक अधिक सूक्ष्म perceptual contrast मॉडल। WCAG 2.1 AA अभी लागू मानक है, लेकिन दीर्घकालिक प्रोजेक्ट्स के लिए APCA का परीक्षण भी उपयोगी है।</p><p><strong>Color Picker Camera: HEX RGB को <a href=\"https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237\">iOS</a> या <a href=\"https://play.google.com/store/apps/details?id=com.tomas.color_picker\">Android</a> पर मुफ़्त डाउनलोड करें</strong> — कोई विज्ञापन नहीं, कोई ट्रैकिंग नहीं, और यह पूरी तरह ऑफ़लाइन काम करता है।</p>"
}