High Contrast în aplicațiile mobile — ce este, accessibility și setările de contrast

Ce este High Contrast în accessibility?

High Contrast este un mod de afișare în care sistemul de operare sau aplicația mărește diferența dintre culoarea prim-planului (text, icoane) și fundal. Raportul minim de contrast pentru textul obișnuit conform standardului WCAG AA este de 4,5:1, pentru textul mare (de la 18pt sau 14pt bold) — 3:1. Modul High Contrast poate crește raportul la 7:1 și mai mult, asigurând o vizibilitate maximă.

Spre deosebire de simpla întunecare a fundalului sau iluminare a textului, High Contrast funcționează complex: înlocuiește paleta de culori a interfeței cu un set limitat de culori cu contrast ridicat, adaugă contururi în jurul elementelor și elimină transparența. Modul este destinat persoanelor cu acuitate vizuală redusă, fotofobie și unele forme de daltonism.

Există trei tipuri de High Contrast: de sistem (activat în OS și care afectează toate aplicațiile), de aplicație (mod încorporat în cadrul unei aplicații) și web (funcția media CSS prefers-contrast). High Contrast de sistem este cel mai puternic, deoarece suprascrie culorile chiar și în aplicațiile care nu au suport propriu de accesibilitate.

Cine are nevoie de High Contrast

Principalii utilizatori ai High Contrast — persoanele cu cataractă (opacifierea cristalinului care reduce sensibilitatea la contrast), degenerescență maculară (pierderea vederii centrale), glaucom și retinopatie diabetică. De asemenea, modul este necesar la lucrul în soare puternic — contrastul ridicat compensează strălucirea pe ecran. Conform datelor WebAIM (2025), 86% din paginile web au text cu contrast sub WCAG AA — High Contrast din partea utilizatorului corectează parțial acest defect.

Increase Contrast în iOS: setări și tipuri de contrast

În iOS funcția Increase Contrast se află în Settings > Accessibility > Display & Text Size și include trei comutatoare independente: Increase Contrast (creștere generală), Darken Colors (întunecarea culorilor strălucitoare) și Reduce Transparency (reducerea transparenței). Increase Contrast este comutatorul principal care afectează textul, butoanele și marginile elementelor de sistem.

Tehnic, iOS implementează Increase Contrast prin tintColor și stratul UIVisualEffectView. La activare, sistemul crește valoarea alpha pentru tonurile întunecate și o scade pentru cele deschise, ridicând raportul de contrast al tuturor elementelor UI cu 2–3 puncte. Reduce Transparency înlocuiește fundalurile semitransparente (efect de sticlă mată) cu fundaluri opace, ceea ce îmbunătățește suplimentar lizibilitatea textului pe fundaluri estompate.

Verificarea Increase Contrast în aplicația iOS

Dezvoltatorul poate verifica starea Increase Contrast prin UIAccessibility și poate adapta culorile. De exemplu, dacă contrastul este crescut, se pot folosi culori accent mai saturate, iar dacă nu — asigurarea raportului de contrast de bază 4,5:1 prin paleta implicită. UIAccessibility.isReduceTransparencyEnabled este util și pentru dezactivarea efectelor de blur în modul activ.

import UIKit

class ContrastManager {

    // Verificarea stării Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

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

    // Adaptarea culorii la modul de contrast
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Albastru mai saturat la High Contrast activ
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Culoarea fundalului ținând cont de Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Fundal opac
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Abonarea la modificări
    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
        )
    }
}

// Exemplu de utilizare: 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)
        ]
    }
}

Clasa ContrastManager oferă acces la starea Increase Contrast prin isDarkerSystemColorsEnabled, adaptează culoarea accent în modul activ, dezactivează semitransparența navigationBar și se abonează la notificările sistemului despre modificarea contrastului. UIKit redesenează automat elementele la schimbarea stării UIAccessibility.

Culorile dinamice iOS (UIColor Well) și contrastul

iOS oferă culori dinamice UIColor (systemBackground, label, secondaryLabel) care se adaptează automat la modul Increase Contrast. La activarea Increase Contrast, culorile sistemului își schimbă valorile: label devine mai închis (sau mai deschis în tema întunecată), background își pierde semitransparența. Se recomandă ca dezvoltatorul să folosească culori dinamice pentru toate elementele UI pentru a nu crea conflicte cu contrastul sistemului.

High Contrast Text în Android: tema întunecată și contrastul

În Android funcția High Contrast Text (Text cu contrast ridicat) funcționează diferit față de iOS. În locul creșterii treptate a raportului de contrast, Android aplică o schemă de culori inversă: fundal întunecat și text alb cu grosime mărită. Modul este deosebit de eficient pe ecranele AMOLED, unde culoarea neagră oferă un contrast maxim. Setarea se află în Setări > Accesibilitate > Îmbunătățiri ale vizibilității.

Android High Contrast Text utilizează două mecanisme: suprascrierea paletei de culori prin theme overlay și aplicarea ColorMatrix pentru creșterea contrastului imaginilor bitmap. Sistemul analizează tema curentă a aplicației (Light/Dark) și aplică un overlay cu contrast maxim: prim-plan alb (#FFFFFF) pe fundal negru (#000000). Elementele semitransparente primesc un suport opac.

Verificarea High Contrast Text prin Android API

Pentru verificarea stării High Contrast Text în Android se utilizează AccessibilityManager și ContentResolver. API permite determinarea dacă modul este activ și adaptarea UI. Jetpack Compose suportă adaptarea prin CompositionLocalProvider și 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 {

    // Verificarea prin 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" }
    }

    // Verificarea prin setări globale
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — culori cu luarea în considerare a contrastului
    @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
        }
    }
}

