मोबाइल ऐप्स में हाई कंट्रास्ट — यह क्या है, एक्सेसिबिलिटी और कंट्रास्ट सेटिंग्स

एक्सेसिबिलिटी में हाई कंट्रास्ट क्या है?

High Contrast एक डिस्प्ले मोड है जिसमें ऑपरेटिंग सिस्टम या एप्लिकेशन अग्रभूमि रंग (टेक्स्ट, आइकन) और पृष्ठभूमि के बीच अंतर बढ़ाता है। WCAG AA मानक के अनुसार सामान्य टेक्स्ट के लिए न्यूनतम कंट्रास्ट अनुपात 4.5:1 है, और बड़े टेक्स्ट (18pt या 14pt बोल्ड से) के लिए — 3:1 है। हाई कंट्रास्ट मोड अनुपात को 7:1 और उससे अधिक तक बढ़ा सकता है, जो अधिकतम पठनीयता सुनिश्चित करता है।

पृष्ठभूमि को गहरा करने या टेक्स्ट को हल्का करने के विपरीत, High Contrast व्यापक रूप से काम करता है: यह इंटरफ़ेस रंग पैलेट को उच्च कंट्रास्ट रंगों के एक सीमित सेट से बदल देता है, तत्वों के चारों ओर रूपरेखा जोड़ता है और पारदर्शिता हटाता है। यह मोड कम दृश्य तीक्ष्णता, फोटोफोबिया और रंग अंधता के कुछ रूपों वाले लोगों के लिए डिज़ाइन किया गया है।

तीन प्रकार के हाई कंट्रास्ट हैं: सिस्टम-स्तर (OS में सक्षम और सभी एप्लिकेशन को प्रभावित करता है), इन-ऐप (एक विशिष्ट एप्लिकेशन के भीतर अंतर्निहित मोड) और वेब मोड (CSS मीडिया फ़ीचर prefers-contrast)। सिस्टम-स्तर का हाई कंट्रास्ट सबसे शक्तिशाली है, क्योंकि यह उन एप्लिकेशन में भी रंगों को ओवरराइड करता है जिनके पास अपना एक्सेसिबिलिटी समर्थन नहीं है।

हाई कंट्रास्ट की आवश्यकता किसे है

हाई कंट्रास्ट के मुख्य उपयोगकर्ता मोतियाबिंद (लेंस का धुंधलापन जो कंट्रास्ट संवेदनशीलता को कम करता है), मैक्यूलर डीजनरेशन (केंद्रीय दृष्टि की हानि), ग्लूकोमा और डायबिटिक रेटिनोपैथी वाले लोग हैं। तेज धूप में काम करते समय भी यह मोड आवश्यक है — उच्च कंट्रास्ट स्क्रीन की चकाचौंध की भरपाई करता है। WebAIM (2025) के अनुसार, 86% वेब पेजों में WCAG AA से कम कंट्रास्ट वाला टेक्स्ट है — उपयोगकर्ता की ओर से हाई कंट्रास्ट इस दोष को आंशिक रूप से ठीक करता है।

iOS में Increase Contrast: सेटिंग्स और कंट्रास्ट के प्रकार

iOS में, Increase Contrast फीचर Settings > Accessibility > Display & Text Size में स्थित है और इसमें तीन स्वतंत्र स्विच शामिल हैं: Increase Contrast (सामान्य वृद्धि), Darken Colors (चमकीले रंगों को गहरा करना) और Reduce Transparency (पारदर्शिता कम करना)। Increase Contrast मुख्य स्विच है, जो सिस्टम तत्वों के टेक्स्ट, बटन और बॉर्डर को प्रभावित करता है।

तकनीकी रूप से, iOS Increase Contrast को tintColor और UIVisualEffectView लेयर के माध्यम से लागू करता है। सक्रिय होने पर, सिस्टम गहरे रंगों के लिए अल्फा मान बढ़ाता है और हल्के रंगों के लिए घटाता है, सभी UI तत्वों के कंट्रास्ट अनुपात को 2–3 अंक तक बढ़ाता है। Reduce Transparency अर्ध-पारदर्शी पृष्ठभूमि (फ्रॉस्टेड ग्लास प्रभाव) को अपारदर्शी से बदल देता है, जो धुंधली पृष्ठभूमि पर टेक्स्ट पठनीयता को और बेहतर बनाता है।

