موبائل ایپس میں High Contrast — یہ کیا ہے، رسائی اور کنٹراسٹ سیٹنگز

رسائی میں High Contrast کیا ہے؟

High Contrast ایک ڈسپلے موڈ ہے جس میں آپریٹنگ سسٹم یا ایپلیکیشن پیش منظر کے رنگ (ٹیکسٹ، آئیکن) اور پس منظر کے درمیان فرق بڑھاتا ہے۔ WCAG AA معیار کے مطابق عام ٹیکسٹ کے لیے کم از کم کنٹراسٹ تناسب 4.5:1 ہے، اور بڑے ٹیکسٹ (18pt یا 14pt بولڈ سے) کے لیے — 3:1 ہے۔ ہائی کنٹراسٹ موڈ تناسب کو 7:1 اور اس سے زیادہ بڑھا سکتا ہے، زیادہ سے زیادہ پڑھنے کی اہلیت کو یقینی بناتا ہے۔

صرف پس منظر کو گہرا کرنے یا ٹیکسٹ کو ہلکا کرنے کے برعکس، High Contrast جامع طور پر کام کرتا ہے: یہ انٹرفیس کے رنگ پیلیٹ کو محدود ہائی کنٹراسٹ رنگوں کے سیٹ سے بدل دیتا ہے، عناصر کے ارد گرد آؤٹ لائن شامل کرتا ہے اور شفافیت کو ہٹاتا ہے۔ یہ موڈ کم بصری تیزی، فوٹو فوبیا اور رنگ اندھے پن کی کچھ شکلوں والے لوگوں کے لیے ڈیزائن کیا گیا ہے۔

تین اقسام کے High Contrast ہیں: سسٹم لیول (OS میں فعال اور تمام ایپلیکیشنز کو متاثر کرتا ہے)، ایپ میں (ایک مخصوص ایپلیکیشن کے اندر بلٹ ان موڈ) اور ویب موڈ (CSS میڈیا فیچر prefers-contrast)۔ سسٹم لیول کا High Contrast سب سے طاقتور ہے کیونکہ یہ ان ایپلیکیشنز میں بھی رنگوں کو اوور رائڈ کرتا ہے جن کی اپنی رسائی کی حمایت نہیں ہے۔

High Contrast کسے ضرورت ہے؟

High Contrast کے اہم صارفین موتیا (عدسے کا دھندلاپن جو کنٹراسٹ حساسیت کو کم کرتا ہے)، میکولر ڈیجنریشن (مرکزی بصارت کا نقصان)، گلوکوما اور ذیابیطس ریٹینوپیتھی والے لوگ ہیں۔ تیز دھوپ میں کام کرتے وقت بھی یہ موڈ ضروری ہے — اعلی کنٹراسٹ اسکرین کی چکاچوند کو پورا کرتا ہے۔ WebAIM (2025) کے مطابق، 86% ویب پیجز میں WCAG AA سے کم کنٹراسٹ والا ٹیکسٹ ہوتا ہے — صارف کی طرف سے High Contrast اس خرابی کو جزوی طور پر درست کرتا ہے۔

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
        }
        // High Contrast فعال ہونے پر زیادہ سنترپت نیلا
        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 اور High Contrast

Material Design 3 (Material You) میں Dynamic Color کے ذریعے بلٹ ان High Contrast سپورٹ شامل ہے۔ جب سسٹم موڈ فعال ہوتا ہے، 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 درکار ہے۔ High Contrast موڈ کو مثالی طور پر 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 استعمال کیا جا سکتا ہے۔ جب High Contrast موڈ فعال ہو، تو 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 حدود سے موازنہ۔ یہ ٹول High Contrast سپورٹ کے ساتھ ویب ایپلیکیشنز تیار کرتے وقت خودکار رنگ پیلیٹ آڈٹ کے لیے مفید ہے۔

کنٹراسٹ آڈیٹنگ ٹولز

تیار ایپلیکیشن میں کنٹراسٹ تناسب جانچنے کے لیے، Accessibility Scanner (Android)، Xcode Accessibility Inspector (iOS) یا axe DevTools (ویب) استعمال کریں۔ یہ ٹولز خود بخود WCAG AA سے کم کنٹراسٹ والے عناصر کو ڈھونڈتے ہیں اور انہیں نمایاں کرتے ہیں۔ آڈٹ کے دوران High Contrast موڈ کو فعال ہونا چاہیے — یہ دکھائے گا کہ آیا 7:1 حاصل کرنے کے لیے سسٹم کا کنٹراسٹ بڑھانا کافی ہے۔

CSS prefers-contrast: ویب پیجز کو سسٹم کنٹراسٹ کے مطابق ڈھالنا

CSS میڈیا فیچر prefers-contrast ویب پیجز کو صارف کی سسٹم کنٹراسٹ سیٹنگ کے مطابق اسٹائل ڈھالنے کی اجازت دیتا ہے۔ فیچر اقدار قبول کرتا ہے: no-preference (ڈیفالٹ)، more (صارف نے High Contrast فعال کیا)، less (صارف کم کنٹراسٹ ترجیح دیتا ہے) اور custom (باریک ترتیب)۔ 2022 سے تمام جدید براؤزرز کے ذریعے تعاون یافتہ ہے۔

prefers-contrast: more — ویب ڈیولپر کے لیے ایک اشارہ: ٹیکسٹ کنٹراسٹ تناسب بڑھائیں، نیم شفاف پس منظر کو غیر شفاف سے بدلیں، تعاملی عناصر کی حدود کو مضبوط کریں اور کم کنٹراسٹ والی پس منظر کی تصاویر ہٹائیں۔ iOS Safari اور Android Chrome سسٹم High Contrast موڈ (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 سیاہ بارڈر ملتا ہے، ٹیکسٹ سیاہ ہو جاتا ہے (#333 کے بجائے #000)، اور بٹن مرئیت کے لیے سیاہ آؤٹ لائن کے ساتھ گہرا نیلا ہو جاتا ہے۔ prefers-contrast: less (ایک نایاب صورت — صارف نرم رنگ پسند کرتا ہے) کے تحت، اس کے بجائے کنٹراسٹ کم ہو جاتا ہے۔

prefers-color-scheme کے ساتھ امتزاج

مکمل رسائی ڈھالنے کے لیے، prefers-contrast کو prefers-color-scheme (لائٹ/ڈارک تھیم) کے ساتھ ملایا جاتا ہے۔ جب prefers-color-scheme: dark اور prefers-contrast: more دونوں فعال ہوں، تو رنگ روشن ایکسینٹ کے ساتھ سیاہ پر سفید ہونے چاہئیں۔ لائٹ موڈ میں — سفید پر سیاہ۔ ان میڈیا فیچرز کا امتزاج 4 امتزاجات دیتا ہے جنہیں مکمل رسائی کوریج کے لیے جانچنا ضروری ہے۔