Реалізація висококонтрастного режиму в мобільному додатку
Висококонтрастний режим — не те ж саме, що темна тема. Це режим для користувачів зі слабким зором, де контрастність тексту та елементів управління підвищується примусово: білий фон → чисто білий, сірий текст → чорний, підказки та декоративні елементи приховуються, границі стають чіткішими.
На iOS — Settings → Accessibility → Display & Text Size → Increase Contrast. На Android — Settings → Accessibility → High Contrast Text (лише текст) або High Contrast Mode (Samsung One UI).
Як реагувати на системний запит
iOS
UIAccessibility.isDarkerSystemColorsEnabled — перевіряє включений Increase Contrast. Змінюється в реальному часі; підписуємось на UIAccessibility.darkerSystemColorsStatusDidChangeNotification.
Система автоматично адаптує системні кольори (UIColor.label, UIColor.secondaryLabel) до High Contrast. Кастомні кольори з Asset Catalog підтримують High Contrast варіант: в .xcassets для кожного кольору є Appearances → High Contrast. Додаємо HC-варіант — та колір автоматично переключається без коду.
Для SwiftUI: @Environment(\.colorSchemeContrast) — повертає .standard або .increased. Використовуємо для умовного вибору кольору або ваги шрифту:
@Environment(\.colorSchemeContrast) var contrast
var textColor: Color {
contrast == .increased ? .black : .secondary
}
Android
Configuration.HIGHTEXT_ADJUSTMENT_UNSET vs встановлене значення — не працює як системний флаг High Contrast (на відміну від iOS). На Android «High Contrast Text» — це системний override, який Android застосовує поверх додатка: текст автоматично рисується з обводкою (text outline) для підвищення читаємості на будь-якому фоні. Це нельзя контролювати з додатка, але можна перевірити через AccessibilityManager.isHighTextContrastEnabled() (API 26+):
val am = getSystemService(AccessibilityManager::class.java)
val isHighContrast = am?.isHighTextContrastEnabled ?: false
Samsung One UI забезпечує повноцінний High Contrast Mode — там змінюються системні кольори. У Jetpack Compose isSystemInDarkTheme() не поймає HC на Samsung; потрібна перевірка через AccessibilityManager.
Flutter
MediaQuery.of(context).highContrast — true при включеному HC (iOS та Android). У ThemeData можна встановити окрему ColorScheme для HC:
ThemeData theme = MediaQuery.of(context).highContrast
? ThemeData(colorScheme: highContrastColorScheme)
: ThemeData(colorScheme: defaultColorScheme);
Що потрібно адаптувати
Колір тексту на фоні. WCAG 2.1 вимагає контрастність 4.5:1 для звичайного тексту та 3:1 для крупного (18pt+). У HC-режимі цільовий поріг — 7:1. Інструмент перевірки: Color Contrast Analyser (desktop) або Xcode Accessibility Inspector.
Тонкі границі та розділювачі. 1px лінії на білому фоні исчезают при HC. Потрібно збільшити товщину або змінити колір.
Градієнти та зображення як фон під текст. У HC текст поверх градієнта втрачає читаємість. Додаємо текстову підложку або убираємо градієнт у HC-режимі.
Тені та blur-ефекти. Frosted glass, UIVisualEffectView, BackdropFilter у Flutter — у HC не контрастні. Замінюємо на суцільний непрозорий фон.
Декоративні іконки. У HC убираємо іконки-украшення, залишаємо лише функціональні з достатньою контрастністю.
Термін: 1-3 дні. Залежить від кількості кастомних компонентів та від того, реалізована ли темна тема — вона часто стає основою для HC. Вартість розраховується індивідуально.