iOS ऐप में Increase Contrast की जाँच करना

एक डेवलपर UIAccessibility के माध्यम से Increase Contrast की स्थिति की जाँच कर सकता है और तदनुसार रंगों को अनुकूलित कर सकता है। उदाहरण के लिए, यदि कंट्रास्ट बढ़ा हुआ है, तो अधिक संतृप्त एक्सेंट रंगों का उपयोग किया जा सकता है, और यदि नहीं, तो डिफ़ॉल्ट पैलेट के माध्यम से 4.5:1 का आधार कंट्रास्ट अनुपात सुनिश्चित किया जाना चाहिए। UIAccessibility.isReduceTransparencyEnabled मोड सक्रिय होने पर ब्लर प्रभावों को अक्षम करने के लिए भी उपयोगी है।

import UIKit

class ContrastManager {

    // Increase Contrast स्थिति की जाँच करना
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Reduce Transparency जाँच करना
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // कंट्रास्ट मोड के लिए रंग अनुकूलित करना
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // हाई कंट्रास्ट सक्रिय होने पर अधिक संतृप्त नीला
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Reduce Transparency को ध्यान में रखते हुए पृष्ठभूमि रंग
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // अपारदर्शी पृष्ठभूमि
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // परिवर्तनों की सदस्यता लेना
    static func observeChanges(observer: Any, selector: Selector) {
        NotificationCenter.default.addObserver(
            observer,
            selector: selector,
            name: UIAccessibility.darkerSystemColorsStatusDidChangeNotification,
            object: nil
        )
        NotificationCenter.default.addObserver(
            observer,
            selector: selector,
            name: UIAccessibility.reduceTransparencyStatusDidChangeNotification,
            object: nil
        )
    }
}

// उपयोग उदाहरण: UINavigationBar
func applyContrastToNavigationBar(_ navBar: UINavigationBar) {
    if ContrastManager.isIncreaseContrastEnabled {
        navBar.isTranslucent = false
        navBar.barTintColor = ContrastManager.backgroundColor()
        navBar.titleTextAttributes = [
            .foregroundColor: UIColor.label,
            .font: UIFont.boldSystemFont(ofSize: 18)
        ]
    }
}

ContrastManager क्लास isDarkerSystemColorsEnabled के माध्यम से Increase Contrast स्थिति तक पहुंच प्रदान करता है, मोड सक्रिय होने पर एक्सेंट रंग को अनुकूलित करता है, navigationBar पारदर्शिता अक्षम करता है और कंट्रास्ट परिवर्तनों के बारे में सिस्टम सूचनाओं की सदस्यता लेता है। UIKit UIAccessibility स्थिति बदलने पर स्वचालित रूप से तत्वों को फिर से रेंडर करता है।

डायनामिक iOS रंग (UIColor Well) और कंट्रास्ट

iOS डायनामिक UIColor रंग (systemBackground, label, secondaryLabel) प्रदान करता है जो स्वचालित रूप से Increase Contrast मोड के अनुकूल होते हैं। Increase Contrast सक्रिय होने पर, सिस्टम रंग अपने मान बदलते हैं: label गहरा हो जाता है (या डार्क मोड में हल्का), पृष्ठभूमि पारदर्शिता खो देती है। डेवलपर्स को सिस्टम कंट्रास्ट के साथ विरोध से बचने के लिए सभी UI तत्वों के लिए डायनामिक रंगों का उपयोग करने की सलाह दी जाती है।

Android में High Contrast Text: डार्क थीम और कंट्रास्ट

