Contraste des couleurs

Arrière-plan

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 souffrant 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é.

Mise en œuvre

Lors de la mise en œuvre de 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 le nombre est grand, 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 TextView pour afficher du texte, définissez un rapport de contraste élevé pour les couleurs de premier plan et d'arrière-plan à l'aide de android:textColor et android:background. Le W3C recommande les rapports de contraste suivants :

  • Au minium 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 aux caractères plus grands (18 points ou plus avec une police normale, ou 14 points ou plus en gras)

Remarques sur le contraste des couleurs :

  • Si vous utilisez ImageView pour rendre un contenu graphique ou une iconographie, assurez-vous que le contraste entre les couleurs de premier plan et d'arrière-plan est au moins égal aux 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 le canal alpha porte une valeur 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 lignes de faible épaisseur. Pour améliorer la lisibilité, choisissez une combinaison de couleurs ayant un meilleur rapport de contraste ou augmentez l'épaisseur des lignes du contenu.

Conception

Pour la conception d'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, observez 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.

Test

Pour vérifier manuellement le contraste des couleurs dans une application, procédez comme suit :

  1. Ouvrez l'application.
  2. Faites une capture d'écran.
  3. À partir d'un logiciel d'affichage ou de modification d'images, utilisez un outil "pipette" pour extraire un échantillon de couleur apparente depuis la capture d'écran.
  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 tests 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.

Recherche
Effacer la recherche
Fermer le champ de recherche
Applications Google
Menu principal
Rechercher dans le centre d'aide
true
true
true
true
717068
false
false