High Contrast i mobilappar — vad är det, tillgänglighet och kontrastinställningar

Vad är High Contrast inom tillgänglighet?

High Contrast är ett visningsläge där operativsystemet eller applikationen ökar skillnaden mellan förgrundsfärgen (text, ikoner) och bakgrunden. Minsta kontrastförhållande för vanlig text enligt WCAG AA-standarden är 4,5:1, för stor text (från 18pt eller 14pt bold) — 3:1. High Contrast-läget kan öka förhållandet till 7:1 och högre, vilket ger maximal urskiljbarhet.

Till skillnad från enkel mörkläggning av bakgrunden eller ljusning av text, fungerar High Contrast omfattande: det ersätter gränssnittets färgpalett med en begränsad uppsättning högkontrastfärger, lägger till konturer runt element och tar bort genomskinlighet. Läget är avsett för personer med nedsatt synskärpa, ljuskänslighet och vissa former av färgblindhet.

Det finns tre typer av High Contrast: system (aktiverat i operativsystemet och påverkar alla applikationer), applikation (inbyggt läge inom en enskild applikation) och webb (CSS-mediafunktionen prefers-contrast). Systemets High Contrast är det kraftfullaste eftersom det åsidosätter färger även i applikationer som inte har eget tillgänglighetsstöd.

Vem behöver High Contrast

De främsta användarna av High Contrast — personer med grå starr (grumling av linsen som minskar kontrastkänsligheten), makuladegeneration (förlust av centralt seende), glaukom och diabetisk retinopati. Läget är också nödvändigt vid arbete i starkt solljus — hög kontrast kompenserar för bländning på skärmen. Enligt WebAIM (2025) har 86% av webbsidorna text med kontrast under WCAG AA — High Contrast på användarsidan korrigerar delvis denna brist.

Increase Contrast i iOS: inställningar och typer av kontrast

I iOS finns funktionen Increase Contrast under Settings > Accessibility > Display & Text Size och innehåller tre oberoende omkopplare: Increase Contrast (allmän förstärkning), Darken Colors (mörkläggning av ljusa färger) och Reduce Transparency (minskning av genomskinlighet). Increase Contrast är huvudomkopplaren som påverkar text, knappar och kanter på systemelement.

Tekniskt implementerar iOS Increase Contrast via tintColor och lagret UIVisualEffectView. Vid aktivering ökar systemet alfavärdet för mörka toner och minskar det för ljusa, vilket höjer kontrastförhållandet för alla UI-element med 2–3 punkter. Reduce Transparency ersätter genomskinliga bakgrunder (frostad glaseffekt) med ogenomskinliga bakgrunder, vilket ytterligare förbättrar läsbarheten av text på suddiga bakgrunder.

Kontroll av Increase Contrast i iOS-app

Utvecklaren kan kontrollera status för Increase Contrast via UIAccessibility och anpassa färger. Om kontrasten till exempel är ökad kan mer mättade accentfärger användas, och om inte — säkerställa ett basalt kontrastförhållande på 4,5:1 via standardpaletten. UIAccessibility.isReduceTransparencyEnabled är också användbar för att inaktivera oskärpeeffekter i aktivt läge.

import UIKit

class ContrastManager {

    // Kontroll av Increase Contrast-status
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

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

    // Anpassning av färg till kontrastläge
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Mer mättad blå vid aktivt High Contrast
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Bakgrundsfärg med hänsyn till Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Ogenomskinlig bakgrund
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Prenumeration på ändringar
    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
        )
    }
}

// Användningsexempel: 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)
        ]
    }
}

Klassen ContrastManager ger tillgång till status för Increase Contrast via isDarkerSystemColorsEnabled, anpassar accentfärgen i aktivt läge, inaktiverar genomskinlighet i navigationBar och prenumererar på systemmeddelanden om kontrastförändringar. UIKit ritar automatiskt om element vid ändring av UIAccessibility-status.

Dynamiska iOS-färger (UIColor Well) och kontrast

iOS tillhandahåller dynamiska UIColor-färger (systemBackground, label, secondaryLabel) som automatiskt anpassar sig till Increase Contrast-läget. Vid aktivering av Increase Contrast ändrar systemfärgerna sina värden: label blir mörkare (eller ljusare i mörkt tema), background förlorar sin genomskinlighet. Utvecklaren rekommenderas att använda dynamiska färger för alla UI-element för att inte skapa konflikter med systemkontrasten.

High Contrast Text i Android: mörkt tema och kontrast

I Android fungerar funktionen High Contrast Text (Text med hög kontrast) annorlunda än i iOS. Istället för gradvis ökning av kontrastförhållandet tillämpar Android ett omvänt färgschema: mörk bakgrund och vit text med ökad tjocklek. Läget är särskilt effektivt på AMOLED-skärmar, där svart färg ger maximal kontrast. Inställningen finns under Inställningar > Tillgänglighet > Synförbättringar.

Android High Contrast Text använder två mekanismer: åsidosättande av färgpaletten via theme overlay och tillämpning av ColorMatrix för att öka kontrasten i bitmappsbilder. Systemet analyserar applikationens aktuella tema (Light/Dark) och tillämpar en överläggning med maximal kontrast: vit förgrund (#FFFFFF) på svart bakgrund (#000000). Genomskinliga element får en ogenomskinlig underlag.

Kontroll av High Contrast Text via Android API

För att kontrollera status för High Contrast Text i Android används AccessibilityManager och ContentResolver. API:t gör det möjligt att avgöra om läget är aktivt och anpassa UI:t. Jetpack Compose stöder anpassning via CompositionLocalProvider och 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 {

    // Kontroll 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" }
    }

    // Kontroll via globala inställningar
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — färger med hänsyn till 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-system: dynamisk färgväljare
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)
        }
    }
}

