High Contrast w aplikacjach mobilnych — co to jest, accessibility i ustawienia kontrastu

Czym jest High Contrast w accessibility?

High Contrast to tryb wyświetlania, w którym system operacyjny lub aplikacja zwiększa różnicę między kolorem pierwszego planu (tekst, ikony) a tłem. Minimalny współczynnik kontrastu dla zwykłego tekstu według standardu WCAG AA wynosi 4,5:1, dla dużego tekstu (od 18pt lub 14pt bold) — 3:1. Tryb High Contrast może zwiększyć współczynnik do 7:1 i więcej, zapewniając maksymalną czytelność.

W przeciwieństwie do prostego przyciemniania tła lub rozjaśniania tekstu, High Contrast działa kompleksowo: zastępuje paletę kolorów interfejsu ograniczonym zestawem wysoko kontrastowych kolorów, dodaje obrysy wokół elementów i usuwa półprzezroczystość. Tryb przeznaczony jest dla osób z obniżoną ostrością wzroku, światłowstrętem i niektórymi formami ślepoty barw.

Istnieją trzy rodzaje High Contrast: systemowy (włączony w systemie operacyjnym i wpływający na wszystkie aplikacje), aplikacyjny (wbudowany tryb w obrębie pojedynczej aplikacji) i internetowy (CSS-media-funkcja prefers-contrast). Systemowy High Contrast jest najpotężniejszy, ponieważ nadpisuje kolory nawet w tych aplikacjach, które nie mają własnego wsparcia dostępności.

Kto potrzebuje High Contrast

Główni użytkownicy High Contrast to osoby z zaćmą (zmętnienie soczewki obniżające czułość kontrastową), zwyrodnieniem plamki żółtej (utrata widzenia centralnego), jaskrą i retinopatią cukrzycową. Tryb jest również niezbędny podczas pracy w jasnym słońcu — wysoki kontrast kompensuje odblaski na ekranie. Według danych WebAIM (2025), 86% stron internetowych ma tekst o kontraście poniżej WCAG AA — High Contrast po stronie użytkownika częściowo koryguje tę wadę.

Increase Contrast w iOS: ustawienia i rodzaje kontrastu

W iOS funkcja Increase Contrast znajduje się w Settings > Accessibility > Display & Text Size i zawiera trzy niezależne przełączniki: Increase Contrast (ogólne zwiększenie), Darken Colors (przyciemnienie jaskrawych kolorów) i Reduce Transparency (zmniejszenie przezroczystości). Increase Contrast to główny przełącznik wpływający na tekst, przyciski i granice elementów systemowych.

Technicznie iOS implementuje Increase Contrast przez tintColor i warstwę UIVisualEffectView. Po aktywacji system zwiększa wartość alpha dla ciemnych tonów i zmniejsza dla jasnych, podnosząc współczynnik kontrastu wszystkich elementów UI o 2–3 punkty. Reduce Transparency zastępuje półprzezroczyste tła (efekt matowego szkła) na nieprzezroczyste, co dodatkowo poprawia czytelność tekstu na rozmytych tłach.

Sprawdzanie Increase Contrast w aplikacji iOS

Deweloper może sprawdzić stan Increase Contrast przez UIAccessibility i dostosować kolory. Na przykład, jeśli kontrast jest podwyższony, można użyć bardziej nasyconych kolorów akcentujących, a jeśli nie — zapewnić podstawowy współczynnik kontrastu 4,5:1 przez domyślną paletę. UIAccessibility.isReduceTransparencyEnabled jest również przydatny do wyłączania efektów rozmycia przy aktywnym trybie.

import UIKit

class ContrastManager {

    // Sprawdzanie stanu Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

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

    // Dostosowanie koloru do trybu kontrastu
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Bardziej nasycony niebieski przy aktywnym High Contrast
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Kolor tła z uwzględnieniem Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Nieprzezroczyste tło
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Subskrypcja zmian
    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
        )
    }
}

// Przykład użycia: 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)
        ]
    }
}

