Contraste des Couleurs
Assurez-vous que le texte est lisible pour tous les utilisateurs
Découvrez comment nous utilisons l'intelligence artificielle pour cette règle !
Ce Que Nous Vérifions
Assurez-vous que le contraste des couleurs entre le texte et son arrière-plan respecte les seuils minimaux de ratio WCAG 2 AA.
Selon les WCAG 2.0 1.4.3 AA, la présentation visuelle du texte doit avoir un ratio de contraste d'au moins 4,5:1 pour le texte normal et de 3:1 pour le texte en grandes lettres. Le texte en grandes lettres est défini comme étant d'au moins 18 points ou 14 points en gras.
Exemple d’Échec ❌
Le ratio de contraste est inférieur au minimum de 4,5:1 pour le texte normal et de 3:1 pour le texte en grandes lettres
Le texte est difficile à distinguer de l'arrière-plan
Les utilisateurs avec une faible vision peuvent être incapables de lire ce texte
Exemple de Réussite ✅
Le ratio de contraste atteint ou dépasse le minimum de 4,5:1 pour le texte normal
Le texte est clairement distinguable de l'arrière-plan
Les utilisateurs avec une faible vision peuvent lire ce texte sans difficulté
En Un Coup d'Œil
- Cette règle a un impact sérieux pour les utilisateurs
- Le texte normal doit avoir un ratio de contraste d'au moins 4,5:1 par rapport à son arrière-plan
- Le grand texte (au moins 18 points ou 14 points en gras) doit avoir un ratio de contraste d'au moins 3:1
- Cette règle vérifie le contraste des couleurs des éléments de texte statiques et du texte au sein des éléments interactifs
- Cette règle utilise l'IA pour détecter les problèmes de contraste - les résultats peuvent nécessiter une vérification manuelle sur des arrière-plans complexes
Impact sur les Utilisateurs
Le niveau de contraste des couleurs influence la facilité avec laquelle le texte se distingue de son arrière-plan. Lorsque les couleurs du texte et de l'arrière-plan sont trop similaires en luminosité, le texte devient difficile ou impossible à lire.
Cela affecte toute personne dans des conditions de faible luminosité, en extérieur au soleil, ou utilisant un écran plus ancien — mais c'est surtout un problème pour les utilisateurs avec une faible vision. Ce qui ressemble à une étiquette lisible pour un utilisateur peut apparaître comme une tache presque invisible pour un autre.
Confirmer un Problème de Contraste des Couleurs
- Faites l'une des choses suivantes :
- Ouvrez votre application dans un émulateur, OU
- Prenez une capture d'écran de l'application sur votre appareil physique. Envoyez la capture à vous-même et ouvrez-la sur votre ordinateur.
- Utilisez un sélecteur de couleur pour :
- Obtenez la couleur la plus fidèle de l'élément de texte.
- Obtenez la couleur la plus fidèle de chaque couleur d'arrière-plan distincte derrière le texte.
- Saisissez chaque couleur dans le Vérificateur de Contraste de la Palette de Couleurs Deque.
- Vous trouverez l'un des résultats suivants :
- Accessible : Le ratio de contraste des couleurs satisfait le minimum requis pour sa taille de texte.
- Inaccessible : Le ratio de contraste des couleurs ne satisfait pas le minimum requis pour sa taille de texte.
Corriger les Problèmes
Les problèmes de contraste des couleurs surviennent lorsque la couleur du texte et la couleur de l'arrière-plan sont trop similaires en luminosité. Pour résoudre le problème, utilisez le Analyseur de Contraste des Couleurs Deque pour trouver des couleurs qui respectent le minimum requis en fonction de la taille du texte. Adjustez soit la couleur du texte, soit la couleur de l'arrière-plan jusqu'à ce que le ratio de contraste requis soit atteint.
Puis-je Ignorer Cette Règle ?
Le contraste des couleurs a un impact sérieux pour les utilisateurs. Un contraste des couleurs adéquat est une exigence WCAG AA, donc cela devrait être une priorité à corriger. Dans de rares cas, il peut être acceptable d'ignorer cette règle — par exemple, si le texte est purement décoratif et ne transmet aucune information. En savoir plus sur ignorer les règles.
Questions Fréquemment Posées
Y a-t-il des limitations connues avec cette règle ?
Oui. Cette règle peut produire des résultats inexacts lorsque le texte repose sur un arrière-plan avec de nombreuses couleurs, comme un dégradé, une image ou un arrière-plan semi-transparent. Si vous pensez qu'un résultat est incorrect, utilisez le Vérificateur de Contraste des Couleurs Deque pour confirmer le ratio entre les couleurs du texte et de l'arrière-plan.
Ressources
Pages de Cours à Deque University
Remarque : Un abonnement est nécessaire pour avoir un accès complet aux ressources de Deque University.