High Contrast in Mobile Apps — What It Is, Accessibility, and Contrast Settings

What Is High Contrast in Accessibility?

High Contrast is a display mode in which the operating system or application increases the difference between foreground color (text, icons) and background. The minimum contrast ratio for normal text under the WCAG AA standard is 4.5:1, and for large text (from 18pt or 14pt bold) — 3:1. High Contrast mode can increase the ratio to 7:1 and higher, ensuring maximum readability.

Unlike simply darkening the background or lightening the text, High Contrast works comprehensively: it replaces the interface color palette with a limited set of high-contrast colors, adds strokes around elements, and removes transparency. This mode is designed for people with reduced visual acuity, photophobia, and certain forms of color blindness.

There are three types of High Contrast: system-level (enabled in the OS and affects all applications), in-app (built-in mode within a specific application), and web mode (CSS media feature prefers-contrast). System-level High Contrast is the most powerful, as it overrides colors even in applications that do not have their own accessibility support.

Who Needs High Contrast

The main users of High Contrast are people with cataracts (clouding of the lens that reduces contrast sensitivity), macular degeneration (loss of central vision), glaucoma, and diabetic retinopathy. This mode is also necessary when working in bright sunlight — high contrast compensates for screen glare. According to WebAIM (2025), 86% of web pages have text with contrast below WCAG AA — High Contrast on the user side partially corrects this defect.

Increase Contrast in iOS: Settings and Contrast Types

In iOS, the Increase Contrast feature is located in Settings > Accessibility > Display & Text Size and includes three independent switches: Increase Contrast (general enhancement), Darken Colors (darkening bright colors), and Reduce Transparency (reducing transparency). Increase Contrast is the main switch, affecting text, buttons, and borders of system elements.

Technically, iOS implements Increase Contrast through tintColor and the UIVisualEffectView layer. When activated, the system increases the alpha value for dark tones and decreases it for light tones, raising the contrast ratio of all UI elements by 2–3 points. Reduce Transparency replaces semi-transparent backgrounds (frosted glass effect) with opaque ones, which further improves text readability on blurred backgrounds.

Checking Increase Contrast in an iOS App

A developer can check the state of Increase Contrast through UIAccessibility and adapt colors accordingly. For example, if contrast is increased, more saturated accent colors can be used, and if not, a baseline contrast ratio of 4.5:1 should be ensured through the default palette. UIAccessibility.isReduceTransparencyEnabled is also useful for disabling blur effects when the mode is active.

import UIKit

class ContrastManager {

    // Checking Increase Contrast State
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Checking Reduce Transparency
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Adapting Color for Contrast Mode
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // More Saturated Blue When High Contrast Is Active
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Background Color Considering Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Opaque Background
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Subscribing to Changes
    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
        )
    }
}

// Usage Example: 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)
        ]
    }
}

The ContrastManager class provides access to the Increase Contrast state through isDarkerSystemColorsEnabled, adapts the accent color when the mode is active, disables navigationBar transparency, and subscribes to system notifications about contrast changes. UIKit automatically redraws elements when the UIAccessibility status changes.

Dynamic iOS Colors (UIColor Well) and Contrast

iOS provides dynamic UIColor colors (systemBackground, label, secondaryLabel) that automatically adapt to the Increase Contrast mode. When Increase Contrast is activated, system colors change their values: label becomes darker (or lighter in dark mode), background loses transparency. Developers are encouraged to use dynamic colors for all UI elements to avoid conflicts with system contrast.

High Contrast Text in Android: Dark Theme and Contrast

In Android, the High Contrast Text feature works differently than in iOS. Instead of smoothly increasing the contrast ratio, Android applies an inverted color scheme: dark background and white text with increased boldness. This mode is especially effective on AMOLED displays, where black provides maximum contrast. The setting is located in Settings > Accessibility > Visibility enhancements.

Android High Contrast Text uses two mechanisms: overriding the color palette through a theme overlay and applying a ColorMatrix to increase the contrast of bitmap images. The system analyzes the current application theme (Light/Dark) and applies an overlay with maximum contrast: white foreground (#FFFFFF) on black background (#000000). Semi-transparent elements receive an opaque background.

Checking High Contrast Text via Android API

To check the state of High Contrast Text in Android, use AccessibilityManager and ContentResolver. The API allows you to determine whether the mode is active and adapt the UI. Jetpack Compose supports adaptation through CompositionLocalProvider and 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 {

    // Check via 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" }
    }

    // Check via Global Settings
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — Colors Considering Contrast
    @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 System: Dynamic Color Selector
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)
        }
    }
}

