High Contrast nelle App Mobili — Cos'è, Accessibilità e Impostazioni di Contrasto

Cos'è l'High Contrast nell'Accessibilità?

High Contrast è una modalità di visualizzazione in cui il sistema operativo o l'applicazione aumenta la differenza tra il colore del primo piano (testo, icone) e lo sfondo. Il rapporto di contrasto minimo per il testo normale secondo lo standard WCAG AA è 4.5:1, e per il testo grande (da 18pt o 14pt grassetto) — 3:1. La modalità High Contrast può aumentare il rapporto fino a 7:1 e oltre, garantendo la massima leggibilità.

A differenza del semplice scurimento dello sfondo o schiarimento del testo, High Contrast funziona in modo completo: sostituisce la tavolozza dei colori dell'interfaccia con un insieme limitato di colori ad alto contrasto, aggiunge contorni attorno agli elementi e rimuove la trasparenza. Questa modalità è progettata per persone con acuità visiva ridotta, fotofobia e alcune forme di daltonismo.

Esistono tre tipi di High Contrast: a livello di sistema (attivato nel sistema operativo e influisce su tutte le applicazioni), nell'app (modalità integrata all'interno di un'applicazione specifica) e modalità web (funzione multimediale CSS prefers-contrast). L'High Contrast a livello di sistema è il più potente, poiché sovrascrive i colori anche nelle applicazioni che non dispongono di un proprio supporto per l'accessibilità.

Chi ha bisogno dell'High Contrast

Gli utenti principali dell'High Contrast sono persone con cataratta (opacizzazione del cristallino che riduce la sensibilità al contrasto), degenerazione maculare (perdita della visione centrale), glaucoma e retinopatia diabetica. Questa modalità è necessaria anche quando si lavora sotto luce solare intensa — l'alto contrasto compensa l'abbagliamento dello schermo. Secondo WebAIM (2025), l'86% delle pagine web hanno testo con contrasto inferiore a WCAG AA — l'High Contrast lato utente corregge parzialmente questo difetto.

Increase Contrast su iOS: Impostazioni e Tipi di Contrasto

Su iOS, la funzione Increase Contrast si trova in Settings > Accessibility > Display & Text Size e include tre interruttori indipendenti: Increase Contrast (miglioramento generale), Darken Colors (scurire i colori vivaci) e Reduce Transparency (ridurre la trasparenza). Increase Contrast è l'interruttore principale, che influisce su testo, pulsanti e bordi degli elementi di sistema.

Tecnicamente, iOS implementa Increase Contrast tramite tintColor e il layer UIVisualEffectView. Quando attivato, il sistema aumenta il valore alfa per i toni scuri e lo diminuisce per quelli chiari, alzando il rapporto di contrasto di tutti gli elementi dell'interfaccia di 2–3 punti. Reduce Transparency sostituisce gli sfondi semitrasparenti (effetto vetro smerigliato) con opachi, migliorando ulteriormente la leggibilità del testo su sfondi sfocati.

Verificare Increase Contrast in un'app iOS

Uno sviluppatore può verificare lo stato di Increase Contrast tramite UIAccessibility e adattare i colori di conseguenza. Ad esempio, se il contrasto è aumentato, è possibile utilizzare colori d'accento più saturi; in caso contrario, è necessario garantire un rapporto di contrasto di base di 4.5:1 attraverso la tavolozza predefinita. UIAccessibility.isReduceTransparencyEnabled è utile anche per disabilitare gli effetti di sfocatura quando la modalità è attiva.

import UIKit

class ContrastManager {

    // Verificare lo stato di Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

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

    // Adattare il colore alla modalità di contrasto
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Blu più saturo quando High Contrast è attivo
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Colore di sfondo considerando Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Sfondo opaco
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // Abbonarsi ai cambiamenti
    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
        )
    }
}

// Esempio di utilizzo: 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)
        ]
    }
}

