High Contrast in mobiele apps — wat is het, accessibility en contrastinstellingen

Wat is High Contrast in accessibility?

High Contrast is een weergavemodus waarin het besturingssysteem of de app het verschil tussen de voorgrondkleur (tekst, pictogrammen) en de achtergrond vergroot. De minimale contrastverhouding voor normale tekst volgens de WCAG AA-standaard is 4,5:1, voor grote tekst (vanaf 18pt of 14pt bold) — 3:1. De High Contrast-modus kan de verhouding verhogen tot 7:1 en hoger, voor maximale zichtbaarheid.

In tegenstelling tot eenvoudige verdonkering van de achtergrond of oplichting van tekst, werkt High Contrast complex: het vervangt het kleurenpalet van de interface door een beperkte set hoogcontrastkleuren, voegt contouren rond elementen toe en verwijdert doorschijnendheid. De modus is bedoeld voor mensen met verminderde gezichtsscherpte, fotofobie en bepaalde vormen van kleurenblindheid.

Er zijn drie soorten High Contrast: systeem (ingeschakeld in het besturingssysteem en van invloed op alle apps), app (ingebouwde modus binnen een individuele app) en web (CSS-mediafunctie prefers-contrast). Systeem High Contrast is het krachtigst, omdat het kleuren overschrijft, zelfs in apps die geen eigen toegankelijkheidsondersteuning hebben.

Wie heeft High Contrast nodig

De belangrijkste gebruikers van High Contrast — mensen met staar (vertroebeling van de lens die de contrastgevoeligheid vermindert), maculadegeneratie (verlies van centraal zicht), glaucoom en diabetische retinopathie. De modus is ook noodzakelijk bij het werken in fel zonlicht — hoog contrast compenseert schittering op het scherm. Volgens WebAIM (2025) heeft 86% van de webpagina's tekst met een contrast onder WCAG AA — High Contrast aan de gebruikerszijde corrigeert dit gebrek gedeeltelijk.

Increase Contrast in iOS: instellingen en soorten contrast

In iOS bevindt de functie Increase Contrast zich in Settings > Accessibility > Display & Text Size en bevat drie onafhankelijke schakelaars: Increase Contrast (algemene versterking), Darken Colors (verdonkering van felle kleuren) en Reduce Transparency (vermindering van transparantie). Increase Contrast is de hoofdschakelaar die van invloed is op tekst, knoppen en randen van systeemelementen.

Technisch implementeert iOS Increase Contrast via tintColor en de laag UIVisualEffectView. Bij activering verhoogt het systeem de alpha-waarde voor donkere tinten en verlaagt het voor lichte tinten, waardoor de contrastverhouding van alle UI-elementen met 2–3 punten stijgt. Reduce Transparency vervangt doorschijnende achtergronden (matglaseffect) door ondoorzichtige achtergronden, wat de leesbaarheid van tekst op vervaagde achtergronden verder verbetert.

Increase Contrast controleren in iOS-app

De ontwikkelaar kan de status van Increase Contrast controleren via UIAccessibility en de kleuren aanpassen. Als het contrast bijvoorbeeld is verhoogd, kan men meer verzadigde accentkleuren gebruiken, en zo niet — de basiscontrastverhouding van 4,5:1 garanderen via het standaardpalet. UIAccessibility.isReduceTransparencyEnabled is ook nuttig voor het uitschakelen van blur-effecten in de actieve modus.

import UIKit

class ContrastManager {

    // Status van Increase Contrast controleren
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

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

    // Kleur aanpassen aan contrastmodus
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Meer verzadigd blauw bij actieve High Contrast
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Achtergrondkleur rekening houdend met Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Ondoorzichtige achtergrond
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Abonneren op wijzigingen
    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
        )
    }
}

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

De klasse ContrastManager biedt toegang tot de status van Increase Contrast via isDarkerSystemColorsEnabled, past de accentkleur aan in de actieve modus, schakelt de doorschijnendheid van navigationBar uit en abonneert zich op systeemmeldingen over contrastwijzigingen. UIKit hertekent elementen automatisch bij wijziging van de UIAccessibility-status.