// Sistemul View: selector dinamic de culoare
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)
        }
    }
}

Clasa HighContrastHelper verifică activitatea High Contrast prin AccessibilityManager și setările de sistem, adaptează culorile în Jetpack Compose și oferă un ContrastTextView personalizat pentru sistemul View. În Android, spre deosebire de iOS, nu există o notificare directă pentru modificarea High Contrast — ContentObserver pe Settings.System este obligatoriu pentru actualizarea dinamică.

Material Design 3 și High Contrast

Material Design 3 (Material You) include suport încorporat pentru High Contrast prin Dynamic Color. Când modul de sistem este activ, Material 3 selectează automat paleta tonală maximă: background = Neutral0, onBackground = Neutral100, primary = Primary100. Dezvoltatorul trebuie doar să folosească componente MD3 — sistemul se va ocupa de adaptarea contrastului.

WCAG contrast ratio: standardele 4,5:1 și 3:1

WCAG contrast ratio — raportul matematic de luminozitate între două culori utilizat pentru evaluarea accesibilității textului. Standardul definește două praguri: 4,5:1 pentru text obișnuit (nivel AA) și 3:1 pentru text mare (de la 18px/14px bold). Pentru nivelul AAA este necesar 7:1 pentru text obișnuit și 4,5:1 pentru text mare. Modul High Contrast în mod ideal ar trebui să asigure 7:1 și mai mult.

Calculul contrast ratio se realizează după formula: (L1 + 0,05) / (L2 + 0,05), unde L1 — luminozitatea relativă a culorii mai deschise, L2 — a celei mai închise. Luminozitatea relativă se calculează din canalele sRGB cu ponderi: 0,2126R + 0,7152G + 0,0722B. Pentru dezvoltatorul de accesibilitate este suficient să folosească instrumente: WebAIM Contrast Checker, Color Contrast Analyser sau Accessibility Inspector în Xcode.

Tabelul pragurilor de contrast WCAG 2.2

Verificarea contrastului în cod

Pentru verificarea automată a contrast ratio într-o aplicație web se poate folosi JavaScript. În modul High Contrast activ, este de dorit să se evidențieze elementele care nu corespund standardului AA. Mai jos este dat un exemplu de calcul al luminozității relative și contrast ratio în JavaScript.

// Calculul contrast ratio conform WCAG 2.2
class ContrastChecker {

    // Conversia sRGB în spațiul liniar
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Luminozitatea relativă (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
    }

    // Contrast ratio între două culori
    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
    }

    // Verificarea nivelului AA (4,5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

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

// Utilizare
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → 13,2:1 (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (2,8:1)

Clasa ContrastChecker în JavaScript implementează calculul complet al contrast ratio conform WCAG 2.2: conversia sRGB în spațiul liniar, calculul luminozității relative cu ponderi Rec.709 și compararea cu pragurile AA/AAA. Instrumentul este util pentru auditul automat al paletei de culori la dezvoltarea aplicațiilor web cu suport High Contrast.

Auditul contrastului cu instrumente

Pentru verificarea contrast ratio într-o aplicație finită, utilizați Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) sau axe DevTools (web). Aceste instrumente găsesc automat elementele cu contrast sub WCAG AA și le evidențiază. Modul High Contrast trebuie să fie activat în timpul auditului — acest lucru va arăta dacă creșterea de contrast a sistemului este suficientă pentru a atinge 7:1.

CSS prefers-contrast: adaptarea paginilor web la contrastul sistemului

Funcția media CSS prefers-contrast permite paginilor web să adapteze stilurile în funcție de setarea de contrast a sistemului utilizatorului. Funcția acceptă valorile: no-preference (implicit), more (utilizatorul a activat High Contrast), less (utilizatorul preferă contrast redus) și custom (setare precisă). Este suportată de toate browserele moderne din 2022.

prefers-contrast: more — semnal pentru dezvoltatorul web: creșterea raportului de contrast al textului, înlocuirea fundalurilor semitransparente cu fundaluri opace, întărirea marginilor elementelor interactive și eliminarea imaginilor de fundal cu contrast scăzut. iOS Safari și Android Chrome transmit valoarea more la activarea modului High Contrast de sistem (Increase Contrast / High Contrast Text).

Exemplu de adaptare prin prefers-contrast

La prefers-contrast: more pagina web trebuie să minimizeze numărul de culori și să prefere paleta alb-negru cu culori accent pentru evidențieri. Mai jos este dat un exemplu de adaptare CSS cu înlocuirea culorilor, dezactivarea semitransparenței și creșterea marginilor.

/* Stiluri de bază (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;
}

/* Contrast ridicat: 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; // Era #666 — acum negru
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Era 0,4 — am întărit
    }
}

/* Contrast redus: 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);
    }
}

În exemplul CSS la prefers-contrast: more cardul primește un fundal alb opac, o margine neagră de 2px, textul devine negru (#000 în loc de #333), butonul — albastru închis cu contur negru pentru vizibilitate. La prefers-contrast: less (caz rar — utilizatorul preferă culori moi) contrastul este invers redus.

Combinarea cu prefers-color-scheme

Pentru adaptarea completă a accesibilității prefers-contrast se combină cu prefers-color-scheme (temă deschisă/întunecată). La prefers-color-scheme: dark și prefers-contrast: more culorile ar trebui să fie alb pe negru cu accente strălucitoare. La tema deschisă — negru pe alb. Combinarea acestor funcții media oferă 4 combinații care trebuie testate pentru acoperirea completă a accesibilității.