High Contrast у мобилним апликацијама — шта је то, accessibility и подешавања контраста

Шта је High Contrast у accessibility?

High Contrast је режим приказа у којем оперативни систем или апликација повећава разлику између боје предњег плана (текст, иконе) и позадине. Минимални однос контраста за обичан текст према стандарду WCAG AA износи 4,5:1, за велики текст (од 18pt или 14pt bold) — 3:1. High Contrast режим може повећати однос на 7:1 и више, обезбеђујући максималну видљивост.

За разлику од једноставног потамњивања позадине или осветљавања текста, High Contrast ради свеобухватно: замењује палету боја интерфејса ограниченим скупом висококонтрастних боја, додаје ивице око елемената и уклања провидност. Режим је намењен особама са смањеном оштрином вида, фотофобијом и неким облицима далтонизма.

Постоје три типа High Contrast: системски (укључен у ОС и утиче на све апликације), апликацијски (уграђени режим у оквиру појединачне апликације) и веб режим (CSS-медија-функција prefers-contrast). Системски High Contrast је најмоћнији, јер преписује боје чак и у оним апликацијама које немају сопствену подршку за accessibility.

Коме је потребан High Contrast

Главни корисници High Contrast-а — особе са катарактом (замућење сочива које смањује осетљивост на контраст), макуларном дегенерацијом (губитак централног вида), глаукомом и дијабетичком ретинопатијом. Такође, режим је неопходан при раду на јаком сунцу — високи контраст компензује одсјај на екрану. Према подацима WebAIM (2025), 86% веб-страница има текст са контрастом нижом од WCAG AA — High Contrast на страни корисника делимично исправља овај недостатак.

Increase Contrast у iOS-у: подешавања и врсте контраста

У iOS-у функција Increase Contrast се налази у Settings > Accessibility > Display & Text Size и укључује три независна прекидача: Increase Contrast (опште појачање), Darken Colors (потамњивање јарких боја) и Reduce Transparency (смањење провидности). Increase Contrast је главни прекидач који утиче на текст, дугмад и ивице системских елемената.

Технички, iOS реализује Increase Contrast кроз tintColor и слој UIVisualEffectView. При активацији, систем повећава вредност alpha за тамне тонове и смањује за светле, подижући однос контраста свих UI елемената за 2–3 поена. Reduce Transparency замењује провидне позадине (ефекат мат стакла) непровидним, што додатно побољшава читљивост текста на замућеним позадинама.

Провера Increase Contrast у iOS апликацији

Програмер може проверити стање Increase Contrast-а кроз UIAccessibility и прилагодити боје. На пример, ако је контраст повећан, могу се користити засићеније accent боје, а ако није — обезбедити основни однос контраста 4,5:1 кроз подразумевану палету. UIAccessibility.isReduceTransparencyEnabled је такође користан за искључивање blur ефеката при активном режиму.

import UIKit

class ContrastManager {

    // Провера стања Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Провера Reduce Transparency
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Прилагођавање боје контрастном режиму
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Засићенија плава при активном High Contrast-у
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Боја позадине узимајући у обзир Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Непровитна позадина
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Претплата на промене
    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
        )
    }
}

// Пример употребе: 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)
        ]
    }
}

Класа ContrastManager пружа приступ стању Increase Contrast кроз isDarkerSystemColorsEnabled, прилагођава accent боју при активном режиму, искључује провидност navigationBar-а и претплаћује се на системска обавештења о промени контраста. UIKit аутоматски прецртава елементе при промени UIAccessibility статуса.

Динамичке боје iOS (UIColor Well) и контраст

iOS пружа динамичке UIColor боје (systemBackground, label, secondaryLabel) које се аутоматски прилагођавају режиму Increase Contrast. При активацији Increase Contrast-а, системске боје мењају своје вредности: label постаје тамнији (или светлији у тамној теми), background губи провидност. Програмеру се препоручује да користи динамичке боје за све UI елементе како не би стварао конфликте са системским контрастом.

High Contrast Text у Android-у: тамна тема и контраст

У Android-у функција High Contrast Text (Текст са високим контрастом) ради другачије него у iOS-у. Уместо постепеног повећања односа контраста, Android примењује инверзну шему боја: тамну позадину и бели текст са повећаном дебљином. Режим је посебно ефикасан на AMOLED екранима, где црна боја даје максимални контраст. Подешавање се налази у Подешавања > Посебне могућности > Побољшања видљивости.

Android High Contrast Text користи два механизма: преписивање палете боја кроз theme overlay и наношење ColorMatrix за повећање контраста bitmap-слика. Систем анализира тренутну тему апликације (Light/Dark) и примењује overlay са максималним контрастом: бели предњи план (#FFFFFF) на црној позадини (#000000). Провидни елементи добијају непровидну подлогу.

Провера High Contrast Text кроз Android API

За проверу стања High Contrast Text-а у Android-у користи се AccessibilityManager и ContentResolver. API омогућава утврђивање да ли је режим активиран и прилагођавање UI-ја. Jetpack Compose подржава прилагођавање кроз CompositionLocalProvider и 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 {

    // Провера кроз 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" }
    }

    // Провера кроз глобална подешавања
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — боје узимајући у обзир контраст
    @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 систем: динамички селектор боје
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)
        }
    }
}

