Implementing High-Contrast Mode in Mobile Applications
High-contrast mode is not the same as dark theme. It's a mode for users with low vision where contrast is forcibly increased: white background → pure white, gray text → black, hints and decorative elements hidden, borders sharper.
On iOS — Settings → Accessibility → Display & Text Size → Increase Contrast. On Android — Settings → Accessibility → High Contrast Text (text only) or High Contrast Mode (Samsung One UI).
How to Respond to System Request
iOS
UIAccessibility.isDarkerSystemColorsEnabled — checks if Increase Contrast is enabled. Changes in real time; subscribe to UIAccessibility.darkerSystemColorsStatusDidChangeNotification.
System automatically adapts system colors (UIColor.label, UIColor.secondaryLabel) to High Contrast. Custom colors from Asset Catalog support High Contrast variant: in .xcassets each color has Appearances → High Contrast. Add HC-variant — color automatically switches without code.
For SwiftUI: @Environment(\.colorSchemeContrast) — returns .standard or .increased. Use for conditional color or font weight selection:
@Environment(\.colorSchemeContrast) var contrast
var textColor: Color {
contrast == .increased ? .black : .secondary
}
Android
Configuration.HIGHTEXT_ADJUSTMENT_UNSET vs set value — doesn't work as High Contrast system flag (unlike iOS). On Android "High Contrast Text" is system override applied over app: text automatically renders with outline for readability on any background. Can't control from app, but can check via AccessibilityManager.isHighTextContrastEnabled() (API 26+):
val am = getSystemService(AccessibilityManager::class.java)
val isHighContrast = am?.isHighTextContrastEnabled ?: false
Samsung One UI provides full High Contrast Mode — changes system colors. In Jetpack Compose isSystemInDarkTheme() won't catch HC on Samsung; need check via AccessibilityManager.
Flutter
MediaQuery.of(context).highContrast — true when HC enabled (iOS and Android). In ThemeData can set separate ColorScheme for HC:
ThemeData theme = MediaQuery.of(context).highContrast
? ThemeData(colorScheme: highContrastColorScheme)
: ThemeData(colorScheme: defaultColorScheme);
What Needs Adaptation
Text color on background. WCAG 2.1 requires 4.5:1 contrast for normal text and 3:1 for large (18pt+). In HC-mode target threshold — 7:1. Checking tool: Color Contrast Analyser (desktop) or Xcode Accessibility Inspector.
Thin borders and dividers. 1px lines on white background disappear at HC. Need to increase thickness or change color.
Gradients and images as background under text. In HC text over gradient loses readability. Add text backing or remove gradient in HC-mode.
Shadows and blur effects. Frosted glass, UIVisualEffectView, BackdropFilter in Flutter — not contrasted in HC. Replace with solid opaque background.
Decorative icons. In HC remove decoration icons, keep only functional ones with sufficient contrast.
Timeframe: 1-3 days. Depends on number of custom components and whether dark theme exists — often becomes HC basis. Cost calculated individually.