High Contrast mobilalkalmazásokban — mi ez, akadálymentesítés és kontrasztbeállítások

Mi az a High Contrast az akadálymentesítésben?

High Contrast egy megjelenítési mód, amelyben az operációs rendszer vagy alkalmazás növeli az előtér (szöveg, ikonok) és a háttér színe közötti különbséget. A normál szöveg minimális kontrasztaránya a WCAG AA szabvány szerint 4,5:1, a nagy szöveg esetében (18pt vagy 14pt bold-tól) — 3:1. A High Contrast mód 7:1-re és magasabbra növelheti az arányt, maximális felismerhetőséget biztosítva.

Ellentétben a háttér egyszerű sötétítésével vagy a szöveg világosításával, a High Contrast komplex módon működik: a felület színpalettáját egy korlátozott, magas kontrasztú színkészletre cseréli, körvonalakat ad az elemek köré, és eltávolítja az áttetszőséget. A mód csökkent látásélességgel, fényiszonyban és bizonyos színvaksági formákban szenvedők számára készült.

Három típusa van a High Contrast-nak: rendszer (az operációs rendszerben bekapcsolva, minden alkalmazásra hat), alkalmazás (beépített mód egy adott alkalmazáson belül) és web (CSS médiafunkció prefers-contrast). A rendszer High Contrast a legerősebb, mert felülírja a színeket még azokban az alkalmazásokban is, amelyek nem rendelkeznek saját akadálymentesítési támogatással.

Kinek van szüksége High Contrast-ra

A High Contrast fő felhasználói — szürkehályoggal (a lencse homályosodása, amely csökkenti a kontrasztérzékenységet), makuladegenerációval (centrális látásvesztés), glaukómával és diabéteszes retinopátiával élők. A mód erős napfényben végzett munka során is szükséges — a magas kontraszt kompenzálja a képernyő tükröződését. A WebAIM (2025) adatai szerint a weboldalak 86%-a rendelkezik a WCAG AA alatti kontrasztú szöveggel — a High Contrast a felhasználói oldalon részben korrigálja ezt a hibát.

Increase Contrast iOS-ben: beállítások és kontraszttípusok

iOS-ben az Increase Contrast funkció a Settings > Accessibility > Display & Text Size menüpontban található, és három független kapcsolót tartalmaz: Increase Contrast (általános növelés), Darken Colors (élénk színek sötétítése) és Reduce Transparency (áttetszőség csökkentése). Az Increase Contrast a fő kapcsoló, amely a szöveget, gombokat és rendszerelemek határvonalait érinti.

Technikailag az iOS az Increase Contrast-ot a tintColor és az UIVisualEffectView rétegen keresztül valósítja meg. Aktiváláskor a rendszer növeli az alpha értéket a sötét tónusokhoz és csökkenti a világosakhoz, 2–3 ponttal emelve az összes UI-elem kontrasztarányát. A Reduce Transparency az áttetsző háttereket (matricázott üveg effektus) átlátszatlan hátterekre cseréli, ami tovább javítja a szöveg olvashatóságát elmosódott háttereken.

Increase Contrast ellenőrzése iOS-alkalmazásban

A fejlesztő ellenőrizheti az Increase Contrast állapotát az UIAccessibility segítségével, és hozzáigazíthatja a színeket. Ha például a kontraszt növelve van, telítettebb akcentusszínek használhatók, ha nem — az alap 4,5:1 kontrasztarány biztosítása az alapértelmezett palettán keresztül. Az UIAccessibility.isReduceTransparencyEnabled az elmosódási effektusok kikapcsolásához is hasznos aktív módban.

import UIKit

class ContrastManager {

    // Az Increase Contrast állapotának ellenőrzése
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Reduce Transparency ellenőrzése
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Szín hozzáigazítása a kontrasztos módhoz
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Telítettebb kék aktív High Contrast esetén
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Háttérszín a Reduce Transparency figyelembevételével
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Átlátszatlan háttér
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Feliratkozás a változásokra
    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
        )
    }
}

// Használati példa: 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)
        ]
    }
}

A ContrastManager osztály hozzáférést biztosít az Increase Contrast állapotához az isDarkerSystemColorsEnabled segítségével, hozzáigazítja az akcentusszínt aktív módban, kikapcsolja a navigationBar áttetszőségét, és feliratkozik a kontrasztváltozásról szóló rendszerértesítésekre. Az UIKit automatikusan újrarajzolja az elemeket az UIAccessibility állapotának változásakor.