Dynamische iOS-kleuren (UIColor Well) en contrast

iOS biedt dynamische UIColor-kleuren (systemBackground, label, secondaryLabel) die zich automatisch aanpassen aan de Increase Contrast-modus. Bij activering van Increase Contrast veranderen systeemkleuren hun waarden: label wordt donkerder (of lichter in donkere thema), background verliest zijn doorschijnendheid. De ontwikkelaar wordt aanbevolen dynamische kleuren te gebruiken voor alle UI-elementen om conflicten met systeemcontrast te voorkomen.

High Contrast Text in Android: donkere thema en contrast

In Android werkt de functie High Contrast Text (Tekst met hoog contrast) anders dan in iOS. In plaats van een geleidelijke verhoging van de contrastverhouding past Android een omgekeerd kleurenschema toe: donkere achtergrond en witte tekst met verhoogde dikte. De modus is vooral effectief op AMOLED-schermen, waar zwarte kleur maximaal contrast geeft. De instelling bevindt zich in Instellingen > Toegankelijkheid > Zichtbaarheidsverbeteringen.

Android High Contrast Text gebruikt twee mechanismen: overschrijving van het kleurenpalet via theme overlay en toepassing van ColorMatrix voor het verhogen van het contrast van bitmap-afbeeldingen. Het systeem analyseert de huidige thema van de app (Light/Dark) en past een overlay met maximaal contrast toe: witte voorgrond (#FFFFFF) op zwarte achtergrond (#000000). Doorschijnende elementen krijgen een ondoorzichtige ondergrond.

High Contrast Text controleren via Android API

Voor het controleren van de status van High Contrast Text in Android wordt AccessibilityManager en ContentResolver gebruikt. De API maakt het mogelijk te bepalen of de modus actief is en de UI aan te passen. Jetpack Compose ondersteunt aanpassing via CompositionLocalProvider en 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 {

    // Controleren via 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" }
    }

    // Controleren via globale instellingen
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — kleuren rekening houdend met contrast
    @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-systeem: dynamische kleurselector
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)
        }
    }
}

De klasse HighContrastHelper controleert de activiteit van High Contrast via AccessibilityManager en systeeminstellingen, past kleuren aan in Jetpack Compose en biedt een aangepaste ContrastTextView voor het View-systeem. In Android is er, in tegenstelling tot iOS, geen directe melding voor wijziging van High Contrast — ContentObserver op Settings.System is verplicht voor dynamische bijwerking.

Material Design 3 en High Contrast

Material Design 3 (Material You) bevat ingebouwde ondersteuning voor High Contrast via Dynamic Color. Bij actieve systeemmodus selecteert Material 3 automatisch het maximale tonale palet: background = Neutral0, onBackground = Neutral100, primary = Primary100. De ontwikkelaar hoeft alleen MD3-componenten te gebruiken — het systeem neemt de contrastaanpassing over.

WCAG contrast ratio: 4,5:1 en 3:1 standaarden

WCAG contrast ratio — wiskundige verhouding van helderheid tussen twee kleuren die wordt gebruikt om de toegankelijkheid van tekst te beoordelen. De standaard definieert twee drempels: 4,5:1 voor normale tekst (AA-niveau) en 3:1 voor grote tekst (vanaf 18px/14px bold). Voor AAA-niveau is 7:1 vereist voor normale tekst en 4,5:1 voor grote tekst. De High Contrast-modus moet idealiter 7:1 en hoger bieden.

De berekening van contrast ratio wordt uitgevoerd met de formule: (L1 + 0,05) / (L2 + 0,05), waarbij L1 — relatieve helderheid van de lichtere kleur, L2 — van de donkerdere. Relatieve helderheid wordt berekend uit sRGB-kanalen met gewichten: 0,2126R + 0,7152G + 0,0722B. Voor de toegankelijkheidsontwikkelaar is het voldoende om hulpmiddelen te gebruiken: WebAIM Contrast Checker, Color Contrast Analyser of Accessibility Inspector in Xcode.

