Contraste des couleurs

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 de rapport minimum WCAG 2 AA.

Selon WCAG 2.0 1.4.3 AA, la présentation visuelle du texte doit avoir un rapport de contraste d'au moins 4.5:1 pour le texte normal et 3:1 pour le texte en gros caractères. Les gros caractères sont définis comme étant au moins de 18pt ou 14pt en gras.

Exemple d'échec ❌

Exemple de réussite ✅

En un coup d'œil

• Cette règle a un impact sérieux pour les utilisateurs
• Le texte normal doit avoir un rapport de contraste d'au moins 4.5:1 contre son arrière-plan
• Le texte en gros caractères (au moins 18pt ou 14pt en gras) doit avoir un rapport 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 dans les é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 pour les utilisateurs

Le niveau de contraste des couleurs affecte la facilité ou la difficulté à distinguer le texte 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 tout le monde dans des conditions de faible luminosité, à l'extérieur en plein soleil, ou avec un ancien écran — mais c'est surtout un problème pour les utilisateurs ayant une basse vision. Ce qui semble être une étiquette lisible pour un utilisateur peut apparaître comme une quasi-invisibilité pour un autre.

Confirmer le problème de contraste des couleurs

1. Faites l'une des actions suivantes :
   • Ouvrez votre application dans un simulateur, OU
   • Prenez une capture d'écran de l'application sur votre appareil physique. Envoyez la capture d'écran à vous-même et ouvrez-la sur votre ordinateur.
2. Utilisez un sélecteur de couleur pour :
   1. Obtenez la couleur la plus précise de l'élément de texte.
   2. Obtenez la couleur la plus précise de chaque couleur de fond distincte derrière le texte.
3. Entrez chaque couleur dans le vérificateur de contraste de la palette de couleurs Deque.
4. Vous trouverez l'une des options suivantes :
   • Accessible : Le rapport de contraste des couleurs répond au minimum requis pour sa taille de texte.
   • Inaccessible : Le rapport de contraste des couleurs ne répond pas au minimum requis pour sa taille de texte.

Corriger les problèmes

Les problèmes de contraste des couleurs se produisent 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 l'analyseur de contraste des couleurs Deque pour trouver des couleurs qui respectent le minimum requis en fonction de la taille du texte. Ajustez soit la couleur du texte, soit la couleur de l'arrière-plan jusqu'à ce que le rapport 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 de couleurs adéquat est une exigence WCAG AA, cela doit donc ê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 se trouve sur un fond avec de nombreuses couleurs, comme un dégradé, une image ou un fond semi-transparent. Si vous pensez qu'un résultat est incorrect, utilisez le Deque Color Contrast Analyzer pour confirmer le ratio entre les couleurs du texte et du fond.
• La règle de contraste des couleurs utilise le framework Vision d'Apple (Reconnaissance optique de caractères, ou OCR) pour lire le texte à l'intérieur des limites d'un élément. L'OCR peut parfois mal identifier de petits glyphes ressemblant à des icônes - tels que des chevrons de retour arrière (<), des puces, des symboles décoratifs - comme du texte. Lorsque cela se produit, la règle de contraste des couleurs s'exécute sur un élément ne contenant pas de texte lisible, ce qui peut produire un résultat pour un bouton uniquement composé d'une icône. Étant donné que le résultat de l'OCR n'est pas déterministe à travers les analyses, le même élément peut apparaître dans les résultats de contraste des couleurs lors d'une analyse et être signalé comme "INAPPLICABLE" lors de la suivante. Ce n'est pas un bug de la règle, mais une caractéristique connue de l'OCR. Pour contourner ce problème, vous pouvez utiliser les ignore APIs pour supprimer les résultats de contraste des couleurs pour les éléments concernés. En savoir plus sur ignorer les règles.

Ressources

Pages de cours de l'Université Deque

• SC 1.4.3 Contraste (Minimum)
• Couleur
• Contraste

Remarque : L'accès complet aux ressources de l'Université Deque nécessite un abonnement.

Autres Ressources

• Technique WCAG G18 : S'assurer qu'un ratio de contraste d'au moins 4,5:1 existe entre le texte (et les images de texte) et le fond derrière le texte
• Comprendre le critère de succès 1.4.3 du W3C : Contraste (Minimum)