La classe ContrastManager fornisce accesso allo stato di Increase Contrast tramite isDarkerSystemColorsEnabled, adatta il colore d'accento quando la modalità è attiva, disabilita la trasparenza della barra di navigazione e si abbona alle notifiche di sistema sui cambiamenti di contrasto. UIKit ridisegna automaticamente gli elementi quando lo stato UIAccessibility cambia.

Colori dinamici iOS (UIColor Well) e Contrasto

iOS fornisce colori UIColor dinamici (systemBackground, label, secondaryLabel) che si adattano automaticamente alla modalità Increase Contrast. Quando Increase Contrast viene attivato, i colori di sistema cambiano i loro valori: label diventa più scuro (o più chiaro in modalità scura), lo sfondo perde trasparenza. Gli sviluppatori sono incoraggiati a utilizzare colori dinamici per tutti gli elementi dell'interfaccia per evitare conflitti con il contrasto di sistema.

High Contrast Text su Android: Tema Scuro e Contrasto

Su Android, la funzione High Contrast Text funziona diversamente rispetto a iOS. Invece di aumentare gradualmente il rapporto di contrasto, Android applica uno schema di colori invertito: sfondo scuro e testo bianco con maggiore grassetto. Questa modalità è particolarmente efficace sui display AMOLED, dove il nero offre il massimo contrasto. L'impostazione si trova in Impostazioni > Accessibilità > Miglioramenti della visibilità.

Android High Contrast Text utilizza due meccanismi: sovrascrivere la tavolozza dei colori tramite una sovrapposizione del tema e applicare una ColorMatrix per aumentare il contrasto delle immagini bitmap. Il sistema analizza il tema corrente dell'applicazione (Chiaro/Scuro) e applica una sovrapposizione con contrasto massimo: primo piano bianco (#FFFFFF) su sfondo nero (#000000). Gli elementi semitrasparenti ricevono uno sfondo opaco.

Verificare High Contrast Text tramite l'API Android

Per verificare lo stato di High Contrast Text su Android, si utilizzano AccessibilityManager e ContentResolver. L'API consente di determinare se la modalità è attiva e di adattare l'interfaccia utente. Jetpack Compose supporta l'adattamento tramite CompositionLocalProvider e 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 {

    // Verifica tramite 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" }
    }

    // Verifica tramite impostazioni globali
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — colori considerando il contrasto
    @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
        }
    }
}

// Sistema View: selettore di colore dinamico
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)
        }
    }
}

La classe HighContrastHelper verifica se High Contrast è attivo tramite AccessibilityManager e impostazioni di sistema, adatta i colori in Jetpack Compose e fornisce un ContrastTextView personalizzato per il sistema View. Su Android, a differenza di iOS, non esiste una notifica diretta per le modifiche di High Contrast — ContentObserver su Settings.System è obbligatorio per gli aggiornamenti dinamici.

Material Design 3 e High Contrast

Material Design 3 (Material You) include il supporto integrato per High Contrast tramite Dynamic Color. Quando la modalità di sistema è attiva, Material 3 seleziona automaticamente la tavolozza tonale massima: background = Neutral0, onBackground = Neutral100, primary = Primary100. Gli sviluppatori devono solo utilizzare i componenti MD3 — il sistema gestisce automaticamente l'adattamento del contrasto.

Rapporto di Contrasto WCAG: Standard 4.5:1 e 3:1

Il rapporto di contrasto WCAG è un rapporto matematico di luminanza tra due colori, utilizzato per valutare l'accessibilità del testo. Lo standard definisce due soglie: 4.5:1 per il testo normale (livello AA) e 3:1 per il testo grande (da 18px/14px grassetto). Per il livello AAA, sono richiesti 7:1 per il testo normale e 4.5:1 per il testo grande. La modalità High Contrast dovrebbe idealmente fornire 7:1 e oltre.

Il calcolo del rapporto di contrasto viene eseguito utilizzando la formula: (L1 + 0.05) / (L2 + 0.05), dove L1 è la luminanza relativa del colore più chiaro e L2 è la luminanza relativa del colore più scuro. La luminanza relativa viene calcolata dai canali sRGB con pesi: 0.2126R + 0.7152G + 0.0722B. Per gli sviluppatori di accessibilità, è sufficiente utilizzare strumenti come WebAIM Contrast Checker, Color Contrast Analyser o Accessibility Inspector in Xcode.

