High Contrast in mobilen Apps — Was es ist, Barrierefreiheit und Kontrasteinstellungen

Was ist High Contrast in der Barrierefreiheit?

High Contrast ist ein Anzeigemodus, bei dem das Betriebssystem oder die Anwendung den Unterschied zwischen der Vordergrundfarbe (Text, Symbole) und dem Hintergrund vergrößert. Das minimale Kontrastverhältnis für normalen Text nach dem WCAG-AA-Standard beträgt 4.5:1, für großen Text (ab 18pt oder 14pt fett) — 3:1. Der High-Contrast-Modus kann das Verhältnis auf 7:1 und höher erhöhen und so maximale Lesbarkeit gewährleisten.

Im Gegensatz zum einfachen Abdunkeln des Hintergrunds oder Aufhellen des Textes arbeitet High Contrast umfassend: Es ersetzt die Farbpalette der Benutzeroberfläche durch einen begrenzten Satz kontrastreicher Farben, fügt Umrisse um Elemente hinzu und entfernt Transparenz. Dieser Modus ist für Menschen mit eingeschränkter Sehschärfe, Lichtempfindlichkeit und bestimmten Formen von Farbenblindheit konzipiert.

Es gibt drei Arten von High Contrast: systemweit (im Betriebssystem aktiviert und betrifft alle Anwendungen), in der App (integrierter Modus innerhalb einer bestimmten Anwendung) und im Webmodus (CSS-Medienfunktion prefers-contrast). Systemweites High Contrast ist am leistungsstärksten, da es Farben sogar in Anwendungen überschreibt, die keine eigene Barrierefreiheitsunterstützung haben.

Wer braucht High Contrast?

Die Hauptnutzer von High Contrast sind Menschen mit Katarakt (Trübung der Linse, die die Kontrastempfindlichkeit verringert), Makuladegeneration (Verlust des zentralen Sehvermögens), Glaukom und diabetischer Retinopathie. Dieser Modus ist auch bei Arbeiten in hellem Sonnenlicht notwendig — hoher Kontrast gleicht Blendung auf dem Bildschirm aus. Laut WebAIM (2025) haben 86 % der Webseiten Text mit einem Kontrast unter WCAG AA — High Contrast auf der Benutzerseite korrigiert diesen Mangel teilweise.

Increase Contrast in iOS: Einstellung und Kontrastarten

In iOS befindet sich die Funktion Increase Contrast unter Settings > Accessibility > Display & Text Size und umfasst drei unabhängige Schalter: Increase Contrast (allgemeine Verstärkung), Darken Colors (Abdunkeln heller Farben) und Reduce Transparency (Transparenz reduzieren). Increase Contrast ist der Hauptschalter, der Text, Schaltflächen und Ränder von Systemelementen beeinflusst.

Technisch implementiert iOS Increase Contrast über tintColor und die UIVisualEffectView-Ebene. Bei Aktivierung erhöht das System den Alpha-Wert für dunkle Töne und verringert ihn für helle Töne, wodurch das Kontrastverhältnis aller UI-Elemente um 2–3 Punkte angehoben wird. Reduce Transparency ersetzt halbtransparente Hintergründe (Milchglaseffekt) durch undurchsichtige, was die Lesbarkeit von Text auf unscharfen Hintergründen weiter verbessert.

Überprüfen von Increase Contrast in einer iOS-App

Ein Entwickler kann den Status von Increase Contrast über UIAccessibility überprüfen und Farben entsprechend anpassen. Wenn der Kontrast beispielsweise erhöht ist, können gesättigtere Akzentfarben verwendet werden; andernfalls sollte ein Basiskontrastverhältnis von 4.5:1 über die Standardpalette sichergestellt werden. UIAccessibility.isReduceTransparencyEnabled ist auch nützlich, um Unschärfeeffekte zu deaktivieren, wenn der Modus aktiv ist.

import UIKit

class ContrastManager {

    // Überprüfen des Increase-Contrast-Status
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Überprüfen von Reduce Transparency
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Farbe an den Kontrastmodus anpassen
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Gesättigteres Blau bei aktivem High Contrast
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Hintergrundfarbe unter Berücksichtigung von Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Undurchsichtiger Hintergrund
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Änderungen abonnieren
    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
        )
    }
}

// Anwendungsbeispiel: 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)
        ]
    }
}

