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 régulier et de 3:1 pour le texte de grande taille. Le texte de grande taille est défini comme étant d'au moins 18 points ou 14 points 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. Saisissez chaque couleur dans le Deque Color Palette Contrast Checker.
4. Vous trouverez l'une des options suivantes :
   • Accessible : le rapport de contraste des couleurs répond le minimum requis pour sa taille de texte.
   • Inaccessible : le rapport de contraste des couleurs ne répond pas le minimum requis pour sa taille de texte.

Corriger les problèmes

Des problèmes de contraste de couleur surviennent lorsque la couleur du texte et la couleur de fond sont trop similaires en luminosité. Pour résoudre le problème, utilisez Deque's Color Contrast Analyzer pour trouver des couleurs qui répondent au minimum requis selon la taille du texte. Ajustez soit la couleur du texte, soit celle 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, il est donc prioritaire de corriger cela. Dans de rares cas, il peut être acceptable d'ignorer cette règle — par exemple, si le texte est purement décoratif et ne véhicule 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 fond avec de nombreuses couleurs, telles qu'un dégradé, une image ou un fond semi-transparent. Si vous pensez qu'une constatation est incorrecte, utilisez le Deque Color Contrast Analyzer pour confirmer le rapport entre les couleurs du texte et de l'arrière-plan.
• 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 occasionnellement mal identifier de petits glyphes semblables à des icônes - tels que des chevrons de flèche arrière (<), des puces, des symboles décoratifs - en tant que texte. Dans ce cas, la règle de contraste des couleurs s'exécute sur un élément qui ne contient pas de texte lisible, ce qui peut produire un résultat pour un bouton uniquement composé d'icônes. Comme la sortie de l'OCR n'est pas déterministe entre 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 "NON APPLICABLE" lors de la suivante. Il s'agit d'une caractéristique connue de l'OCR, non d'un bogue dans la règle. Pour contourner ce problème, vous pouvez utiliser les ignore API pour supprimer les résultats de contraste des couleurs pour les éléments affecté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'il existe un rapport de contraste d'au moins 4,5:1 entre le texte (et les images de texte) et l'arrière-plan derrière le texte
• Comprendre le critère de succès 1.4.3 : Contraste (Minimum) de la W3C