Klasa ContrastManager zapewnia dostęp do stanu Increase Contrast przez isDarkerSystemColorsEnabled, dostosowuje kolor akcentujący przy aktywnym trybie, wyłącza półprzezroczystość paska nawigacyjnego i subskrybuje systemowe powiadomienia o zmianie kontrastu. UIKit automatycznie przerysowuje elementy przy zmianie statusu UIAccessibility.

Dynamiczne kolory iOS (UIColor Well) i kontrast

iOS udostępnia dynamiczne kolory UIColor (systemBackground, label, secondaryLabel), które automatycznie dostosowują się do trybu Increase Contrast. Po aktywacji Increase Contrast systemowe kolory zmieniają swoje wartości: label staje się ciemniejszy (lub jaśniejszy w ciemnym motywie), background traci półprzezroczystość. Deweloper powinien używać dynamicznych kolorów dla wszystkich elementów UI, aby nie tworzyć konfliktów z systemowym kontrastem.

High Contrast Text w Android: ciemny motyw i kontrast

W Android funkcja High Contrast Text (Tekst o wysokim kontraście) działa inaczej niż w iOS. Zamiast płynnego zwiększania współczynnika kontrastu Android stosuje odwróconą schemat kolorów: ciemne tło i biały tekst z zwiększoną grubością. Tryb jest szczególnie skuteczny na wyświetlaczach AMOLED, gdzie czarny kolor daje maksymalny kontrast. Ustawienie znajduje się w Ustawieniach > Dostępność > Ulepszenia widoczności.

Android High Contrast Text wykorzystuje dwa mechanizmy: nadpisywanie palety kolorów przez theme overlay i nakładanie ColorMatrix w celu zwiększenia kontrastu obrazów bitmapowych. System analizuje bieżący motyw aplikacji (Light/Dark) i stosuje nakładkę z maksymalnym kontrastem: biały pierwszy plan (#FFFFFF) na czarnym tle (#000000). Półprzezroczyste elementy otrzymują nieprzezroczyste podłoże.

Sprawdzanie High Contrast Text przez Android API

Do sprawdzenia stanu High Contrast Text w Android używa się AccessibilityManager i ContentResolver. API umożliwia określenie, czy tryb jest aktywny, i dostosowanie UI. Jetpack Compose obsługuje adaptację przez 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 {

    // Sprawdzanie przez 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" }
    }

    // Sprawdzanie przez ustawienia globalne
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — kolory z uwzględnieniem kontrastu
    @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
        }
    }
}

// System View: dynamiczny selektor koloru
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)
        }
    }
}

Klasa HighContrastHelper sprawdza aktywność High Contrast przez AccessibilityManager i ustawienia systemowe, dostosowuje kolory w Jetpack Compose i udostępnia niestandardowy ContrastTextView dla systemu View. W Android, w przeciwieństwie do iOS, nie ma bezpośredniego powiadomienia o zmianie High Contrast — ContentObserver na Settings.System jest obowiązkowy do dynamicznej aktualizacji.

Material Design 3 i High Contrast

Material Design 3 (Material You) zawiera wbudowane wsparcie dla High Contrast przez Dynamic Color. Przy aktywnym trybie systemowym Material 3 automatycznie wybiera maksymalną paletę tonalną: background = Neutral0, onBackground = Neutral100, primary = Primary100. Deweloperowi wystarczy używać komponentów MD3 — system zajmie się adaptacją kontrastu.

WCAG contrast ratio: standardy 4,5:1 i 3:1

WCAG contrast ratio — matematyczny stosunek jasności między dwoma kolorami używany do oceny dostępności tekstu. Standard określa dwa progi: 4,5:1 dla zwykłego tekstu (poziom AA) i 3:1 dla dużego tekstu (od 18px/14px bold). Dla poziomu AAA wymagane jest 7:1 dla zwykłego i 4,5:1 dla dużego tekstu. Tryb High Contrast w idealnym przypadku powinien zapewniać 7:1 i więcej.

