High Contrast v mobilních aplikacích — co to je, accessibility a nastavení kontrastu

Co je High Contrast v accessibility?

High Contrast je režim zobrazení, při kterém operační systém nebo aplikace zvyšuje rozdíl mezi barvou popředí (text, ikony) a pozadím. Minimální poměr kontrastu pro běžný text podle standardu WCAG AA je 4,5:1, pro velký text (od 18pt nebo 14pt bold) — 3:1. Režim High Contrast může zvýšit poměr na 7:1 a více, což zajišťuje maximální rozlišitelnost.

Na rozdíl od jednoduchého ztmavení pozadí nebo zesvětlení textu, High Contrast pracuje komplexně: nahrazuje paletu barev rozhraní omezenou sadou vysoce kontrastních barev, přidává obrysy kolem prvků a odstraňuje průsvitnost. Režim je určen pro osoby se sníženou ostrostí zraku, světloplachostí a některými formami barvosleposti.

Existují tři typy High Contrast: systémový (zapnutý v OS a ovlivňující všechny aplikace), aplikační (vestavěný režim v rámci jedné aplikace) a webový (CSS media funkce prefers-contrast). Systémový High Contrast je nejvýkonnější, protože přepisuje barvy i v aplikacích, které nemají vlastní podporu přístupnosti.

Kdo potřebuje High Contrast

Hlavní uživatelé High Contrast — lidé s šedým zákalem (zakalení čočky snižující kontrastní citlivost), makulární degenerací (ztráta centrálního vidění), glaukomem a diabetickou retinopatií. Režim je také nezbytný při práci na ostrém slunci — vysoký kontrast kompenzuje odlesky na obrazovce. Podle údajů WebAIM (2025) má 86% webových stránek text s kontrastem pod WCAG AA — High Contrast na straně uživatele částečně opravuje tento nedostatek.

Increase Contrast v iOS: nastavení a typy kontrastu

V iOS se funkce Increase Contrast nachází v Settings > Accessibility > Display & Text Size a zahrnuje tři nezávislé přepínače: Increase Contrast (obecné zesílení), Darken Colors (ztmavení jasných barev) a Reduce Transparency (snížení průhlednosti). Increase Contrast je hlavní přepínač ovlivňující text, tlačítka a okraje systémových prvků.

Technicky iOS implementuje Increase Contrast prostřednictvím tintColor a vrstvy UIVisualEffectView. Při aktivaci systém zvyšuje hodnotu alpha pro tmavé tóny a snižuje pro světlé, čímž zvedá poměr kontrastu všech UI prvků o 2–3 body. Reduce Transparency nahrazuje průsvitná pozadí (efekt matného skla) neprůhlednými pozadími, což dále zlepšuje čitelnost textu na rozmazaných pozadích.

Kontrola Increase Contrast v iOS aplikaci

Vývojář může zkontrolovat stav Increase Contrast pomocí UIAccessibility a přizpůsobit barvy. Pokud je například kontrast zvýšen, lze použít sytější accent barvy, pokud ne — zajistit základní poměr kontrastu 4,5:1 pomocí výchozí palety. UIAccessibility.isReduceTransparencyEnabled je také užitečný pro vypnutí blur efektů při aktivním režimu.

import UIKit

class ContrastManager {

    // Kontrola stavu Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

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

    // Přizpůsobení barvy kontrastnímu režimu
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Sytější modrá při aktivním High Contrast
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Barva pozadí s ohledem na Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Neprůhledné pozadí
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Odběr změn
    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
        )
    }
}

// Příklad použití: 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)
        ]
    }
}

Třída ContrastManager poskytuje přístup ke stavu Increase Contrast prostřednictvím isDarkerSystemColorsEnabled, přizpůsobuje accent barvu při aktivním režimu, vypíná průsvitnost navigationBar a odebírá systémová oznámení o změně kontrastu. UIKit automaticky překresluje prvky při změně stavu UIAccessibility.

Dynamické barvy iOS (UIColor Well) a kontrast

iOS poskytuje dynamické barvy UIColor (systemBackground, label, secondaryLabel), které se automaticky přizpůsobují režimu Increase Contrast. Při aktivaci Increase Contrast systémové barvy mění své hodnoty: label se stává tmavším (nebo světlejším v tmavém motivu), background ztrácí průsvitnost. Vývojáři se doporučuje používat dynamické barvy pro všechny UI prvky, aby nevytvářel konflikty se systémovým kontrastem.

High Contrast Text v Androidu: tmavý motiv a kontrast

V Androidu funguje funkce High Contrast Text (Text s vysokým kontrastem) jinak než v iOS. Místo postupného zvyšování poměru kontrastu Android aplikuje inverzní barevné schéma: tmavé pozadí a bílý text se zvýšenou tloušťkou. Režim je obzvláště účinný na AMOLED displejích, kde černá barva poskytuje maximální kontrast. Nastavení se nachází v Nastavení > Usnadnění > Vylepšení viditelnosti.

Android High Contrast Text používá dva mechanismy: přepsání palety barev pomocí theme overlay a aplikaci ColorMatrix pro zvýšení kontrastu bitmapových obrázků. Systém analyzuje aktuální motiv aplikace (Light/Dark) a aplikuje overlay s maximálním kontrastem: bílé popředí (#FFFFFF) na černém pozadí (#000000). Průsvitné prvky dostávají neprůhlednou podložku.

Kontrola High Contrast Text pomocí Android API

Pro kontrolu stavu High Contrast Text v Androidu se používá AccessibilityManager a ContentResolver. API umožňuje zjistit, zda je režim aktivní, a přizpůsobit UI. Jetpack Compose podporuje přizpůsobení prostřednictvím CompositionLocalProvider a 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 {

    // Kontrola přes 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" }
    }

    // Kontrola přes globální nastavení
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — barvy s ohledem na kontrast
    @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 systém: dynamický výběr barvy
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)
        }
    }
}