Android में, High Contrast Text फीचर iOS से अलग तरीके से काम करता है। कंट्रास्ट अनुपात को सुचारू रूप से बढ़ाने के बजाय, Android एक उलटी रंग योजना लागू करता है: गहरी पृष्ठभूमि और बढ़ी हुई बोल्डनेस के साथ सफेद टेक्स्ट। यह मोड विशेष रूप से AMOLED डिस्प्ले पर प्रभावी है, जहां काला रंग अधिकतम कंट्रास्ट प्रदान करता है। सेटिंग सेटिंग्स > एक्सेसिबिलिटी > दृश्यता संवर्द्धन में स्थित है।

Android High Contrast Text दो तंत्रों का उपयोग करता है: थीम ओवरले के माध्यम से रंग पैलेट को ओवरराइड करना और बिटमैप छवियों के कंट्रास्ट को बढ़ाने के लिए ColorMatrix लागू करना। सिस्टम वर्तमान एप्लिकेशन थीम (लाइट/डार्क) का विश्लेषण करता है और अधिकतम कंट्रास्ट के साथ ओवरले लागू करता है: काली पृष्ठभूमि (#000000) पर सफेद अग्रभूमि (#FFFFFF)। अर्ध-पारदर्शी तत्वों को एक अपारदर्शी पृष्ठभूमि मिलती है।

Android API के माध्यम से High Contrast Text की जाँच करना

Android में High Contrast Text की स्थिति की जाँच करने के लिए, AccessibilityManager और ContentResolver का उपयोग किया जाता है। API यह निर्धारित करने की अनुमति देता है कि मोड सक्रिय है या नहीं और UI को अनुकूलित करता है। Jetpack Compose CompositionLocalProvider और LocalContrast के माध्यम से अनुकूलन का समर्थन करता है।

import android.accessibilityservice.AccessibilityService
import android.content.Context
import android.provider.Settings
import android.view.accessibility.AccessibilityManager
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

class HighContrastHelper {

    // AccessibilityManager के माध्यम से जाँच
    fun isHighContrastTextEnabled(context: Context): Boolean {
        val am = context.getSystemService(
            Context.ACCESSIBILITY_SERVICE
        ) as AccessibilityManager
        return am.isEnabled && am.getEnabledAccessibilityServiceList(
            AccessibilityService.FEEDBACK_ALL_MASK
        ).any { it.resolveInfo.serviceInfo.packageName ==
            "com.android.server.accessibility" }
    }

    // ग्लोबल सेटिंग्स के माध्यम से जाँच
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — कंट्रास्ट को ध्यान में रखते हुए रंग
    @Composable
    fun contrastAwareColors(): Pair<Color, Color> {
        val context = androidx.compose.ui.platform.LocalContext.current
        return if (isHighContrastTextEnabled(context)) {
            Color.White to Color.Black
        } else {
            Color.Black to Color.White
        }
    }
}

// View सिस्टम: डायनामिक रंग चयनकर्ता
class ContrastTextView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : AppCompatTextView(context, attrs) {

    private val helper = HighContrastHelper()

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        if (helper.isHighContrastTextEnabled(context)) {
            setTextColor(Color.WHITE)
            setBackgroundColor(Color.BLACK)
            setTypeface(getTypeface(), Typeface.BOLD)
        }
    }
}

HighContrastHelper क्लास AccessibilityManager और सिस्टम सेटिंग्स के माध्यम से High Contrast की सक्रियता की जाँच करता है, Jetpack Compose में रंगों को अनुकूलित करता है और View सिस्टम के लिए एक कस्टम ContrastTextView प्रदान करता है। Android में, iOS के विपरीत, High Contrast परिवर्तनों के लिए कोई सीधी अधिसूचना नहीं है — गतिशील अद्यतन के लिए Settings.System पर ContentObserver आवश्यक है।

Material Design 3 और हाई कंट्रास्ट

Material Design 3 (Material You) में Dynamic Color के माध्यम से अंतर्निहित हाई कंट्रास्ट समर्थन शामिल है। जब सिस्टम मोड सक्रिय होता है, तो Material 3 स्वचालित रूप से अधिकतम टोनल पैलेट चुनता है: background = Neutral0, onBackground = Neutral100, primary = Primary100। डेवलपर्स को केवल MD3 घटकों का उपयोग करने की आवश्यकता है — सिस्टम स्वचालित रूप से कंट्रास्ट अनुकूलन संभालता है।

