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.