Tabella delle Soglie di Contrasto WCAG 2.2

Verifica del Contrasto nel Codice

Per la verifica automatica del rapporto di contrasto in un'applicazione web, è possibile utilizzare JavaScript. Quando la modalità High Contrast è attiva, è consigliabile evidenziare gli elementi che non soddisfano lo standard AA. Di seguito è riportato un esempio di calcolo della luminanza relativa e del rapporto di contrasto in JavaScript.

// Calcolo del rapporto di contrasto secondo WCAG 2.2
class ContrastChecker {

    // Conversione di sRGB in spazio lineare
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Luminanza relativa
    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
    }

    // Rapporto di contrasto tra due colori
    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
    }

    // Verifica del livello AA (4.5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

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

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

La classe ContrastChecker in JavaScript implementa un calcolo completo del rapporto di contrasto secondo WCAG 2.2: conversione di sRGB in spazio lineare, calcolo della luminanza relativa con pesi Rec.709 e confronto con le soglie AA/AAA. Questo strumento è utile per il controllo automatizzato della tavolozza dei colori nello sviluppo di applicazioni web con supporto High Contrast.

Strumenti di Audit del Contrasto

Per verificare il rapporto di contrasto in un'applicazione finita, utilizzare Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) o axe DevTools (web). Questi strumenti trovano automaticamente gli elementi con contrasto inferiore a WCAG AA e li evidenziano. La modalità High Contrast dovrebbe essere attivata durante l'audit — questo mostrerà se l'aumento del contrasto di sistema è sufficiente per raggiungere 7:1.

CSS prefers-contrast: Adattamento delle Pagine Web al Contrasto di Sistema

La funzione multimediale CSS prefers-contrast consente alle pagine web di adattare gli stili in base all'impostazione di contrasto di sistema dell'utente. La funzione accetta i valori: no-preference (predefinito), more (l'utente ha attivato High Contrast), less (l'utente preferisce contrasto ridotto) e custom (regolazione fine). È supportata da tutti i browser moderni dal 2022.

prefers-contrast: more — un segnale per gli sviluppatori web: aumentare il rapporto di contrasto del testo, sostituire gli sfondi semitrasparenti con opachi, rinforzare i bordi degli elementi interattivi e rimuovere le immagini di sfondo a basso contrasto. Safari iOS e Chrome Android trasmettono il valore more quando la modalità High Contrast di sistema (Increase Contrast / High Contrast Text) è attivata.

Esempio di Adattamento con prefers-contrast

Quando prefers-contrast: more è attivo, la pagina web dovrebbe minimizzare il numero di colori e preferire una tavolozza in bianco e nero con colori d'accento per i rilievi. Di seguito è riportato un esempio di adattamento CSS con sostituzione dei colori, rimozione della trasparenza e rinforzo dei bordi.

/* Stili di base (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;
}

/* Alto contrasto: 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; // Era #666 — ora nero
    }

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

/* Contrasto ridotto: 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);
    }
}

Nell'esempio CSS con prefers-contrast: more, la carta ottiene uno sfondo bianco opaco, un bordo nero di 2px, il testo diventa nero (#000 invece di #333), e il pulsante diventa blu scuro con un contorno nero per la visibilità. Con prefers-contrast: less (un caso raro — l'utente preferisce colori morbidi), il contrasto viene invece ridotto.

Combinazione con prefers-color-scheme

Per un adattamento completo dell'accessibilità, prefers-contrast viene combinato con prefers-color-scheme (tema chiaro/scuro). Quando prefers-color-scheme: dark e prefers-contrast: more sono entrambi attivi, i colori dovrebbero essere bianco su nero con accenti luminosi. In modalità chiara — nero su bianco. La combinazione di queste funzioni multimediali produce 4 combinazioni che devono essere testate per una copertura completa dell'accessibilità.