WCAG कंट्रास्ट अनुपात: 4.5:1 और 3:1 मानक

WCAG कंट्रास्ट अनुपात दो रंगों के बीच ल्यूमिनेंस का एक गणितीय अनुपात है, जिसका उपयोग टेक्स्ट एक्सेसिबिलिटी का आकलन करने के लिए किया जाता है। मानक दो सीमाएँ परिभाषित करता है: सामान्य टेक्स्ट के लिए 4.5:1 (AA स्तर) और बड़े टेक्स्ट (18px/14px बोल्ड से) के लिए 3:1। AAA स्तर के लिए, सामान्य टेक्स्ट के लिए 7:1 और बड़े टेक्स्ट के लिए 4.5:1 आवश्यक है। हाई कंट्रास्ट मोड को आदर्श रूप से 7:1 और उससे अधिक प्रदान करना चाहिए।

कंट्रास्ट अनुपात की गणना सूत्र का उपयोग करके की जाती है: (L1 + 0.05) / (L2 + 0.05), जहाँ L1 हल्के रंग की सापेक्ष ल्यूमिनेंस है और L2 गहरे रंग की सापेक्ष ल्यूमिनेंस है। सापेक्ष ल्यूमिनेंस की गणना sRGB चैनलों से भार के साथ की जाती है: 0.2126R + 0.7152G + 0.0722B। एक्सेसिबिलिटी डेवलपर्स के लिए, WebAIM Contrast Checker, Color Contrast Analyser या Xcode में Accessibility Inspector जैसे उपकरणों का उपयोग करना पर्याप्त है।

WCAG 2.2 कंट्रास्ट सीमा तालिका

कोड में कंट्रास्ट की जाँच करना

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

// WCAG 2.2 के अनुसार कंट्रास्ट अनुपात की गणना
class ContrastChecker {

    // sRGB को रैखिक स्थान में परिवर्तित करना
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // सापेक्ष ल्यूमिनेंस
    relativeLuminance(r, g, b) {
        const R = this.linearize(r)
        const G = this.linearize(g)
        const B = this.linearize(b)
        return 0.2126 * R + 0.7152 * G + 0.0722 * B
    }

    // दो रंगों के बीच कंट्रास्ट अनुपात
    getContrastRatio(hex1, hex2) {
        const rgb1 = this.hexToRgb(hex1)
        const rgb2 = this.hexToRgb(hex2)
        const L1 = this.relativeLuminance(rgb1.r, rgb1.g, rgb1.b)
        const L2 = this.relativeLuminance(rgb2.r, rgb2.g, rgb2.b)
        const lighter = Math.max(L1, L2)
        const darker = Math.min(L1, L2)
        return (lighter + 0.05) / (darker + 0.05)
    }

    hexToRgb(hex) {
        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16),
        } : null
    }

    // AA स्तर (4.5:1) की जाँच
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // AAA स्तर (7:1) की जाँच
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// उपयोग
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → 13.2:1 (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (2.8:1)

JavaScript में ContrastChecker क्लास WCAG 2.2 के अनुसार पूर्ण कंट्रास्ट अनुपात गणना लागू करता है: sRGB को रैखिक स्थान में परिवर्तित करना, Rec.709 भार के साथ सापेक्ष ल्यूमिनेंस की गणना करना और AA/AAA सीमाओं के विरुद्ध तुलना करना। यह उपकरण हाई कंट्रास्ट समर्थन वाले वेब एप्लिकेशन विकसित करते समय स्वचालित रंग पैलेट ऑडिट के लिए उपयोगी है।

कंट्रास्ट ऑडिटिंग उपकरण

तैयार एप्लिकेशन में कंट्रास्ट अनुपात की जाँच करने के लिए, Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) या axe DevTools (वेब) का उपयोग करें। ये उपकरण स्वचालित रूप से WCAG AA से कम कंट्रास्ट वाले तत्वों को ढूंढते हैं और उन्हें हाइलाइट करते हैं। ऑडिट के दौरान हाई कंट्रास्ट मोड सक्षम होना चाहिए — यह दिखाएगा कि क्या 7:1 प्राप्त करने के लिए सिस्टम का कंट्रास्ट संवर्द्धन पर्याप्त है।

