Contraste des couleurs

Les couleurs que vous choisissez pour l'interface de votre application ont une influence sur sa lisibilité et sa clarté. Un contraste des couleurs suffisant permet aux utilisateurs de lire et de comprendre plus facilement le texte et les images.

Outre le fait qu'il est apprécié par les utilisateurs atteints de divers troubles de la vision, un contraste des couleurs suffisant est utile à l'ensemble des utilisateurs en cas de conditions d'éclairage extrêmes, comme lors d'une exposition directe à la lumière du soleil ou lorsque l'écran fonctionne à faible luminosité.

Implémentation

Lorsque vous implémentez l'interface utilisateur d'une application, définissez les couleurs d'arrière-plan et de premier plan en appliquant un niveau de contraste suffisant.

Le "rapport de contraste" résulte du calcul de la différence de luminance, c'est-à-dire d'intensité de lumière émise, entre deux couleurs voisines affichées sur un écran. Ce rapport est compris entre 1 et 21 (souvent exprimé sous la forme "entre 1:1 et 21:1"). Plus la valeur est grande, plus le contraste est élevé. De nombreux outils permettent de calculer le rapport de contraste entre deux couleurs voisines, comme ce calculateur du rapport de contraste.

Lorsque vous utilisez une TextView pour afficher du texte, définissez des couleurs d'arrière-plan et de premier plan avec un rapport de contraste élevé à l'aide de android:textColor et android:background. Lorsque vous utilisez un Text dans Compose, définissez-les à l'aide du paramètre "color" et de Modifier.background.

Le W3C recommande les rapports de contraste suivants :

• Au moins 4,5:1 pour un texte en petits caractères (moins de 18 points avec une police normale ou 14 points en gras)
• Au moins 3:1 pour un texte en grands caractères (18 points ou plus avec une police normale, ou 14 points ou plus en gras)

Remarques sur le contraste des couleurs :

• Lorsque vous utilisez une ImageView ou une Image pour rendre du contenu graphique ou une iconographie, assurez-vous que le contraste entre les couleurs d'arrière-plan et de premier plan respecte ou dépasse les rapports recommandés.

• Les rapports de contraste sont mesurés en fonction de la couleur apparente du premier plan et de l'arrière-plan d'un élément disposé sur d'autres éléments. Si vous définissez les couleurs selon un format ARVB (valeurs hexadécimales de #AARRVVBB), sachez que les couleurs non opaques (celles dont la valeur du canal alpha est inférieure à 255) peuvent présenter une couleur apparente modifiée par celle du contenu de la couche inférieure.
• Le lissage et l'anticrénelage des polices peuvent modifier la couleur apparente de certains contenus, en particulier dans le cas de contenus présentant des traits de faible épaisseur. Pour améliorer la lisibilité, choisissez une combinaison de couleurs ayant un meilleur rapport de contraste ou augmentez l'épaisseur des traits du contenu.

Conception

Lorsque vous concevez une interface utilisateur, nous vous conseillons de choisir une palette offrant un contraste suffisant aux couleurs adjacentes.

• Pour le texte et l'iconographie en particulier, suivez les consignes du W3C concernant les rapports de contraste minimaux.
• Nous vous conseillons d'inclure un thème à contraste élevé en option ou d'autoriser l'utilisateur à choisir les couleurs du contenu principal.

Pour plus d'informations, consultez les consignes d'accessibilité Material Design relatives au contraste et aux couleurs.

Tests

Pour vérifier manuellement le contraste des couleurs dans une application :

1. Ouvrez l'application.
2. Faites une capture d'écran.
3. Lorsque vous utilisez un logiciel de visualisation ou de retouche d'images, extrayez un échantillon des couleurs apparentes de la capture d'écran au moyen d'un "outil Pipette".
4. Utilisez un calculateur de rapport de contraste pour déterminer le rapport de contraste des couleurs adjacentes.
5. Si le rapport mesuré est inférieur aux consignes du W3C, vous pouvez améliorer la qualité de votre interface en augmentant le contraste de ses couleurs.

Les outils de test automatisés d'Android peuvent détecter de nombreux problèmes de contraste de couleurs. Nous vous conseillons d'utiliser l'application Accessibility Scanner pour Android pour tester manuellement votre application sur un appareil. Vous pouvez effectuer des tests automatisés en activant la vérification de l'accessibilité dans Espresso et Robolectric.