High Contrast dans les applications mobiles — Définition, accessibilité et paramètres de contraste

Qu'est-ce que le High Contrast en accessibilité ?

High Contrast est un mode d'affichage dans lequel le système d'exploitation ou l'application augmente la différence entre la couleur de premier plan (texte, icônes) et l'arrière-plan. Le rapport de contraste minimal pour le texte normal selon la norme WCAG AA est de 4.5:1, et pour le texte grand (à partir de 18pt ou 14pt gras) — 3:1. Le mode High Contrast peut augmenter le rapport jusqu'à 7:1 et plus, garantissant une lisibilité maximale.

Contrairement au simple assombrissement de l'arrière-plan ou à l'éclaircissement du texte, High Contrast fonctionne de manière globale : il remplace la palette de couleurs de l'interface par un ensemble limité de couleurs à contraste élevé, ajoute des contours autour des éléments et supprime la transparence. Ce mode est conçu pour les personnes ayant une acuité visuelle réduite, une photophobie et certaines formes de daltonisme.

Il existe trois types de High Contrast : au niveau système (activé dans l'OS et affecte toutes les applications), dans l'application (mode intégré dans une application spécifique) et mode web (fonction média CSS prefers-contrast). Le High Contrast au niveau système est le plus puissant, car il remplace les couleurs même dans les applications qui ne disposent pas de leur propre support d'accessibilité.

Qui a besoin du High Contrast ?

Les principaux utilisateurs du High Contrast sont les personnes atteintes de cataracte (opacification du cristallin qui réduit la sensibilité au contraste), de dégénérescence maculaire (perte de la vision centrale), de glaucome et de rétinopathie diabétique. Ce mode est également nécessaire lorsqu'on travaille sous une lumière solaire intense — le contraste élevé compense les reflets de l'écran. Selon WebAIM (2025), 86 % des pages web ont un texte dont le contraste est inférieur au WCAG AA — le High Contrast côté utilisateur corrige partiellement ce défaut.

Increase Contrast sous iOS : réglages et types de contraste

Sous iOS, la fonction Increase Contrast se trouve dans Settings > Accessibility > Display & Text Size et comprend trois interrupteurs indépendants : Increase Contrast (amélioration générale), Darken Colors (assombrir les couleurs vives) et Reduce Transparency (réduire la transparence). Increase Contrast est l'interrupteur principal, affectant le texte, les boutons et les bordures des éléments système.

Techniquement, iOS implémente Increase Contrast via tintColor et la couche UIVisualEffectView. Lorsqu'il est activé, le système augmente la valeur alpha pour les tons sombres et la diminue pour les tons clairs, élevant le rapport de contraste de tous les éléments d'interface de 2 à 3 points. Reduce Transparency remplace les fonds semi-transparents (effet de verre dépoli) par des fonds opaques, ce qui améliore encore la lisibilité du texte sur les fonds flous.

Vérifier Increase Contrast dans une application iOS

Un développeur peut vérifier l'état d'Increase Contrast via UIAccessibility et adapter les couleurs en conséquence. Par exemple, si le contraste est augmenté, des couleurs d'accent plus saturées peuvent être utilisées ; sinon, un rapport de contraste de base de 4.5:1 doit être assuré via la palette par défaut. UIAccessibility.isReduceTransparencyEnabled est également utile pour désactiver les effets de flou lorsque le mode est actif.

import UIKit

class ContrastManager {

    // Vérifier l'état d'Increase Contrast
    static var isIncreaseContrastEnabled: Bool {
        return UIAccessibility.isDarkerSystemColorsEnabled
    }

    // Vérifier Reduce Transparency
    static var isReduceTransparencyEnabled: Bool {
        return UIAccessibility.isReduceTransparencyEnabled
    }

    // Adapter la couleur au mode de contraste
    static func adjustedAccentColor() -> UIColor {
        guard isIncreaseContrastEnabled else {
            return .systemBlue
        }
        // Bleu plus saturé lorsque le High Contrast est actif
        return UIColor(red: 0.0, green: 0.35, blue: 0.9, alpha: 1.0)
    }

    // Couleur de fond tenant compte de Reduce Transparency
    static func backgroundColor() -> UIColor {
        if isReduceTransparencyEnabled {
            return .systemBackground // Fond opaque
        }
        return UIColor.systemBackground.withAlphaComponent(0.85)
    }

    // S'abonner aux changements
    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
        )
    }
}

