High Contrast mobil ilovalarda — bu nima, accessibility va kontrast sozlamalari

High Contrast accessibility-da nima?

High Contrast — bu operatsion tizim yoki ilova oldingi plan (matn, piktogrammalar) va fon o'rtasidagi farqni oshiradigan ko'rsatish rejimi. WCAG AA standartiga ko'ra oddiy matn uchun minimal kontrast nisbati 4,5:1, katta matn uchun (18pt yoki 14pt bold) — 3:1. High Contrast rejimi nisbatni 7:1 va undan yuqoriga oshirib, maksimal farqlanishni ta'minlaydi.

Fonni oddiy qoraytirish yoki matnni yoritishdan farqli o'laroq, High Contrast kompleks ishlaydi: interfeys rang palitrasini cheklangan yuqori kontrastli ranglar to'plami bilan almashtiradi, elementlar atrofida hoshiyalar qo'shadi va yarim shaffoflikni olib tashlaydi. Rejim ko'rish o'tkirligi pasaygan, yorug'likdan qo'rqish va rang ko'rligining ba'zi shakllari bo'lgan odamlar uchun mo'ljallangan.

Uch turdagi High Contrast mavjud: tizimli (OTda yoqilgan va barcha ilovalarga ta'sir qiladi), ilovaviy (alohida ilova ichidagi o'rnatilgan rejim) va veb (CSS media funksiyasi prefers-contrast). Tizimli High Contrast eng kuchli, chunki u o'zining accessibility qo'llab-quvvatlashiga ega bo'lmagan ilovalarda ham ranglarni bekor qiladi.

Kimga High Contrast kerak

High Contrast ning asosiy foydalanuvchilari — kataraktasi (kontrast sezgirligini pasaytiruvchi linzaning xiralashishi), makula degeneratsiyasi (markaziy ko'rish yo'qolishi), glaukoma va diabetik retinopatiyasi bo'lgan odamlar. Shuningdek, rejim yorqin quyosh ostida ishlashda zarur — yuqori kontrast ekrandagi porlashni kompensatsiya qiladi. WebAIM (2025) ma'lumotlariga ko'ra, veb-sahifalarning 86% i WCAG AA dan past kontrastga ega — High Contrast foydalanuvchi tomonidan bu kamchilikni qisman tuzatadi.

iOS-da Increase Contrast: sozlamalar va kontrast turlari

iOS da Increase Contrast funksiyasi Settings > Accessibility > Display & Text Size bo'limida joylashgan bo'lib, uchta mustaqil kalitni o'z ichiga oladi: Increase Contrast (umumiy kuchaytirish), Darken Colors (yorqin ranglarni qoraytirish) va Reduce Transparency (shaffoflikni kamaytirish). Increase Contrast — matn, tugmalar va tizim elementlari chegaralariga ta'sir qiluvchi asosiy kalit.

Texnik jihatdan iOS Increase Contrast ni tintColor va UIVisualEffectView qatlami orqali amalga oshiradi. Faollashtirilganda, tizim quyuq tonlar uchun alpha qiymatini oshiradi va ochiq tonlar uchun kamaytiradi, barcha UI elementlarining kontrast nisbatini 2–3 ballga ko'taradi. Reduce Transparency yarim shaffof fonlarni (muzli shisha effekti) shaffof bo'lmagan fonlar bilan almashtiradi, bu esa loyqa fonlarda matnning o'qilishini qo'shimcha yaxshilaydi.

iOS ilovasida Increase Contrast ni tekshirish

Dasturchi Increase Contrast holatini UIAccessibility orqali tekshirishi va ranglarni moslashtirishi mumkin. Masalan, kontrast oshirilgan bo'lsa, to'yinganroq accent ranglaridan foydalanish mumkin, aks holda — standart palitra orqali 4,5:1 asosiy kontrast nisbatini ta'minlash kerak. UIAccessibility.isReduceTransparencyEnabled faol rejimda blur effektlarini o'chirish uchun ham foydalidir.

import UIKit

class ContrastManager {

    // Increase Contrast holatini tekshirish
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Reduce Transparency ni tekshirish
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Rangni kontrast rejimiga moslashtirish
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // High Contrast faol bo'lganda to'yingan ko'k
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Reduce Transparency ni hisobga olgan holda fon rangi
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Shaffof bo'lmagan fon
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // O'zgarishlarga obuna bo'lish
    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
        )
    }
}

