---
sourceDocument: Interface utilisateur de la Now Platform Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/xanadu/platform-user-interface

 Release :

    - xanadu

ft:locale :

    - fr-FR

ft:publication_title :

    - Interface utilisateur de la Now Platform Xanadu

ft:clusterId :

    - platux

bundleId :

    - platux

workflow :

    - Platform


---

# Ajuster les composants pour respecter les normes d'accessibilité

# Ajuster les composants pour respecter les normes d'accessibilité {#ariaid-title1}

* Rversion finale: Xanadu
* 
* Mis à jour 1 août 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute de lecture

Lorsque vous modifiez des composants dans Générateur de thèmes, vous pouvez rencontrer un symbole d'erreur ( ![erreur d’accessibilité]()) qui indique que les composants ne sont pas conformes aux WCAG 2.1 en matière de contraste des couleurs.

## Avant de commencer

Rôle requis : administrateur

## Pourquoi et quand exécuter cette tâche

Le rapport de contraste WCAG 2,1 qui Générateur de thèmes cible les variables de contenu et d'interface utilisateur est de 4:5:1. Ce rapport détermine les contrastes entre les couleurs d'écran les plus claires et les plus sombres et leur relation avec l'interface utilisateur. Pour ceux qui ne sont pas familiers avec le rapport de contraste, le premier chiffre indique le niveau de couleurs vives et le second indique le niveau relatif de couleurs sombres. Le seuil 4:5:1 offre une visibilité optimale aux utilisateurs malvoyants. Pour plus d'informations, consultez le site de la [Recommandation W3C pour les WCAG 2.1](https://www.w3.org/TR/WCAG21/).

Le nombre total d'infractions à l'accessibilité par composant est indiqué sur la page du panneau d'édition.

## Procédure

1. Dans l'onglet Styles de composant , sélectionnez un composant que vous utilisez et qui affiche le symbole d'avertissement d'accessibilité.  
   ![Erreur d’accessibilité]()  
   Le panneau de style configurable affiche les hooks modifiables disponibles pour le composant sélectionné.
2. Vous pouvez sélectionner l'icône pour afficher une description de l'avertissement.  
   Figure 1. Avertissement relatif à l'accessibilité
3. Comme indiqué dans le message d'avertissement, vous pouvez sélectionner l'icône du crayon pour améliorer le problème de contraste.  
   Figure 2. Éditeur de composants
4. Sélectionnez le symbole d'avertissement d'accessibilité dans le panneau de style configurable pour obtenir plus d'informations sur la résolution du problème.  
5. Sélectionnez l'un des liens dans l'avertissement pour corriger la couleur de remplissage de l'arrière-plan ou la couleur de l'icône.  
   Remarque :  
   Une fois que vous avez enregistré les modifications apportées à l'un des crochets de couleur, un symbole d'annulation apparaît. Sélectionnez le symbole d'annulation pour rétablir la couleur d'origine de toutes vos modifications. ![Annuler les changements de couleur]()
6. Lorsque vous avez terminé vos modifications et que le symbole d'avertissement d'accessibilité n'est plus visible, sélectionnez Enregistrer les modifications.  
   Par exemple, une fois que vous avez sélectionné une couleur qui passe la violation du rapport de contraste, le signe d'avertissement devient vert dans le sélecteur de couleurs.