Die Klasse ContrastManager bietet Zugriff auf den Increase-Contrast-Status über isDarkerSystemColorsEnabled, passt die Akzentfarbe an, wenn der Modus aktiv ist, deaktiviert die Navigationsleisten-Transparenz und abonniert Systembenachrichtigungen über Kontraständerungen. UIKit zeichnet Elemente automatisch neu, wenn sich der UIAccessibility-Status ändert.

Dynamische iOS-Farben (UIColor Well) und Kontrast

iOS bietet dynamische UIColor-Farben (systemBackground, label, secondaryLabel), die sich automatisch an den Increase-Contrast-Modus anpassen. Wenn Increase Contrast aktiviert wird, ändern die Systemfarben ihre Werte: label wird dunkler (oder heller im Dunkelmodus), der Hintergrund verliert Transparenz. Entwickler werden ermutigt, für alle UI-Elemente dynamische Farben zu verwenden, um Konflikte mit dem Systemkontrast zu vermeiden.

High Contrast Text in Android: Dunkles Thema und Kontrast

In Android funktioniert die Funktion High Contrast Text anders als in iOS. Anstatt das Kontrastverhältnis sanft zu erhöhen, wendet Android ein umgekehrtes Farbschema an: dunkler Hintergrund und weißer Text mit erhöhter Fettung. Dieser Modus ist besonders auf AMOLED-Displays effektiv, wo Schwarz maximalen Kontrast bietet. Die Einstellung befindet sich unter Einstellungen > Bedienungshilfen > Sichtverbesserungen.

Android High Contrast Text verwendet zwei Mechanismen: Überschreiben der Farbpalette durch eine Design-Überlagerung und Anwenden einer ColorMatrix zur Erhöhung des Kontrasts von Bitmap-Bildern. Das System analysiert das aktuelle Anwendungsthema (Hell/Dunkel) und wendet eine Überlagerung mit maximalem Kontrast an: weißer Vordergrund (#FFFFFF) auf schwarzem Hintergrund (#000000). Halbtransparente Elemente erhalten einen undurchsichtigen Hintergrund.

Überprüfen von High Contrast Text über die Android-API

Um den Status von High Contrast Text in Android zu überprüfen, werden AccessibilityManager und ContentResolver verwendet. Die API ermöglicht es, festzustellen, ob der Modus aktiv ist, und die Benutzeroberfläche anzupassen. Jetpack Compose unterstützt die Anpassung über CompositionLocalProvider und 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 {

    // Überprüfung über 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" }
    }

    // Überprüfung über globale Einstellungen
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — Farben unter Berücksichtigung des Kontrasts
    @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-System: dynamischer Farbwähler
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)
        }
    }
}

Die Klasse HighContrastHelper überprüft, ob High Contrast über AccessibilityManager und Systemeinstellungen aktiv ist, passt Farben in Jetpack Compose an und bietet ein benutzerdefiniertes ContrastTextView für das View-System. In Android gibt es im Gegensatz zu iOS keine direkte Benachrichtigung über High-Contrast-Änderungen — ContentObserver auf Settings.System ist für dynamische Aktualisierungen erforderlich.

Material Design 3 und High Contrast

Material Design 3 (Material You) enthält integrierte High-Contrast-Unterstützung über Dynamic Color. Wenn der Systemmodus aktiv ist, wählt Material 3 automatisch die maximale Tonpalette aus: background = Neutral0, onBackground = Neutral100, primary = Primary100. Entwickler müssen nur MD3-Komponenten verwenden — das System übernimmt die Kontrastanpassung automatisch.

WCAG-Kontrastverhältnis: Standards 4.5:1 und 3:1

Das WCAG-Kontrastverhältnis ist ein mathematisches Verhältnis der Leuchtdichte zwischen zwei Farben, das zur Bewertung der Textzugänglichkeit verwendet wird. Der Standard definiert zwei Schwellenwerte: 4.5:1 für normalen Text (AA-Stufe) und 3:1 für großen Text (ab 18px/14px fett). Für die AAA-Stufe sind 7:1 für normalen Text und 4.5:1 für großen Text erforderlich. Der High-Contrast-Modus sollte idealerweise 7:1 und mehr bieten.

Die Berechnung des Kontrastverhältnisses erfolgt nach der Formel: (L1 + 0.05) / (L2 + 0.05), wobei L1 die relative Leuchtdichte der helleren Farbe und L2 die relative Leuchtdichte der dunkleren Farbe ist. Die relative Leuchtdichte wird aus sRGB-Kanälen mit Gewichten berechnet: 0.2126R + 0.7152G + 0.0722B. Für Barrierefreiheitsentwickler reicht es aus, Werkzeuge wie WebAIM Contrast Checker, Color Contrast Analyser oder Accessibility Inspector in Xcode zu verwenden.