Obliczenie contrast ratio wykonuje się według wzoru: (L1 + 0,05) / (L2 + 0,05), gdzie L1 — względna jasność jaśniejszego koloru, L2 — ciemniejszego. Względna jasność jest obliczana z kanałów sRGB z wagami: 0,2126R + 0,7152G + 0,0722B. Dla dewelopera dostępności wystarczy używać narzędzi: WebAIM Contrast Checker, Color Contrast Analyser lub Accessibility Inspector w Xcode.

Tabela progów kontrastu WCAG 2.2

Sprawdzanie kontrastu w kodzie

Do automatycznego sprawdzania contrast ratio w aplikacji internetowej można użyć JavaScript. Przy aktywnym trybie High Contrast warto podświetlać elementy, które nie spełniają standardu AA. Poniżej znajduje się przykład obliczania względnej jasności i contrast ratio w JavaScript.

// Obliczenie contrast ratio według WCAG 2.2
class ContrastChecker {

    // Konwersja sRGB do przestrzeni liniowej
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Względna jasność (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 między dwoma kolorami
    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
    }

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

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

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

Klasa ContrastChecker w JavaScript implementuje pełne obliczenie contrast ratio według WCAG 2.2: konwersję sRGB do przestrzeni liniowej, obliczenie względnej jasności z wagami Rec.709 i porównanie z progami AA/AAA. Narzędzie jest przydatne do automatycznego audytu palety kolorów podczas tworzenia aplikacji internetowych z obsługą High Contrast.

Audyt kontrastu narzędziami

Do sprawdzenia contrast ratio w gotowej aplikacji użyj Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) lub axe DevTools (web). Te narzędzia automatycznie znajdują elementy o kontraście poniżej WCAG AA i podświetlają je. Tryb High Contrast powinien być włączony podczas audytu — pokaże to, czy systemowe zwiększenie kontrastu jest wystarczające do osiągnięcia 7:1.

CSS prefers-contrast: dostosowanie stron internetowych do systemowego kontrastu

CSS-media-funkcja prefers-contrast umożliwia stronom internetowym dostosowanie stylów w zależności od systemowego ustawienia kontrastu użytkownika. Funkcja przyjmuje wartości: no-preference (domyślnie), more (użytkownik włączył High Contrast), less (użytkownik preferuje obniżony kontrast) i custom (dokładne ustawienie). Obsługiwana przez wszystkie nowoczesne przeglądarki od 2022 roku.

prefers-contrast: more — sygnał dla dewelopera internetowego: zwiększyć współczynnik kontrastu tekstu, zastąpić półprzezroczyste tła na nieprzezroczyste, wzmocnić granice interaktywnych elementów i usunąć obrazy tła o niskim kontraście. iOS Safari i Android Chrome przekazują wartość more po włączeniu systemowego trybu High Contrast (Increase Contrast / High Contrast Text).

Przykład adaptacji przez prefers-contrast

Przy prefers-contrast: more strona internetowa powinna minimalizować liczbę kolorów i preferować czarno-białą paletę z kolorami akcentującymi dla wyróżnień. Poniżej znajduje się przykład adaptacji CSS z zamianą kolorów, wyłączeniem półprzezroczystości i zwiększeniem granic.

/* Podstawowe style (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;
}

/* Wysoki 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; // Było #666 — teraz czarny
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Było 0,4 — wzmocniliśmy
    }
}

/* Obniżony 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);
    }
}

W przykładzie CSS przy prefers-contrast: more karta otrzymuje nieprzezroczyste białe tło, czarną granicę 2px, tekst staje się czarny (#000 zamiast #333), przycisk — ciemnoniebieski z czarnym obrysem dla widoczności. Przy prefers-contrast: less (rzadki przypadek — użytkownik preferuje delikatne kolory) kontrast jest odwrotnie obniżany.

Łączenie z prefers-color-scheme

Dla pełnej adaptacji dostępności prefers-contrast łączy się z prefers-color-scheme (jasny/ciemny motyw). Przy prefers-color-scheme: dark i prefers-contrast: more kolory powinny być białe na czarnym z jasnymi akcentami. Przy jasnym motywie — czarny na białym. Połączenie tych funkcji medialnych daje 4 kombinacje, które należy przetestować dla pełnego pokrycia dostępności.