Klassen HighContrastHelper kontrollerar High Contrast-aktivitet via AccessibilityManager och systeminställningar, anpassar färger i Jetpack Compose och tillhandahåller en anpassad ContrastTextView för View-systemet. I Android finns det, till skillnad från iOS, inget direkt meddelande för ändring av High Contrast — ContentObserver på Settings.System är obligatorisk för dynamisk uppdatering.

Material Design 3 och High Contrast

Material Design 3 (Material You) innehåller inbyggt stöd för High Contrast via Dynamic Color. Vid aktivt systemläge väljer Material 3 automatiskt den maximala tonala paletten: background = Neutral0, onBackground = Neutral100, primary = Primary100. Utvecklaren behöver bara använda MD3-komponenter — systemet tar hand om kontrastanpassningen.

WCAG contrast ratio: standarderna 4,5:1 och 3:1

WCAG contrast ratio — matematiskt ljushetsförhållande mellan två färger som används för att bedöma textens tillgänglighet. Standarden definierar två tröskelvärden: 4,5:1 för vanlig text (AA-nivå) och 3:1 för stor text (från 18px/14px bold). För AAA-nivå krävs 7:1 för vanlig och 4,5:1 för stor text. High Contrast-läget bör idealt sett ge 7:1 och högre.

Beräkningen av contrast ratio görs med formeln: (L1 + 0,05) / (L2 + 0,05), där L1 — relativ ljushet för den ljusare färgen, L2 — den mörkare. Relativ ljushet beräknas från sRGB-kanaler med vikter: 0,2126R + 0,7152G + 0,0722B. För tillgänglighetsutvecklaren räcker det att använda verktyg: WebAIM Contrast Checker, Color Contrast Analyser eller Accessibility Inspector i Xcode.

Tabell över kontrasttrösklar WCAG 2.2

Kontroll av kontrast i kod

För automatisk kontroll av contrast ratio i en webbapplikation kan JavaScript användas. Vid aktivt High Contrast-läge är det önskvärt att markera element som inte uppfyller AA-standarden. Nedan ges ett exempel på beräkning av relativ ljushet och contrast ratio i JavaScript.

// Beräkning av contrast ratio enligt WCAG 2.2
class ContrastChecker {

    // Konvertering av sRGB till linjärt rum
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Relativ ljushet (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 mellan två färger
    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
    }

    // Kontroll av AA-nivå (4,5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // Kontroll av AAA-nivå (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

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

Klassen ContrastChecker i JavaScript implementerar fullständig beräkning av contrast ratio enligt WCAG 2.2: konvertering av sRGB till linjärt rum, beräkning av relativ ljushet med Rec.709-vikter och jämförelse med AA/AAA-trösklar. Verktyget är användbart för automatisk granskning av färgpaletten vid utveckling av webbapplikationer med stöd för High Contrast.

Kontrastgranskning med verktyg

För att kontrollera contrast ratio i en färdig applikation, använd Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) eller axe DevTools (webb). Dessa verktyg hittar automatiskt element med kontrast under WCAG AA och markerar dem. High Contrast-läget bör vara aktiverat under granskningen — detta visar om systemets kontrastökning är tillräcklig för att uppnå 7:1.

CSS prefers-contrast: anpassning av webbsidor till systemkontrast

CSS-mediafunktionen prefers-contrast gör det möjligt för webbsidor att anpassa stilar beroende på användarens systemkontrastinställning. Funktionen accepterar värdena: no-preference (standard), more (användaren har aktiverat High Contrast), less (användaren föredrar lägre kontrast) och custom (exakt inställning). Stöds av alla moderna webbläsare sedan 2022.

prefers-contrast: more — signal för webbutvecklaren: öka textens kontrastförhållande, ersätt genomskinliga bakgrunder med ogenomskinliga, förstärk kanter på interaktiva element och ta bort bakgrundsbilder med låg kontrast. iOS Safari och Android Chrome skickar värdet more när systemets High Contrast-läge (Increase Contrast / High Contrast Text) aktiveras.

Exempel på anpassning via prefers-contrast

Vid prefers-contrast: more bör webbsidan minimera antalet färger och föredra en svartvit palett med accentfärger för betoningar. Nedan ges ett exempel på CSS-anpassning med färgbyte, inaktivering av genomskinlighet och ökning av kanter.

/* Grundläggande stilar (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;
}

/* Hög 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; // Var #666 — nu svart
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Var 0,4 — förstärkte
    }
}

/* Låg 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);
    }
}

I CSS-exemplet vid prefers-contrast: more får kortet en ogenomskinlig vit bakgrund, svart kant på 2px, texten blir svart (#000 istället för #333), knappen — mörkblå med svart kontur för synlighet. Vid prefers-contrast: less (sällsynt fall — användaren föredrar mjuka färger) minskas kontrasten omvänt.

Kombination med prefers-color-scheme

För fullständig tillgänglighetsanpassning kombineras prefers-contrast med prefers-color-scheme (ljust/mörkt tema). Vid prefers-color-scheme: dark och prefers-contrast: more bör färgerna vara vita på svart med ljusa accenter. Vid ljust tema — svart på vitt. Kombinationen av dessa mediafunktioner ger 4 kombinationer som måste testas för fullständig tillgänglighetstäckning.