Dinamikus iOS-színek (UIColor Well) és kontraszt

Az iOS dinamikus UIColor színeket (systemBackground, label, secondaryLabel) biztosít, amelyek automatikusan alkalmazkodnak az Increase Contrast módhoz. Az Increase Contrast aktiválásakor a rendszerszínek megváltoztatják értékeiket: a label sötétebb (vagy sötét témában világosabb) lesz, a background elveszti áttetszőségét. A fejlesztőnek ajánlott dinamikus színeket használni az összes UI-elemhez, hogy ne ütközzön a rendszerkontraszttal.

High Contrast Text Androidban: sötét téma és kontraszt

Android-ban a High Contrast Text (Magas kontrasztú szöveg) funkció másképp működik, mint iOS-ben. A kontrasztarány fokozatos növelése helyett az Android fordított színsémát alkalmaz: sötét hátteret és fehér szöveget megnövelt vastagsággal. A mód különösen hatékony AMOLED kijelzőkön, ahol a fekete szín maximális kontrasztot ad. A beállítás a Beállítások > Kisegítő lehetőségek > Láthatóság javítása menüpontban található.

Android High Contrast Text két mechanizmust használ: a színpaletta felülírását theme overlay-en keresztül, és a ColorMatrix alkalmazását a bitmap-képek kontrasztjának növelésére. A rendszer elemzi az alkalmazás aktuális témáját (Light/Dark), és maximális kontrasztú overlay-t alkalmaz: fehér előteret (#FFFFFF) fekete háttéren (#000000). Az áttetsző elemek átlátszatlan alátétet kapnak.

High Contrast Text ellenőrzése Android API-n keresztül

A High Contrast Text állapotának ellenőrzéséhez Androidban az AccessibilityManager és a ContentResolver használható. Az API lehetővé teszi annak meghatározását, hogy a mód aktív-e, és a UI hozzáigazítását. A Jetpack Compose támogatja az igazítást a CompositionLocalProvider és a LocalContrast segítségével.

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 {

    // Ellenőrzés AccessibilityManager-en keresztül
    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" }
    }

    // Ellenőrzés globális beállításokon keresztül
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — színek a kontraszt figyelembevételével
    @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 rendszer: dinamikus színválasztó
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)
        }
    }
}

A HighContrastHelper osztály ellenőrzi a High Contrast aktivitását az AccessibilityManager-en és rendszerbeállításokon keresztül, hozzáigazítja a színeket Jetpack Compose-ban, és egyedi ContrastTextView-t biztosít a View rendszerhez. Androidban, ellentétben iOS-szel, nincs közvetlen értesítés a High Contrast változásához — a ContentObserver a Settings.System-en kötelező a dinamikus frissítéshez.

Material Design 3 és High Contrast

Material Design 3 (Material You) beépített támogatást tartalmaz a High Contrast-hoz a Dynamic Color segítségével. Aktív rendszermódban a Material 3 automatikusan kiválasztja a maximális tonális palettát: background = Neutral0, onBackground = Neutral100, primary = Primary100. A fejlesztőnek csak az MD3 komponenseket kell használnia — a rendszer átveszi a kontraszt hozzáigazítását.

WCAG contrast ratio: 4,5:1 és 3:1 szabványok

WCAG contrast ratio — két szín közötti fényesség matematikai aránya, amelyet a szöveg akadálymentesítésének értékelésére használnak. A szabvány két küszöböt határoz meg: 4,5:1 normál szöveghez (AA szint) és 3:1 nagy szöveghez (18px/14px bold-tól). Az AAA szinthez 7:1 szükséges normál és 4,5:1 nagy szöveghez. A High Contrast mód ideális esetben 7:1 és magasabb biztosítása.

A contrast ratio kiszámítása a következő képlettel történik: (L1 + 0,05) / (L2 + 0,05), ahol L1 — a világosabb szín relatív fényessége, L2 — a sötétebbé. A relatív fényesség az sRGB csatornákból súlyokkal számítható: 0,2126R + 0,7152G + 0,0722B. Az akadálymentesítési fejlesztő számára elegendő eszközöket használni: WebAIM Contrast Checker, Color Contrast Analyser vagy Accessibility Inspector az Xcode-ban.