WCAG 2.2 Kontrastschwellen-Tabelle

Kontrastprüfung im Code

Zur automatischen Überprüfung des Kontrastverhältnisses in einer Webanwendung kann JavaScript verwendet werden. Wenn der High-Contrast-Modus aktiv ist, sollten Elemente hervorgehoben werden, die den AA-Standard nicht erfüllen. Nachfolgend ein Beispiel zur Berechnung der relativen Leuchtdichte und des Kontrastverhältnisses in JavaScript.

// Berechnung des Kontrastverhältnisses nach WCAG 2.2
class ContrastChecker {

    // Konvertierung von sRGB in den linearen Raum
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Relative Leuchtdichte
    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
    }

    // Kontrastverhältnis zwischen zwei Farben
    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
    }

    // Prüfung auf AA-Stufe (4.5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // Prüfung auf AAA-Stufe (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// Verwendung
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → 13.2:1 (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (2.8:1)

Die Klasse ContrastChecker in JavaScript implementiert eine vollständige Kontrastverhältnisberechnung nach WCAG 2.2: Konvertierung von sRGB in den linearen Raum, Berechnung der relativen Leuchtdichte mit Rec.709-Gewichten und Vergleich mit AA/AAA-Schwellenwerten. Dieses Werkzeug ist nützlich für die automatisierte Farbpalettenprüfung bei der Entwicklung von Webanwendungen mit High-Contrast-Unterstützung.

Kontrastprüfungswerkzeuge

Um das Kontrastverhältnis in einer fertigen Anwendung zu überprüfen, verwenden Sie Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) oder axe DevTools (Web). Diese Werkzeuge finden automatisch Elemente mit einem Kontrast unter WCAG AA und heben sie hervor. Der High-Contrast-Modus sollte während der Prüfung aktiviert sein — dies zeigt, ob die systemseitige Kontrastverstärkung ausreicht, um 7:1 zu erreichen.

CSS prefers-contrast: Anpassung von Webseiten an den Systemkontrast

Die CSS-Medienfunktion prefers-contrast ermöglicht es Webseiten, Stile basierend auf der systemweiten Kontrasteinstellung des Benutzers anzupassen. Die Funktion akzeptiert die Werte: no-preference (Standard), more (Benutzer hat High Contrast aktiviert), less (Benutzer bevorzugt reduzierten Kontrast) und custom (Feineinstellung). Sie wird seit 2022 von allen modernen Browsern unterstützt.

prefers-contrast: more — ein Signal für Webentwickler: das Textkontrastverhältnis erhöhen, halbtransparente Hintergründe durch undurchsichtige ersetzen, Grenzen interaktiver Elemente verstärken und kontrastarme Hintergrundbilder entfernen. iOS Safari und Android Chrome übergeben den Wert more, wenn der systemweite High-Contrast-Modus (Increase Contrast / High Contrast Text) aktiviert ist.

Anpassungsbeispiel mit prefers-contrast

Wenn prefers-contrast: more aktiv ist, sollte die Webseite die Anzahl der Farben minimieren und eine Schwarz-Weiß-Palette mit Akzentfarben für Hervorhebungen bevorzugen. Nachfolgend ein Beispiel für eine CSS-Anpassung mit Farbersetzung, Transparenzentfernung und Randverstärkung.

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

/* Hoher 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; // War #666 — jetzt schwarz
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // War 0.4 — verstärkt
    }
}

/* Reduzierter 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);
    }
}

Im CSS-Beispiel unter prefers-contrast: more erhält die Karte einen undurchsichtigen weißen Hintergrund, einen 2px schwarzen Rand, der Text wird schwarz (#000 statt #333) und die Schaltfläche wird dunkelblau mit einer schwarzen Kontur für Sichtbarkeit. Unter prefers-contrast: less (ein seltener Fall — der Benutzer bevorzugt weiche Farben) wird der Kontrast stattdessen reduziert.

Kombination mit prefers-color-scheme

Für eine vollständige Barrierefreiheitsanpassung wird prefers-contrast mit prefers-color-scheme (helles/dunkles Thema) kombiniert. Wenn prefers-color-scheme: dark und prefers-contrast: more beide aktiv sind, sollten die Farben weiß auf schwarz mit hellen Akzenten sein. Im hellen Modus — schwarz auf weiß. Die Kombination dieser Medienfunktionen ergibt 4 Kombinationen, die für eine vollständige Barrierefreiheitsabdeckung getestet werden müssen.