« Augmenter le contraste » est une fonctionnalité d'accessibilité disponible sous iOS qui permet aux utilisateurs d'augmenter le contraste de l'ensemble du texte et des commandes sur l'ensemble de leur appareil. Même si votre application est conforme aux WCAG, certains utilisateurs pourraient apprécier que les commandes et autres éléments ressortent davantage dans votre application. Dans cet article de blog, j'aborderai les points suivants :
- Comment vérifier si votre application prend en charge la fonction « Augmenter le contraste »
- les différentes façons de soutenir « Increase Contrast »
- Comment cela affecte-t-il le mode sombre ?
- quelques bonnes pratiques pour prendre en charge la fonctionnalité « Augmenter le contraste »
Si vous le souhaitez, vous pouvez suivre les étapes à l'aide d'une application que j'ai créée pour cet article de blog!
Conformité aux WCAG
Une précision avant de commencer : le fait de prendre en charge la fonctionnalité « Augmenter le contraste » ne rend pas votre application conforme aux WCAG. Cet article de blog porte uniquement sur la prise en charge d’une fonctionnalité très utile d’iOS qui peut aider les utilisateurs à se sentir plus à l’aise avec votre application. Pour en savoir plus sur les tests de contraste des couleurs dans les applications mobiles, cliquez ici.
Augmenter le contraste
Avant de vous lancer, vous voudrez peut-être vérifier quels éléments de votre application prennent déjà en charge la fonction « Augmenter le contraste ». Pour tester cette fonctionnalité, rendez-vous dans Réglages > Accessibilité > Affichage et taille du texte, puis sélectionnez « Augmenter le contraste ». Une fois cette option activée, vous remarquerez peut-être dans les Réglages que le texte s'assombrit immédiatement, que chaque cellule est mieux définie et que chaque élément de commande apparaît plus sombre, y compris le bouton Retour. C'est exactement le comportement que vous souhaitez obtenir dans votre application.
 |
 |
| Par défaut | Activer l'augmentation du contraste |
Comment activer l'option « Augmenter le contraste »
Il existe quatre façons différentes de prendre en charge la fonctionnalité « Augmenter le contraste ». Le choix de la méthode dépend de la manière dont les couleurs sont déjà intégrées dans votre application et de l'existence ou non d'une palette de couleurs spécifique que vous avez en tête.
Utilisation des couleurs par défaut
Le moyen le plus simple de tirer parti de la fonction « Augmenter le contraste » est tout simplement d'utiliser le thème de couleurs par défaut. Tous les éléments de commande et le texte s'assombrissent lorsque cette fonction est activée.
 |
 |
| Par défaut | Activer l'augmentation du contraste |
Utilisation des couleurs système
Si vous souhaitez sortir des couleurs par défaut, vous pouvez également utiliser les « couleurs système ». Les couleurs système s’adaptent automatiquement au mode sombre et aux réglages d’accessibilité (tels que « Augmenter le contraste »). Vous pouvez en savoir plus sur les couleurs système dans les directives d’interface utilisateur d’Apple. Dans cet exemple, j’ai utilisé la couleur « Label » pour le texte, « Indigo système » pour les teintes des boutons et des curseurs, et « Orange système » pour la teinte du commutateur. J’ai également utilisé « Gris système 6 » comme couleur d’arrière-plan.
 |
 |
| Par défaut | Activer l'augmentation du contraste |
Utilisation des couleurs dans les ressources
Si vous avez des exigences spécifiques en matière de conception, vous pouvez définir vos couleurs sous forme de jeu de couleurs dans un dossier xcassets. Pour que ces couleurs soient compatibles avec la fonction « Augmenter le contraste », il vous suffit de sélectionner l’option « Contraste élevé » dans la section « Apparence », puis de régler la couleur pour le contraste élevé.
Sur les captures d'écran suivantes, vous pouvez voir comment les couleurs « Switch Tint » et « Tint » sont définies dans mes ressources et à quoi elles ressemblent dans mon application. Vous remarquerez peut-être également que les couleurs « Background » (ci-dessus) ne semblent pas très différentes dans le jeu de couleurs, mais que dans l'application, la différence est énorme !
 |
 |