// Exemple d'utilisation : 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 fournit un accès à l'état d'Increase Contrast via isDarkerSystemColorsEnabled, adapte la couleur d'accent lorsque le mode est actif, désactive la transparence de la barre de navigation et s'abonne aux notifications système concernant les changements de contraste. UIKit redessine automatiquement les éléments lorsque le statut UIAccessibility change.

Couleurs dynamiques iOS (UIColor Well) et contraste

iOS fournit des couleurs UIColor dynamiques (systemBackground, label, secondaryLabel) qui s'adaptent automatiquement au mode Increase Contrast. Lorsque Increase Contrast est activé, les couleurs système changent leurs valeurs : label devient plus sombre (ou plus clair en mode sombre), l'arrière-plan perd sa transparence. Les développeurs sont encouragés à utiliser des couleurs dynamiques pour tous les éléments d'interface afin d'éviter les conflits avec le contraste système.

High Contrast Text sous Android : thème sombre et contraste

Sous Android, la fonction High Contrast Text fonctionne différemment d'iOS. Au lieu d'augmenter progressivement le rapport de contraste, Android applique un schéma de couleurs inversé : fond sombre et texte blanc avec une graisse accrue. Ce mode est particulièrement efficace sur les écrans AMOLED, où le noir offre un contraste maximal. Le réglage se trouve dans Paramètres > Accessibilité > Améliorations de la visibilité.

Android High Contrast Text utilise deux mécanismes : la substitution de la palette de couleurs via une superposition de thème et l'application d'une ColorMatrix pour augmenter le contraste des images bitmap. Le système analyse le thème actuel de l'application (Clair/Sombre) et applique une superposition avec un contraste maximal : premier plan blanc (#FFFFFF) sur fond noir (#000000). Les éléments semi-transparents reçoivent un fond opaque.

Vérifier High Contrast Text via l'API Android

Pour vérifier l'état du High Contrast Text sous Android, utilisez AccessibilityManager et ContentResolver. L'API permet de déterminer si le mode est actif et d'adapter l'interface utilisateur. Jetpack Compose prend en charge l'adaptation via CompositionLocalProvider et 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 {

    // Vérification 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" }
    }

    // Vérification via les paramètres globaux
    fun isHighContrastFromSettings(context: Context): Boolean {
        return try {
            Settings.System.getInt(
                context.contentResolver,
                "high_text_contrast_enabled"
            ) == 1
        } catch (e: Settings.SettingNotFoundException) {
            false
        }
    }

    // Jetpack Compose — couleurs tenant compte du contraste
    @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
        }
    }
}

// Système View : sélecteur de couleur dynamique
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 vérifie si le High Contrast est actif via AccessibilityManager et les paramètres système, adapte les couleurs dans Jetpack Compose et fournit un ContrastTextView personnalisé pour le système View. Sous Android, contrairement à iOS, il n'y a pas de notification directe pour les changements de High Contrast — ContentObserver sur Settings.System est obligatoire pour les mises à jour dynamiques.

Material Design 3 et High Contrast

Material Design 3 (Material You) inclut un support intégré du High Contrast via Dynamic Color. Lorsque le mode système est actif, Material 3 sélectionne automatiquement la palette tonale maximale : background = Neutral0, onBackground = Neutral100, primary = Primary100. Les développeurs n'ont qu'à utiliser les composants MD3 — le système gère automatiquement l'adaptation du contraste.

Rapport de contraste WCAG : normes 4.5:1 et 3:1

Le rapport de contraste WCAG est un rapport mathématique de luminance entre deux couleurs, utilisé pour évaluer l'accessibilité du texte. La norme définit deux seuils : 4.5:1 pour le texte normal (niveau AA) et 3:1 pour le texte grand (à partir de 18px/14px gras). Pour le niveau AAA, 7:1 est requis pour le texte normal et 4.5:1 pour le texte grand. Le mode High Contrast devrait idéalement fournir 7:1 et plus.

Le calcul du rapport de contraste est effectué à l'aide de la formule : (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance relative de la couleur la plus claire et L2 la luminance relative de la couleur la plus foncée. La luminance relative est calculée à partir des canaux sRGB avec des poids : 0.2126R + 0.7152G + 0.0722B. Pour les développeurs d'accessibilité, il suffit d'utiliser des outils comme WebAIM Contrast Checker, Color Contrast Analyser ou Accessibility Inspector dans Xcode.

