High Contrast mobil tətbiqlərdə — bu nədir, accessibility və kontrast parametrləri

High Contrast accessibility-də nədir?

High Contrast — əməliyyat sisteminin və ya tətbiqin ön plan (mətn, ikonlar) və fon arasındakı fərqi artırdığı göstərim rejimidir. WCAG AA standartına görə adi mətn üçün minimum kontrast nisbəti 4,5:1, böyük mətn üçün (18pt və ya 14pt bold) — 3:1 təşkil edir. High Contrast rejimi nisbəti 7:1 və daha yuxarı qaldıraraq maksimum oxunaqlılığı təmin edə bilər.

Sadə fon qaraldılması və ya mətn işıqlandırılmasından fərqli olaraq, High Contrast kompleks şəkildə işləyir: interfeys rəng palitrasını məhdud yüksək kontrastlı rənglər dəsti ilə əvəz edir, elementlər ətrafında haşiyələr əlavə edir və yarı şəffaflığı aradan qaldırır. Rejim aşağı görmə kəskinliyi, işıq qorxusu və bəzi rəng korluğu formaları olan insanlar üçün nəzərdə tutulub.

Üç növ High Contrast mövcuddur: sistem (OS-də aktivdir və bütün tətbiqlərə təsir edir), tətbiq (ayrıca tətbiq daxilində quraşdırılmış rejim) və veb (CSS media funksiyası prefers-contrast). Sistem High Contrast ən güclüdür, çünki öz accessibility dəstəyi olmayan tətbiqlərdə belə rəngləri ləğv edir.

Kim High Contrast-a ehtiyac duyur

High Contrast-ın əsas istifadəçiləri — kataraktası (kontrast həssaslığını azaldan linzanın bulanıqlaşması), makula degenerasiyası (mərkəzi görmə itkisi), qlaukoma və diabetik retinopatiyası olan insanlar. Rejim həmçinin parlaq günəş altında işləyərkən lazımdır — yüksək kontrast ekrandakı parıltını kompensasiya edir. WebAIM (2025) məlumatına görə, veb səhifələrin 86%-i WCAG AA-dan aşağı kontrasta malikdir — High Contrast istifadəçi tərəfindən bu qüsuru qismən düzəldir.

iOS-da Increase Contrast: parametrlər və kontrast növləri

iOS-da Increase Contrast funksiyası Settings > Accessibility > Display & Text Size bölməsində yerləşir və üç müstəqil keçid daxildir: Increase Contrast (ümumi gücləndirmə), Darken Colors (parlaq rənglərin qaraldılması) və Reduce Transparency (şəffaflığın azaldılması). Increase Contrast — mətnə, düymələrə və sistem elementlərinin haşiyələrinə təsir edən əsas keçiddir.

Texniki olaraq iOS Increase Contrast-ı tintColor və UIVisualEffectView təbəqəsi vasitəsilə həyata keçirir. Aktivləşdirildikdə sistem tünd tonlar üçün alpha dəyərini artırır, açıq tonlar üçün azaldır, bütün UI elementlərinin kontrast nisbətini 2–3 bənd qaldırır. Reduce Transparency yarı şəffaf fonları (buzlu şüşə effekti) qeyri-şəffaf fonlarla əvəz edir ki, bu da bulanıq fonlarda mətnin oxunaqlılığını əlavə olaraq artırır.

iOS tətbiqində Increase Contrast-ın yoxlanılması

Tərtibatçı Increase Contrast vəziyyətini UIAccessibility vasitəsilə yoxlaya və rəngləri uyğunlaşdıra bilər. Məsələn, kontrast artırılıbsa, daha doymuş vurğu rənglərindən istifadə etmək olar, yoxsa — defolt palitra vasitəsilə 4,5:1 əsas kontrast nisbətini təmin etmək lazımdır. UIAccessibility.isReduceTransparencyEnabled aktiv rejimdə bulanıqlıq effektlərini söndürmək üçün də faydalıdır.

import UIKit

class ContrastManager {

    // Increase Contrast vəziyyətinin yoxlanılması
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Reduce Transparency yoxlanılması
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Rəngin kontrast rejiminə uyğunlaşdırılması
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // High Contrast aktiv olduqda daha doymuş mavi
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Reduce Transparency nəzərə alınmaqla fon rəngi
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Qeyri-şəffaf fon
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Dəyişikliklərə abunə olma
    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
        )
    }
}