WCAG 2.2 kontrasztküszöbök táblázata

Kontraszt ellenőrzése kódban

A contrast ratio automatikus ellenőrzéséhez webalkalmazásban JavaScript használható. Aktív High Contrast módban érdemes kiemelni azokat az elemeket, amelyek nem felelnek meg az AA szabványnak. Alább egy példa a relatív fényesség és a contrast ratio kiszámítására JavaScript-ben.

// Contrast ratio számítása WCAG 2.2 szerint
class ContrastChecker {

    // sRGB konvertálása lineáris térbe
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Relatív fényesség (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 két szín között
    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 szint ellenőrzése (4,5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // AAA szint ellenőrzése (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

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

A ContrastChecker osztály JavaScript-ben teljes körű contrast ratio számítást valósít meg a WCAG 2.2 szerint: sRGB konvertálása lineáris térbe, relatív fényesség kiszámítása Rec.709 súlyokkal, és összehasonlítás AA/AAA küszöbökkel. Az eszköz hasznos a színpaletta automatikus auditálásához High Contrast támogatással rendelkező webalkalmazások fejlesztésekor.

Kontraszt auditálása eszközökkel

A contrast ratio ellenőrzéséhez kész alkalmazásban használja az Accessibility Scannert (Android), az Xcode Accessibility Inspector-t (iOS) vagy az axe DevTools-t (web). Ezek az eszközök automatikusan megtalálják a WCAG AA alatti kontrasztú elemeket, és kiemelik azokat. A High Contrast módnak bekapcsolva kell lennie az audit során — ez megmutatja, hogy a rendszer kontrasztnövelése elegendő-e a 7:1 eléréséhez.

CSS prefers-contrast: weboldalak igazítása a rendszerkontraszthoz

A CSS médiafunkció prefers-contrast lehetővé teszi a weboldalak számára, hogy stílusukat a felhasználó rendszerkontraszt-beállításához igazítsák. A funkció a következő értékeket fogadja el: no-preference (alapértelmezett), more (a felhasználó bekapcsolta a High Contrast-ot), less (a felhasználó alacsony kontrasztot preferál) és custom (pontos beállítás). 2022 óta minden modern böngésző támogatja.

prefers-contrast: more — jelzés a webfejlesztő számára: növelje a szöveg kontrasztarányát, cserélje az áttetsző háttereket átlátszatlanra, erősítse meg az interaktív elemek határvonalait, és távolítsa el az alacsony kontrasztú háttérképeket. Az iOS Safari és az Android Chrome a more értéket továbbítja a rendszer High Contrast módjának (Increase Contrast / High Contrast Text) bekapcsolásakor.

Példa az igazításra prefers-contrast segítségével

prefers-contrast: more esetén a weboldalnak minimalizálnia kell a színek számát, és előnyben kell részesítenie a fekete-fehér palettát akcentusszínekkel a kiemelésekhez. Alább egy példa a CSS-igazításra színek cseréjével, áttetszőség kikapcsolásával és határvonalak növelésével.

/* Alap stílusok (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;
}

/* Magas kontraszt: 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; // #666 volt — most fekete
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // 0,4 volt — megerősítettük
    }
}

/* Alacsony kontraszt: 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);
    }
}

A CSS példában prefers-contrast: more esetén a kártya átlátszatlan fehér hátteret, 2px fekete határvonalat kap, a szöveg fekete lesz (#000 #333 helyett), a gomb — sötétkék fekete körvonallal a láthatóság érdekében. prefers-contrast: less (ritka eset — a felhasználó lágy színeket preferál) esetén a kontraszt fordítva csökken.

Kombinálás prefers-color-scheme-tel

A teljes akadálymentesítési igazításhoz a prefers-contrast-ot kombinálni kell a prefers-color-scheme-tel (világos/sötét téma). prefers-color-scheme: dark és prefers-contrast: more esetén a színeknek fehérnek kell lenniük feketén, élénk akcentusokkal. Világos téma esetén — feketének fehéren. E médiafunkciók kombinációja 4 kombinációt ad, amelyeket tesztelni kell a teljes akadálymentesítési lefedettséghez.