Класа HighContrastHelper проверава активност High Contrast-а кроз AccessibilityManager и системска подешавања, прилагођава боје у Jetpack Compose-у и пружа прилагођени ContrastTextView за View систем. У Android-у, за разлику од iOS-а, не постоји директно обавештење за промену High Contrast-а — ContentObserver на Settings.System је обавезан за динамичко ажурирање.

Material Design 3 и High Contrast

Material Design 3 (Material You) укључује уграђену подршку за High Contrast кроз Dynamic Color. При активном системском режиму, Material 3 аутоматски бира максималну тоналну палету: background = Neutral0, onBackground = Neutral100, primary = Primary100. Програмеру је довољно да користи MD3 компоненте — систем ће преузети прилагођавање контраста.

WCAG contrast ratio: стандарди 4,5:1 и 3:1

WCAG contrast ratio — математички однос осветљености између две боје који се користи за процену доступности текста. Стандард дефинише два прага: 4,5:1 за обичан текст (AA ниво) и 3:1 за велики текст (од 18px/14px bold). За AAA ниво је потребно 7:1 за обичан и 4,5:1 за велики текст. High Contrast режим у идеалном случају треба да обезбеди 7:1 и више.

Израчунавање contrast ratio-а врши се по формули: (L1 + 0,05) / (L2 + 0,05), где је L1 — релативна осветљеност светлије боје, L2 — тамније. Релативна осветљеност се израчунава из sRGB канала са тежинама: 0,2126R + 0,7152G + 0,0722B. За accessibility програмера довољно је користити алате: WebAIM Contrast Checker, Color Contrast Analyser или Accessibility Inspector у Xcode-у.

Таблица прагова контраста WCAG 2.2

Провера контраста у коду

За аутоматску проверу contrast ratio-а у веб апликацији може се користити JavaScript. При активном High Contrast режиму пожељно је истаћи елементе који не одговарају AA стандарду. Испод је дат пример израчунавања релативне осветљености и contrast ratio-а у JavaScript-у.

// Израчунавање contrast ratio-а по WCAG 2.2
class ContrastChecker {

    // Конверзија sRGB у линеарни простор
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Релативна осветљеност (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 између две боје
    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 нивоа (4,5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // Провера AAA нивоа (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// Употреба
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → 13,2:1 (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (2,8:1)

Класа ContrastChecker у JavaScript-у реализује потпуно израчунавање contrast ratio-а према WCAG 2.2: конверзија sRGB у линеарни простор, израчунавање релативне осветљености са Rec.709 тежинама и поређење са AA/AAA праговима. Алат је користан за аутоматски ревизију палете боја при развоју веб апликација са подршком за High Contrast.

Ревизија контраста алатима

За проверу contrast ratio-а у готовој апликацији користите Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) или axe DevTools (веб). Ови алати аутоматски проналазе елементе са контрастом испод WCAG AA и истичу их. High Contrast режим треба да буде укључен током ревизије — ово ће показати да ли је системско повећање контраста довољно за постизање 7:1.

CSS prefers-contrast: прилагођавање веб-страница системском контрасту

CSS-медија-функција prefers-contrast омогућава веб-страницама да прилагоде стилове у зависности од системског подешавања контраста корисника. Функција прихвата вредности: no-preference (подразумевано), more (корисник је укључио High Contrast), less (корисник преферира смањени контраст) и custom (прецизно подешавање). Подржана је од свих модерних прегледача од 2022. године.

prefers-contrast: more — сигнал за веб програмера: повећати однос контраста текста, заменити провидне позадине непровидним, ојачати ивице интерактивних елемената и уклонити позадинске слике са ниским контрастом. iOS Safari и Android Chrome преносе вредност more при укључивању системског High Contrast режима (Increase Contrast / High Contrast Text).

Пример прилагођавања кроз prefers-contrast

При prefers-contrast: more веб-страница треба да минимизира број боја и да предност да црно-белој палети са accent бојама за истакнуте елементе. Испод је дат пример CSS прилагођавања са заменом боја, искључивањем провидности и повећањем ивица.

/* Основни стилови (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;
}

/* Високи контраст: 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 — сада црно
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Било 0,4 — појачали смо
    }
}

/* Смањени контраст: 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);
    }
}

У примеру CSS-а при prefers-contrast: more картица добија непровидну белу позадину, црну ивицу од 2px, текст постаје црн (#000 уместо #333), дугме — тамноплаво са црним обрубом за уочљивост. При prefers-contrast: less (редак случај — корисник преферира меке боје) контраст се обрнуто смањује.

Комбиновање са prefers-color-scheme

За потпуно прилагођавање accessibility prefers-contrast се комбинује са prefers-color-scheme (светла/тамна тема). При prefers-color-scheme: dark и prefers-contrast: more боје треба да буду беле на црној са светлим акцентима. При светлом теми — црне на белој. Комбинација ових медија-функција даје 4 комбинације које треба тестирати за потпуно покриће accessibility.