Exercice : contrastes

Ce composant affiche l’avancement d’un dossier de sinistre : statut, étapes, lien pour envoyer un justificatif et recherche de documents.

Consignes

1. Ouvrez le composant et auditez-le selon les critères du RGAA 4.1.2 ci-dessous.
2. Ouvrez le code du composant dans votre éditeur. Corrigez uniquement le CSS : le HTML ne doit pas changer.
3. Rouvrez votre version et refaites les tests : le composant doit conserver son apparence générale.

Critères RGAA à vérifier

• 3.1 : l’information ne doit pas être donnée uniquement par la couleur
• 3.2 : le contraste entre la couleur du texte et la couleur de son arrière-plan est-il suffisamment élevé ?
• 3.3 : les couleurs utilisées dans les composants d’interface ou les éléments graphiques porteurs d’informations sont-elles suffisamment contrastées ?
• 10.6 : chaque lien dont la nature n’est pas évidente est-il visible par rapport au texte environnant ?

Comment tester

Mesurez les contrastes avec les outils de développement du navigateur ou Colour Contrast Analyser, et vérifiez le composant en niveaux de gris.