// İstifadə nümunəsi: 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 vasitəsilə Increase Contrast vəziyyətinə giriş təmin edir, aktiv rejimdə vurğu rəngini uyğunlaşdırır, navigationBar-ın yarı şəffaflığını söndürür və kontrast dəyişiklikləri haqqında sistem bildirişlərinə abunə olur. UIKit UIAccessibility statusu dəyişdikdə elementləri avtomatik olaraq yenidən çəkir.

iOS dinamik rəngləri (UIColor Well) və kontrast

iOS Increase Contrast rejiminə avtomatik uyğunlaşan dinamik UIColor rəngləri (systemBackground, label, secondaryLabel) təqdim edir. Increase Contrast aktivləşdirildikdə sistem rəngləri öz dəyərlərini dəyişir: label daha tünd (və ya tünd temada daha açıq) olur, background yarı şəffaflığını itirir. Tərtibatçıya sistem kontrastı ilə konflikt yaratmamaq üçün bütün UI elementləri üçün dinamik rənglərdən istifadə etmək tövsiyə olunur.

Android-də High Contrast Text: tünd tema və kontrast

Android-də High Contrast Text (Yüksək kontrastlı mətn) funksiyası iOS-dan fərqli işləyir. Kontrast nisbətinin hamar artırılması əvəzinə Android tərs rəng sxemi tətbiq edir: tünd fon və artırılmış qalınlıqla ağ mətn. Rejim AMOLED displeylərdə xüsusilə effektivdir, burada qara rəng maksimum kontrast verir. Parametr Parametrlər > Xüsusi imkanlar > Görünüş yaxşılaşdırmaları bölməsində yerləşir.

Android High Contrast Text iki mexanizmdən istifadə edir: theme overlay vasitəsilə rəng palitrasının ləğvi və bitmap şəkillərinin kontrastını artırmaq üçün ColorMatrix-in tətbiqi. Sistem tətbiqin cari temasını (Light/Dark) analiz edir və maksimum kontrastlı overlay tətbiq edir: qara fonda (#000000) ağ ön plan (#FFFFFF). Yarı şəffaf elementlər qeyri-şəffaf altlıq alır.

Android API vasitəsilə High Contrast Text-in yoxlanılması

High Contrast Text vəziyyətini yoxlamaq üçün Android-də AccessibilityManager və ContentResolver istifadə olunur. API rejimin aktiv olub-olmadığını müəyyən etməyə və UI-ni uyğunlaşdırmağa imkan verir. Jetpack Compose CompositionLocalProvider və LocalContrast vasitəsilə uyğunlaşmanı dəstəkləyir.

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 vasitəsilə yoxlama
    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" }
    }

    // Qlobal parametrlər vasitəsilə yoxlama
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — kontrast nəzərə alınmaqla rənglər
    @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 sistemi: dinamik rəng seçici
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-ın aktivliyini AccessibilityManager və sistem parametrləri vasitəsilə yoxlayır, Jetpack Compose-da rəngləri uyğunlaşdırır və View sistemi üçün xüsusi ContrastTextView təqdim edir. Android-də iOS-dan fərqli olaraq High Contrast dəyişməsi üçün birbaşa bildiriş yoxdur — dinamik yeniləmə üçün Settings.System-də ContentObserver məcburidir.

Material Design 3 və High Contrast

Material Design 3 (Material You) Dynamic Color vasitəsilə High Contrast üçün quraşdırılmış dəstək daxildir. Aktiv sistem rejimində Material 3 avtomatik olaraq maksimum tonal palitra seçir: background = Neutral0, onBackground = Neutral100, primary = Primary100. Tərtibatçıya yalnız MD3 komponentlərindən istifadə etmək kifayətdir — sistem kontrast uyğunlaşmasını öz üzərinə götürür.

WCAG contrast ratio: 4,5:1 və 3:1 standartları

WCAG contrast ratio — mətnin əlçatanlığını qiymətləndirmək üçün istifadə olunan iki rəng arasında parlaqlığın riyazi nisbətidir. Standart iki hədd müəyyən edir: adi mətn üçün 4,5:1 (AA səviyyəsi) və böyük mətn üçün 3:1 (18px/14px bold). AAA səviyyəsi üçün adi mətn üçün 7:1, böyük mətn üçün 4,5:1 tələb olunur. High Contrast rejimi ideal olaraq 7:1 və daha yuxarı təmin etməlidir.

Contrast ratio hesablanması düsturla aparılır: (L1 + 0,05) / (L2 + 0,05), burada L1 — açıq rəngin nisbi parlaqlığı, L2 — tünd rəngin nisbi parlaqlığı. Nisbi parlaqlıq sRGB kanallarından çəkilərlə hesablanır: 0,2126R + 0,7152G + 0,0722B. Accessibility tərtibatçısı üçün alətlərdən istifadə etmək kifayətdir: WebAIM Contrast Checker, Color Contrast Analyser və ya Xcode-da Accessibility Inspector.