Třída HighContrastHelper kontroluje aktivitu High Contrast pomocí AccessibilityManager a systémových nastavení, přizpůsobuje barvy v Jetpack Compose a poskytuje vlastní ContrastTextView pro View systém. V Androidu, na rozdíl od iOS, neexistuje přímé oznámení pro změnu High Contrast — ContentObserver na Settings.System je povinný pro dynamickou aktualizaci.

Material Design 3 a High Contrast

Material Design 3 (Material You) zahrnuje vestavěnou podporu pro High Contrast prostřednictvím Dynamic Color. Při aktivním systémovém režimu Material 3 automaticky vybírá maximální tonální paletu: background = Neutral0, onBackground = Neutral100, primary = Primary100. Vývojářovi stačí používat MD3 komponenty — systém se postará o přizpůsobení kontrastu.

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

WCAG contrast ratio — matematický poměr jasu mezi dvěma barvami používaný k hodnocení přístupnosti textu. Standard definuje dvě prahové hodnoty: 4,5:1 pro běžný text (úroveň AA) a 3:1 pro velký text (od 18px/14px bold). Pro úroveň AAA je vyžadováno 7:1 pro běžný a 4,5:1 pro velký text. Režim High Contrast by měl ideálně poskytovat 7:1 a více.

Výpočet contrast ratio se provádí podle vzorce: (L1 + 0,05) / (L2 + 0,05), kde L1 — relativní jas světlejší barvy, L2 — tmavší barvy. Relativní jas se vypočítává z kanálů sRGB s váhami: 0,2126R + 0,7152G + 0,0722B. Pro vývojáře přístupnosti stačí používat nástroje: WebAIM Contrast Checker, Color Contrast Analyser nebo Accessibility Inspector v Xcode.

Tabulka prahů kontrastu WCAG 2.2

Kontrola kontrastu v kódu

Pro automatickou kontrolu contrast ratio ve webové aplikaci lze použít JavaScript. Při aktivním režimu High Contrast je žádoucí zvýraznit prvky, které neodpovídají standardu AA. Níže je uveden příklad výpočtu relativního jasu a contrast ratio v JavaScriptu.

// Výpočet contrast ratio podle WCAG 2.2
class ContrastChecker {

    // Konverze sRGB do lineárního prostoru
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Relativní jas (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 mezi dvěma barvami
    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
    }

    // Kontrola úrovně AA (4,5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // Kontrola úrovně AAA (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

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

Třída ContrastChecker v JavaScriptu implementuje úplný výpočet contrast ratio podle WCAG 2.2: konverzi sRGB do lineárního prostoru, výpočet relativního jasu s váhami Rec.709 a porovnání s prahy AA/AAA. Nástroj je užitečný pro automatický audit palety barev při vývoji webových aplikací s podporou High Contrast.

Audit kontrastu nástroji

Pro kontrolu contrast ratio v hotové aplikaci použijte Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) nebo axe DevTools (web). Tyto nástroje automaticky najdou prvky s kontrastem pod WCAG AA a zvýrazní je. Režim High Contrast by měl být během auditu zapnutý — to ukáže, zda je systémové zvýšení kontrastu dostatečné pro dosažení 7:1.

CSS prefers-contrast: přizpůsobení webových stránek systémovému kontrastu

CSS media funkce prefers-contrast umožňuje webovým stránkám přizpůsobit styly v závislosti na systémovém nastavení kontrastu uživatele. Funkce přijímá hodnoty: no-preference (výchozí), more (uživatel zapnul High Contrast), less (uživatel preferuje snížený kontrast) a custom (přesné nastavení). Podporována všemi moderními prohlížeči od roku 2022.

prefers-contrast: more — signál pro webového vývojáře: zvýšit poměr kontrastu textu, nahradit průsvitná pozadí neprůhlednými, zesílit okraje interaktivních prvků a odstranit obrázky na pozadí s nízkým kontrastem. iOS Safari a Android Chrome předávají hodnotu more při zapnutí systémového režimu High Contrast (Increase Contrast / High Contrast Text).

Příklad přizpůsobení pomocí prefers-contrast

Při prefers-contrast: more by měla webová stránka minimalizovat počet barev a upřednostnit černobílou paletu s accent barvami pro zvýraznění. Níže je uveden příklad CSS přizpůsobení s výměnou barev, vypnutím průsvitnosti a zvýšením okrajů.

/* Základní styly (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;
}

/* Vysoký 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; // Bylo #666 — nyní černá
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Bylo 0,4 — zesílili jsme
    }
}

/* Snížený 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);
    }
}

V příkladu CSS při prefers-contrast: more karta získává neprůhledné bílé pozadí, černý okraj 2px, text se stává černým (#000 místo #333), tlačítko — tmavě modré s černým obrysem pro viditelnost. Při prefers-contrast: less (vzácný případ — uživatel preferuje jemné barvy) se kontrast naopak snižuje.

Kombinace s prefers-color-scheme

Pro úplné přizpůsobení přístupnosti se prefers-contrast kombinuje s prefers-color-scheme (světlý/tmavý motiv). Při prefers-color-scheme: dark a prefers-contrast: more by barvy měly být bílé na černé s jasnými akcenty. Při světlém motivu — černé na bílé. Kombinace těchto media funkcí dává 4 kombinace, které je třeba otestovat pro úplné pokrytí přístupnosti.