CSS prefers-contrast: वेब पेजों को सिस्टम कंट्रास्ट के अनुकूल बनाना

CSS मीडिया फ़ीचर prefers-contrast वेब पेजों को उपयोगकर्ता की सिस्टम कंट्रास्ट सेटिंग के आधार पर शैलियों को अनुकूलित करने की अनुमति देता है। फ़ीचर निम्न मान स्वीकार करता है: no-preference (डिफ़ॉल्ट), more (उपयोगकर्ता ने हाई कंट्रास्ट सक्षम किया है), less (उपयोगकर्ता कम कंट्रास्ट पसंद करता है) और custom (फाइन-ट्यूनिंग)। यह 2022 से सभी आधुनिक ब्राउज़रों द्वारा समर्थित है।

prefers-contrast: more — वेब डेवलपर के लिए एक संकेत: टेक्स्ट कंट्रास्ट अनुपात बढ़ाएँ, अर्ध-पारदर्शी पृष्ठभूमि को अपारदर्शी से बदलें, इंटरैक्टिव तत्व सीमाओं को बढ़ाएँ और कम कंट्रास्ट वाली पृष्ठभूमि छवियों को हटाएँ। iOS Safari और Android Chrome सिस्टम हाई कंट्रास्ट मोड (Increase Contrast / High Contrast Text) चालू होने पर more मान भेजते हैं।

prefers-contrast का उपयोग करके अनुकूलन उदाहरण

जब prefers-contrast: more सक्रिय होता है, तो वेब पेज को रंगों की संख्या को कम करना चाहिए और हाइलाइट्स के लिए एक्सेंट रंगों के साथ काले-सफेद पैलेट को प्राथमिकता देनी चाहिए। नीचे रंग प्रतिस्थापन, पारदर्शिता हटाने और सीमा संवर्द्धन के साथ CSS अनुकूलन का एक उदाहरण दिया गया है।

/* आधार शैलियाँ (no-preference) */
.card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.button {
    background: #0066CC;
    color: #FFFFFF;
    border: none;
    padding: 12px 24px;
}

/* उच्च कंट्रास्ट: more */
@media (prefers-contrast: more) {
    .card {
        background: #FFFFFF;
        border: 2px solid #000000;
        color: #000000;
        box-shadow: none;
    }

    .button {
        background: #004499;
        outline: 2px solid #000000;
        outline-offset: 2px;
    }

    .muted-text {
        color: #000000; // था #666 — अब काला
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // था 0.4 — बढ़ाया गया
    }
}

/* कम कंट्रास्ट: less */
@media (prefers-contrast: less) {
    .card {
        border: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }
}

CSS उदाहरण में prefers-contrast: more के तहत, कार्ड को एक अपारदर्शी सफेद पृष्ठभूमि, 2px काली सीमा मिलती है, टेक्स्ट काला हो जाता है (#000, #333 के बजाय), और बटन दृश्यता के लिए काले रूपरेखा के साथ गहरा नीला हो जाता है। prefers-contrast: less (एक दुर्लभ मामला — उपयोगकर्ता नरम रंग पसंद करता है) के तहत, इसके बजाय कंट्रास्ट कम हो जाता है।

prefers-color-scheme के साथ संयोजन

पूर्ण एक्सेसिबिलिटी अनुकूलन के लिए, prefers-contrast को prefers-color-scheme (लाइट/डार्क थीम) के साथ जोड़ा जाता है। जब prefers-color-scheme: dark और prefers-contrast: more दोनों सक्रिय होते हैं, तो रंग चमकीले एक्सेंट के साथ काले पर सफेद होने चाहिए। लाइट मोड में — सफेद पर काला। इन मीडिया फ़ीचर के संयोजन से 4 संयोजन मिलते हैं जिन्हें पूर्ण एक्सेसिबिलिटी कवरेज के लिए परीक्षण किया जाना चाहिए।