High Contrast в мобильных приложениях — что это, accessibility и настройки контрастности

Что такое High Contrast в accessibility?

High Contrast — это режим отображения, при котором операционная система или приложение увеличивает разницу между цветом переднего плана (текст, иконки) и фона. Минимальный contrast ratio для обычного текста по стандарту 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 для тёмных тонов и уменьшает для светлых, поднимая 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 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 — сигнал для веб-разработчика: увеличить 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.