The HighContrastHelper class checks whether High Contrast is active through AccessibilityManager and system settings, adapts colors in Jetpack Compose, and provides a custom ContrastTextView for the View system. In Android, unlike iOS, there is no direct Notification for High Contrast changes — ContentObserver on Settings.System is required for dynamic updates.

Material Design 3 and High Contrast

Material Design 3 (Material You) includes built-in High Contrast support through Dynamic Color. When the system mode is active, Material 3 automatically selects the maximum tonal palette: background = Neutral0, onBackground = Neutral100, primary = Primary100. Developers just need to use MD3 components — the system handles contrast adaptation automatically.

WCAG Contrast Ratio: 4.5:1 and 3:1 Standards

WCAG contrast ratio is a mathematical ratio of luminance between two colors, used to assess text accessibility. The standard defines two thresholds: 4.5:1 for normal text (AA level) and 3:1 for large text (from 18px/14px bold). For AAA level, 7:1 is required for normal text and 4.5:1 for large text. High Contrast mode should ideally provide 7:1 and higher.

The contrast ratio calculation is performed using the formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated from sRGB channels with weights: 0.2126R + 0.7152G + 0.0722B. For accessibility developers, it is sufficient to use tools like WebAIM Contrast Checker, Color Contrast Analyser, or Accessibility Inspector in Xcode.

WCAG 2.2 Contrast Threshold Table

Checking Contrast in Code

For automatic contrast ratio checking in a web application, you can use JavaScript. When the High Contrast mode is active, it is advisable to highlight elements that do not meet the AA standard. Below is an example of calculating relative luminance and contrast ratio in JavaScript.

// Calculating Contrast Ratio per WCAG 2.2
class ContrastChecker {

    // Converting sRGB to Linear Space
    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 Between Two Colors
    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
    }

    // Checking AA Level (4.5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // Checking AAA Level (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// Usage
const checker = new ContrastChecker()
console.log(checker.getContrastRatio("#333333", "#FFFFFF"))
// → 13.2:1 (AAA)
console.log(checker.passesAA("#999999", "#FFFFFF"))
// → false (2.8:1)

The ContrastChecker class in JavaScript implements a full contrast ratio calculation per WCAG 2.2: converting sRGB to linear space, computing relative luminance with Rec.709 weights, and comparing against AA/AAA thresholds. This tool is useful for automated color palette auditing when developing web applications with High Contrast support.

Contrast Auditing Tools

To check the contrast ratio in a finished application, use Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS), or axe DevTools (web). These tools automatically find elements with contrast below WCAG AA and highlight them. The High Contrast mode should be enabled during the audit — this will show whether the system's contrast enhancement is sufficient to achieve 7:1.

CSS prefers-contrast: Adapting Web Pages to System Contrast

The CSS media feature prefers-contrast allows web pages to adapt styles based on the user's system contrast setting. The feature accepts the values: no-preference (default), more (user has enabled High Contrast), less (user prefers reduced contrast), and custom (fine-tuning). It is supported by all modern browsers since 2022.

prefers-contrast: more — a signal for web developers: increase text contrast ratio, replace semi-transparent backgrounds with opaque ones, enhance interactive element borders, and remove low-contrast background images. iOS Safari and Android Chrome pass the value more when the system High Contrast mode (Increase Contrast / High Contrast Text) is enabled.

Adaptation Example Using prefers-contrast

When prefers-contrast: more is active, the web page should minimize the number of colors and prefer a black-and-white palette with accent colors for highlights. Below is an example of CSS adaptation with color replacement, transparency removal, and border enhancement.

/* Base Styles (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;
}

/* High Contrast: 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; // Was #666 — now black
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Was 0.4 — increased
    }
}

/* Reduced Contrast: 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);
    }
}

In the CSS example under prefers-contrast: more, the card gets an opaque white background, a 2px black border, text becomes black (#000 instead of #333), and the button becomes dark blue with a black outline for visibility. Under prefers-contrast: less (a rare case — the user prefers soft colors), contrast is reduced instead.

Combining with prefers-color-scheme

For full accessibility adaptation, prefers-contrast is combined with prefers-color-scheme (light/dark theme). When prefers-color-scheme: dark and prefers-contrast: more are both active, colors should be white on black with bright accents. In light mode — black on white. The combination of these media features yields 4 combinations that need to be tested for full accessibility coverage.