Tabel van contrastdrempels WCAG 2.2

Contrast controleren in code

Voor automatische controle van contrast ratio in een webapp kan JavaScript worden gebruikt. In de actieve High Contrast-modus is het wenselijk elementen te markeren die niet voldoen aan de AA-standaard. Hieronder staat een voorbeeld van het berekenen van relatieve helderheid en contrast ratio in JavaScript.

// Berekening van contrast ratio volgens WCAG 2.2
class ContrastChecker {

    // sRGB converteren naar lineaire ruimte
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Relatieve helderheid (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 tussen twee kleuren
    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-niveau controleren (4,5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

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

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

De klasse ContrastChecker in JavaScript implementeert de volledige berekening van contrast ratio volgens WCAG 2.2: conversie van sRGB naar lineaire ruimte, berekening van relatieve helderheid met Rec.709-gewichten en vergelijking met AA/AAA-drempels. Het hulpmiddel is nuttig voor automatische audit van het kleurenpalet bij het ontwikkelen van webapps met ondersteuning voor High Contrast.

Contrast audit met hulpmiddelen

Voor het controleren van contrast ratio in een voltooide app gebruikt u Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) of axe DevTools (web). Deze hulpmiddelen vinden automatisch elementen met contrast onder WCAG AA en markeren ze. De High Contrast-modus moet tijdens de audit zijn ingeschakeld — dit toont of de systeemcontrastverhoging voldoende is om 7:1 te bereiken.

CSS prefers-contrast: webpagina's aanpassen aan systeemcontrast

De CSS-mediafunctie prefers-contrast stelt webpagina's in staat stijlen aan te passen aan de systeemcontrastinstelling van de gebruiker. De functie accepteert de waarden: no-preference (standaard), more (gebruiker heeft High Contrast ingeschakeld), less (gebruiker geeft de voorkeur aan verlaagd contrast) en custom (precieze instelling). Wordt sinds 2022 ondersteund door alle moderne browsers.

prefers-contrast: more — signaal voor de webontwikkelaar: verhoog de contrastverhouding van tekst, vervang doorschijnende achtergronden door ondoorzichtige, versterk randen van interactieve elementen en verwijder achtergrondafbeeldingen met laag contrast. iOS Safari en Android Chrome geven de waarde more door bij inschakeling van de systeem High Contrast-modus (Increase Contrast / High Contrast Text).

Voorbeeld van aanpassing via prefers-contrast

Bij prefers-contrast: more moet de webpagina het aantal kleuren minimaliseren en de voorkeur geven aan een zwart-witpalet met accentkleuren voor markeringen. Hieronder staat een voorbeeld van CSS-aanpassing met vervanging van kleuren, uitschakeling van doorschijnendheid en vergroting van randen.

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

/* Hoog contrast: 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; // Was #666 — nu zwart
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Was 0,4 — versterkt
    }
}

/* Verlaagd contrast: 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);
    }
}

In het CSS-voorbeeld bij prefers-contrast: more krijgt de kaart een ondoorzichtige witte achtergrond, een zwarte rand van 2px, wordt de tekst zwart (#000 in plaats van #333), de knop — donkerblauw met zwarte omtrek voor zichtbaarheid. Bij prefers-contrast: less (zeldzaam geval — gebruiker geeft de voorkeur aan zachte kleuren) wordt het contrast omgekeerd verlaagd.

Combineren met prefers-color-scheme

Voor volledige toegankelijkheidsaanpassing wordt prefers-contrast gecombineerd met prefers-color-scheme (lichte/donkere thema). Bij prefers-color-scheme: dark en prefers-contrast: more moeten kleuren wit op zwart zijn met felle accenten. Bij lichte thema — zwart op wit. De combinatie van deze mediafuncties geeft 4 combinaties die getest moeten worden voor volledige toegankelijkheidsdekking.