| Par défaut | Activer l'augmentation du contraste |
Utilisation des codes couleur
Si vos couleurs sont définies dans le code, deux options s'offrent à vous : vous pouvez soit répondre à la UIAccessibility.darkerSystemColorsStatusDidChange notification, ou vous pouvez la remplacer traitCollectionDidChange.
Écouteur de notifications
Si vous préférez écouter la UIAccessibility.darkerSystemColorsStatusDidChange notification, ajouter un observateur dans un initialiseur (ou dans viewDidLoad sur un ViewController) :
NotificationCenter.default.addObserver(self,
selector: #selector(updateColors),
name:
UIAccessibility.darkerSystemColorsStatusDidChangeNotification,
object: nil)
Ensuite, dans votre fonction « updateColors », modifiez les couleurs en fonction de l'activation ou non de la propriété :
@objc
private func updateColors() {
if UIAccessibility.isDarkerSystemColorsEnabled {
label.textColor = UIColor.black
} else {
label.textColor = UIColor(white: 0.9, alpha: 1.0)
}
}
Dans mon application, au lieu de modifier une couleur, j'ai utilisé cet écouteur de notifications pour ajouter une bordure autour de chaque contrôle et de son libellé associé.
Remplacer la méthode `TraitsCollectionDidChange`
Si vous préférez remplacer le TraitCollectionDidChange fonction, utilisez la propriété « accessibilityContrast » dans traitCollection pour adapter les couleurs selon que l'option « Augmenter le contraste » est activée ou non :
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
// Increase Contrast disabled
if traitCollection.accessibilityContrast != .high {
self.label.textColor = .brown
}
// Increase Contrast enabled
} else {
self.label.textColor = .darkText
}
}
Et le mode sombre ?
Certains utilisateurs pourraient souhaiter augmenter le contraste, même en mode sombre. Cela signifie que si votre application prend en charge le mode sombre, elle devra également prendre en charge la fonction « Augmenter le contraste » en mode sombre !
 |
 |
| Contraste accru : désactivé, mode sombre : activé | Augmenter le contraste et activer le mode sombre |
Heureusement, les couleurs par défaut et les couleurs système prennent déjà en charge le mode sombre lorsque l'option « Augmenter le contraste » est activée. En revanche, si vous utilisez des couleurs personnalisées, vous devrez peut-être adapter vos ressources de couleur au paramètre « Contraste élevé » (notez que « Apparence sombre avec contraste élevé » correspond à une couleur distincte) :
Si vous avez défini vos couleurs dans le code, le moyen le plus simple de prendre en charge les deux options consiste à redéfinir traitCollectionDidChange. Voici un exemple illustrant comment procéder :
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
let darkModeIsEnabled = traitCollection.userInterfaceStyle == .dark
// Increase Contrast disabled
if traitCollection.accessibilityContrast != .high {
if darkModeIsEnabled {
self.label.textColor = .lightGray
} else {
self.label.textColor = .brown
}
// Increase Contrast enabled
} else {
if darkModeIsEnabled {
self.label.textColor = .lightText
} else {
self.label.textColor = .darkText
}
}
}
Comment favoriser les bonnes pratiques grâce à l'augmentation du contraste
Nous avons désormais passé en revue toutes les différentes façons dont vous pouvez prendre en charge la fonction « Augmenter le contraste » dans votre application. Cela signifie-t-il pour autant que chaque couleur de votre application, sans exception, doit s'adapter à ce paramètre d'accessibilité ? La réponse courte est « non ».
De manière générale, je recommanderais que les couleurs du texte, les teintes et toutes les couleurs « d’accent » s’adaptent à la fonction « Augmenter le contraste ». Par exemple, dans les Réglages, comme nous l’avons vu au début de cet article, la couleur d’arrière-plan d’une TableView devient plus foncée, mais les TableViewCells conservent la même couleur d’arrière-plan. La ligne de séparation visuelle entre chaque TableViewCell devient également plus foncée. Cela permet aux utilisateurs de distinguer plus facilement ce qui est une cellule (et donc cliquable) de ce qui ne l'est pas.
Pour les couleurs qui seront prises en charge par la fonctionnalité « Augmenter le contraste », assurez-vous qu’elles permettent bel et bien d’augmenter le contraste. Veillez également à ce que les couleurs ajoutées ne détournent pas l’attention. Comme toujours, suivez les directives d’interface utilisateur d’Apple pour intégrer au mieux la couleur dans votre application.
Conclusion
Quelle que soit la manière dont vous décidiez de prendre en charge la fonction « Augmenter le contraste », faites ce qu'il y a de mieux pour vos utilisateurs ! La prise en charge de ce paramètre d'accessibilité est peut-être simple, mais elle peut faire toute la différence.