Tableau des seuils de contraste WCAG 2.2

Vérification du contraste dans le code

Pour la vérification automatique du rapport de contraste dans une application web, JavaScript peut être utilisé. Lorsque le mode High Contrast est actif, il est conseillé de mettre en évidence les éléments qui ne respectent pas la norme AA. Voici un exemple de calcul de luminance relative et de rapport de contraste en JavaScript.

// Calcul du rapport de contraste selon WCAG 2.2
class ContrastChecker {

    // Conversion du sRGB en espace linéaire
    linearize(channel) {
        const s = channel / 255
        return s <= 0.04045
            ? s / 12.92
            : Math.pow((s + 0.055) / 1.055, 2.4)
    }

    // Luminance relative
    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
    }

    // Rapport de contraste entre deux couleurs
    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
    }

    // Vérification du niveau AA (4.5:1)
    passesAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 4.5
    }

    // Vérification du niveau AAA (7:1)
    passesAAA(hex1, hex2) {
        return this.getContrastRatio(hex1, hex2) >= 7.0
    }
}

// Utilisation
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 en JavaScript implémente un calcul complet du rapport de contraste selon WCAG 2.2 : conversion du sRGB en espace linéaire, calcul de la luminance relative avec les poids Rec.709 et comparaison avec les seuils AA/AAA. Cet outil est utile pour l'audit automatisé de la palette de couleurs lors du développement d'applications web avec support du High Contrast.

Outils d'audit de contraste

Pour vérifier le rapport de contraste dans une application terminée, utilisez Accessibility Scanner (Android), Xcode Accessibility Inspector (iOS) ou axe DevTools (web). Ces outils trouvent automatiquement les éléments dont le contraste est inférieur au WCAG AA et les mettent en évidence. Le mode High Contrast doit être activé pendant l'audit — cela montrera si l'augmentation du contraste système est suffisante pour atteindre 7:1.

CSS prefers-contrast : adaptation des pages web au contraste système

La fonction média CSS prefers-contrast permet aux pages web d'adapter les styles en fonction du réglage de contraste système de l'utilisateur. La fonction accepte les valeurs : no-preference (par défaut), more (l'utilisateur a activé le High Contrast), less (l'utilisateur préfère un contraste réduit) et custom (réglage fin). Elle est prise en charge par tous les navigateurs modernes depuis 2022.

prefers-contrast: more — un signal pour les développeurs web : augmenter le rapport de contraste du texte, remplacer les fonds semi-transparents par des opaques, renforcer les bordures des éléments interactifs et supprimer les images de fond à faible contraste. Safari iOS et Chrome Android transmettent la valeur more lorsque le mode High Contrast système (Increase Contrast / High Contrast Text) est activé.

Exemple d'adaptation avec prefers-contrast

Lorsque prefers-contrast: more est actif, la page web doit minimiser le nombre de couleurs et préférer une palette noir et blanc avec des couleurs d'accent pour les reliefs. Voici un exemple d'adaptation CSS avec remplacement des couleurs, suppression de la transparence et renforcement des bordures.

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

/* Contraste élevé : 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; // Était #666 — maintenant noir
    }

    .overlay {
        background: rgba(0, 0, 0, 0.8); // Était 0.4 — augmenté
    }
}

/* Contraste réduit : 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);
    }
}

Dans l'exemple CSS sous prefers-contrast: more, la carte obtient un fond blanc opaque, une bordure noire de 2px, le texte devient noir (#000 au lieu de #333), et le bouton devient bleu foncé avec un contour noir pour la visibilité. Sous prefers-contrast: less (un cas rare — l'utilisateur préfère des couleurs douces), le contraste est plutôt réduit.

Combinaison avec prefers-color-scheme

Pour une adaptation complète de l'accessibilité, prefers-contrast est combiné avec prefers-color-scheme (thème clair/sombre). Lorsque prefers-color-scheme: dark et prefers-contrast: more sont tous deux actifs, les couleurs doivent être blanc sur noir avec des accents vifs. En mode clair — noir sur blanc. La combinaison de ces fonctions média donne 4 combinaisons qui doivent être testées pour une couverture d'accessibilité complète.