High Contrast у мобільних додатках — що це, доступність і налаштування контрастності

Що таке High Contrast у доступності?

High Contrast — це режим відображення, при якому операційна система або додаток збільшує різницю між кольором переднього плану (текст, іконки) та фону. Мінімальний contrast ratio для звичайного тексту за стандартом WCAG AA становить 4.5:1, для великого тексту (від 18pt або 14pt жирного) — 3:1. Режим High Contrast може збільшувати співвідношення до 7:1 і вище, забезпечуючи максимальну розрізненість.

На відміну від простого затемнення фону або освітлення тексту, High Contrast працює комплексно: замінює кольорову палітру інтерфейсу на обмежений набір висококонтрастних кольорів, додає обведення навколо елементів та прибирає напівпрозорість. Режим призначений для людей зі зниженою гостротою зору, світлобоязню та деякими формами кольорової сліпоти.

Існує три типи High Contrast: системний (ввімкнений в ОС і впливає на всі додатки), додатка (вбудований режим всередині окремого додатка) та веб-режим (CSS медіа-функція prefers-contrast). Системний High Contrast — найпотужніший, оскільки перевизначає кольори навіть у тих додатках, які не мають власної підтримки доступності.

Кому потрібен 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 для темних тонів і зменшує для світлих, піднімаючи contrast ratio всіх UI-елементів на 2–3 пункти. Reduce Transparency замінює напівпрозорі фони (ефект матового скла) на непрозорі, що додатково підвищує читабельність тексту на розмитих підкладках.

Перевірка Increase Contrast в iOS-додатку

Розробник може перевірити стан Increase Contrast через UIAccessibility та адаптувати кольори. Наприклад, якщо контрастність підвищена, можна використовувати більш насичені accent-кольори, а якщо ні — забезпечити базовий contrast ratio 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. Замість плавного підвищення contrast ratio Android застосовує інверсну кольорову схему: темний фон і білий текст із збільшеною жирністю. Режим особливо ефективний на AMOLED-дисплеях, де чорний колір дає максимальний контраст. Налаштування знаходиться в Налаштуваннях > Спеціальні можливості > Покращення видимості.

Android High Contrast Text використовує два механізми: перевизначення кольорової палітри через theme overlay та накладання ColorMatrix для збільшення контрастності bitmap-зображень. Система аналізує поточну тему додатка (Light/Dark) та застосовує overlay з максимальним контрастом: white foreground (#FFFFFF) на black background (#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, немає прямого Notification для зміни High Contrast — ContentObserver на Settings.System обов'язковий для динамічного оновлення.

Material Design 3 та High Contrast

Material Design 3 (Material You) включає вбудовану підтримку High Contrast через Dynamic Color. При активному системному режимі Material 3 автоматично вибирає максимальну tonal palette: 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 жирного). Для 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 — сигнал для веб-розробника: збільшити contrast ratio тексту, замінити напівпрозорі фони на непрозорі, посилити межі інтерактивних елементів та прибрати фонові зображення з низьким контрастом. 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.