// Foydalanish misoli: 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 sinfi isDarkerSystemColorsEnabled orqali Increase Contrast holatiga kirishni ta'minlaydi, faol rejimda accent rangini moslashtiradi, navigationBar ning yarim shaffofligini o'chiradi va kontrast o'zgarishi haqidagi tizim bildirishnomalariga obuna bo'ladi. UIKit UIAccessibility holati o'zgarganda elementlarni avtomatik ravishda qayta chizadi.

iOS dinamik ranglari (UIColor Well) va kontrast

iOS Increase Contrast rejimiga avtomatik moslashadigan dinamik UIColor ranglarini (systemBackground, label, secondaryLabel) taqdim etadi. Increase Contrast faollashtirilganda, tizim ranglari o'z qiymatlarini o'zgartiradi: label quyuqroq (yoki qorong'i temada ochiqroq) bo'ladi, background yarim shaffofligini yo'qotadi. Dasturchiga tizim kontrasti bilan ziddiyat yaratmaslik uchun barcha UI elementlari uchun dinamik ranglardan foydalanish tavsiya etiladi.

Android-da High Contrast Text: qorong'i tema va kontrast

Android da High Contrast Text (Yuqori kontrastli matn) funksiyasi iOS dan farqli ishlaydi. Kontrast nisbatini silliq oshirish o'rniga, Android teskari rang sxemasini qo'llaydi: qorong'i fon va oq matn kengaytirilgan qalinlik bilan. Rejim AMOLED displeylarda ayniqsa samarali, bu erda qora rang maksimal kontrast beradi. Sozlama Sozlamalar > Maxsus imkoniyatlar > Ko'rinishni yaxshilash bo'limida joylashgan.

Android High Contrast Text ikkita mexanizmdan foydalanadi: theme overlay orqali rang palitrasini bekor qilish va bitmap tasvirlar kontrastini oshirish uchun ColorMatrix ni qo'llash. Tizim ilovaning joriy temasini (Light/Dark) tahlil qiladi va maksimal kontrastli overlay ni qo'llaydi: qora fonda (#000000) oq oldingi plan (#FFFFFF). Yarim shaffof elementlar shaffof bo'lmagan asos oladi.

Android API orqali High Contrast Text ni tekshirish

High Contrast Text holatini tekshirish uchun Android da AccessibilityManager va ContentResolver ishlatiladi. API rejim faol yoki yo'qligini aniqlash va UI ni moslashtirish imkonini beradi. Jetpack Compose CompositionLocalProvider va LocalContrast orqali moslashishni qo'llab-quvvatlaydi.

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 orqali tekshirish
    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" }
    }

    // Global sozlamalar orqali tekshirish
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — kontrastni hisobga olgan holda ranglar
    @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 tizimi: dinamik rang tanlovchisi
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 sinfi High Contrast faolligini AccessibilityManager va tizim sozlamalari orqali tekshiradi, Jetpack Compose da ranglarni moslashtiradi va View tizimi uchun maxsus ContrastTextView ni taqdim etadi. Android da, iOS dan farqli o'laroq, High Contrast o'zgarishi uchun to'g'ridan-to'g'ri bildirishnoma mavjud emas — dinamik yangilash uchun Settings.System da ContentObserver majburiydir.

Material Design 3 va High Contrast

Material Design 3 (Material You) Dynamic Color orqali High Contrast uchun o'rnatilgan qo'llab-quvvatlashni o'z ichiga oladi. Faol tizim rejimida Material 3 avtomatik ravishda maksimal tonal palitrani tanlaydi: background = Neutral0, onBackground = Neutral100, primary = Primary100. Dasturchiga faqat MD3 komponentlaridan foydalanish kifoya — tizim kontrast moslashuvini o'z zimmasiga oladi.

WCAG contrast ratio: 4,5:1 va 3:1 standartlari

WCAG contrast ratio — matnning mavjudligini baholash uchun ishlatiladigan ikki rang o'rtasidagi yorqinlikning matematik nisbati. Standart ikkita chegarani belgilaydi: oddiy matn uchun 4,5:1 (AA darajasi) va katta matn uchun 3:1 (18px/14px bold). AAA darajasi uchun oddiy matn uchun 7:1 va katta matn uchun 4,5:1 talab qilinadi. High Contrast rejimi ideal holda 7:1 va undan yuqorini ta'minlashi kerak.

Contrast ratio hisoblash formula bo'yicha amalga oshiriladi: (L1 + 0,05) / (L2 + 0,05), bu erda L1 — ochiq rangning nisbiy yorqinligi, L2 — quyuq rangning nisbiy yorqinligi. Nisbiy yorqinlik sRGB kanallaridan og'irliklar bilan hisoblanadi: 0,2126R + 0,7152G + 0,0722B. Accessibility dasturchisi uchun asboblardan foydalanish kifoya: WebAIM Contrast Checker, Color Contrast Analyser yoki Xcode da Accessibility Inspector.

WCAG 2.2 kontrast chegaralari jadvali

Kodda kontrastni tekshirish

Veb-ilovada contrast ratio ni avtomatik tekshirish uchun JavaScript dan foydalanish mumkin. Faol High Contrast rejimida AA standartiga mos kelmaydigan elementlarni ajratib ko'rsatish maqsadga muvofiq. Quyida JavaScript da nisbiy yorqinlik va contrast ratio hisoblash misoli keltirilgan.

// WCAG 2.2 bo'yicha contrast ratio hisoblash
class ContrastChecker {

    // sRGB ni chiziqli fazoga o'tkazish
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Nisbiy yorqinlik (relative luminance)
    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
    }

    // Ikki rang o'rtasidagi contrast ratio
    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 darajasini tekshirish (4,5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // AAA darajasini tekshirish (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// Foydalanish
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 dagi ContrastChecker sinfi WCAG 2.2 bo'yicha contrast ratio ni to'liq hisoblashni amalga oshiradi: sRGB ni chiziqli fazoga o'tkazish, Rec.709 og'irliklari bilan nisbiy yorqinlikni hisoblash va AA/AAA chegaralari bilan solishtirish. Asbob High Contrast qo'llab-quvvatlovchi veb-ilovalarni ishlab chiqishda rang palitrasini avtomatik audit qilish uchun foydalidir.

Asboblar bilan kontrast auditi

Tayyor ilovada contrast ratio ni tekshirish uchun Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) yoki axe DevTools (veb) dan foydalaning. Ushbu asboblar avtomatik ravishda WCAG AA dan past kontrastga ega elementlarni topadi va ajratib ko'rsatadi. High Contrast rejimi audit paytida yoqilgan bo'lishi kerak — bu tizim kontrastini oshirish 7:1 ga erishish uchun yetarli yoki yo'qligini ko'rsatadi.

CSS prefers-contrast: veb-sahifalarni tizim kontrastiga moslashtirish

CSS media funksiyasi prefers-contrast veb-sahifalarga foydalanuvchining tizim kontrast sozlamasiga qarab stillarni moslashtirish imkonini beradi. Funksiya quyidagi qiymatlarni qabul qiladi: no-preference (standart), more (foydalanuvchi High Contrast ni yoqdi), less (foydalanuvchi past kontrastni afzal ko'radi) va custom (aniq sozlama). 2022 yildan boshlab barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi.

prefers-contrast: more — veb dasturchi uchun signal: matn kontrast nisbatini oshirish, yarim shaffof fonlarni shaffof bo'lmagan fonlar bilan almashtirish, interaktiv elementlar chegaralarini kuchaytirish va past kontrastli fon tasvirlarini olib tashlash. iOS Safari va Android Chrome tizim High Contrast rejimi (Increase Contrast / High Contrast Text) yoqilganda more qiymatini uzatadi.

prefers-contrast orqali moslashish misoli

prefers-contrast: more da veb-sahifa ranglar sonini minimallashtirishi va urg'ular uchun oq-qora palitrani accent ranglari bilan afzal ko'rishi kerak. Quyida ranglarni almashtirish, yarim shaffoflikni o'chirish va chegaralarni oshirish bilan CSS moslashuvi misoli keltirilgan.

/* Asosiy stillar (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;
}

/* Yuqori kontrast: 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 edi — endi qora
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // 0,4 edi — kuchaytirdik
    }
}

/* Past kontrast: 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 misolida prefers-contrast: more da karta shaffof bo'lmagan oq fon, 2px qora chegara oladi, matn qora bo'ladi (#000 o'rniga #333), tugma — ko'rinish uchun qora hoshiyali to'q ko'k rangda. prefers-contrast: less (noyob hol — foydalanuvchi yumshoq ranglarni afzal ko'radi) da kontrast aksincha kamayadi.

prefers-color-scheme bilan birlashtirish

To'liq accessibility moslashuvi uchun prefers-contrast prefers-color-scheme (ochiq/qorong'i tema) bilan birlashtiriladi. prefers-color-scheme: dark va prefers-contrast: more da ranglar yorqin urg'ular bilan qora ustida oq bo'lishi kerak. Ochiq temada — oq ustida qora. Ushbu media funksiyalarining kombinatsiyasi to'liq accessibility qamrovi uchun sinovdan o'tkazilishi kerak bo'lgan 4 ta kombinatsiyani beradi.