WCAG 2.2 kontrast hədləri cədvəli

Kodda kontrastın yoxlanılması

Veb tətbiqində contrast ratio-nun avtomatik yoxlanılması üçün JavaScript istifadə edilə bilər. Aktiv High Contrast rejimində AA standartına uyğun gəlməyən elementləri vurğulamaq məsləhətdir. Aşağıda JavaScript-də nisbi parlaqlığın və contrast ratio-nun hesablanması nümunəsi verilmişdir.

// WCAG 2.2-yə uyğun contrast ratio hesablanması
class ContrastChecker {

    // sRGB-nin xətti məkana çevrilməsi
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Nisbi parlaqlıq (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
    }

    // İki rəng arasında 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 səviyyəsinin yoxlanılması (4,5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // AAA səviyyəsinin yoxlanılması (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// İstifadə
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-də ContrastChecker sinfi WCAG 2.2-yə uyğun olaraq contrast ratio-nun tam hesablanmasını həyata keçirir: sRGB-nin xətti məkana çevrilməsi, Rec.709 çəkiləri ilə nisbi parlaqlığın hesablanması və AA/AAA hədləri ilə müqayisə. Alət High Contrast dəstəyi olan veb tətbiqlərin hazırlanması zamanı rəng palitrasının avtomatik auditi üçün faydalıdır.

Alətlərlə kontrast auditi

Hazır tətbiqdə contrast ratio-nun yoxlanılması üçün Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) və ya axe DevTools (veb) istifadə edin. Bu alətlər avtomatik olaraq WCAG AA-dan aşağı kontrasta malik elementləri tapır və vurğulayır. High Contrast rejimi audit zamanı aktiv olmalıdır — bu, sistem kontrast artımının 7:1-ə çatmaq üçün kifayət olub-olmadığını göstərəcək.

CSS prefers-contrast: veb səhifələrin sistem kontrastına uyğunlaşdırılması

CSS media funksiyası prefers-contrast veb səhifələrə istifadəçinin sistem kontrast parametrindən asılı olaraq stilləri uyğunlaşdırmağa imkan verir. Funksiya aşağıdakı dəyərləri qəbul edir: no-preference (defolt), more (istifadəçi High Contrast-ı aktivləşdirib), less (istifadəçi aşağı kontrasta üstünlük verir) və custom (dəqiq parametr). 2022-ci ildən bütün müasir brauzerlər tərəfindən dəstəklənir.

prefers-contrast: more — veb tərtibatçısı üçün siqnal: mətnin kontrast nisbətini artırmaq, yarı şəffaf fonları qeyri-şəffaf fonlarla əvəz etmək, interaktiv elementlərin haşiyələrini gücləndirmək və aşağı kontrastlı fon şəkillərini silmək. iOS Safari və Android Chrome sistem High Contrast rejimi (Increase Contrast / High Contrast Text) aktivləşdirildikdə more dəyərini ötürür.

prefers-contrast vasitəsilə uyğunlaşma nümunəsi

prefers-contrast: more zamanı veb səhifə rənglərin sayını minimuma endirməli və vurğular üçün ağ-qara palitraya üstünlük verməlidir. Aşağıda rənglərin dəyişdirilməsi, yarı şəffaflığın söndürülməsi və haşiyələrin artırılması ilə CSS uyğunlaşması nümunəsi verilmişdir.

/* Əsas stillər (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;
}

/* Yüksək 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 idi — indi qara
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // 0,4 idi — gücləndirdik
    }
}

/* Aşağı 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 nümunəsində prefers-contrast: more zamanı kart qeyri-şəffaf ağ fon, 2px qara haşiyə alır, mətn qara olur (#000 əvəzinə #333), düymə — görünmə üçün qara haşiyəli tünd göy rəngdə olur. prefers-contrast: less (nadir hal — istifadəçi yumşaq rənglərə üstünlük verir) zamanı kontrast əksinə azaldılır.

prefers-color-scheme ilə birləşdirilməsi

Tam accessibility uyğunlaşması üçün prefers-contrast prefers-color-scheme (açıq/tünd tema) ilə birləşdirilir. prefers-color-scheme: dark və prefers-contrast: more zamanı rənglər parlaq vurğularla qara üzərində ağ olmalıdır. Açıq temada — ağ üzərində qara. Bu media funksiyalarının birləşməsi accessibility tam əhatəsi üçün sınaqdan keçirilməli olan 4 kombinasiya verir.