Comment vérifier le contraste entre un texte et un arrière-plan

À quoi sert la vérification du contraste ?

Cet outil sert à vérifier le contraste entre une couleur de premier plan, par exemple celle d’un texte, et une couleur d’arrière-plan. Il fournit un rapport de contraste arrondi ainsi que des évaluations fondées sur quatre seuils : 4,5 et 7,0 pour le texte normal, puis 3,0 et 4,5 pour le texte de grande taille. Il peut donc aider à examiner une paire de couleurs avant de l’utiliser dans une interface ou un contenu numérique.

Les deux champs de couleur sont facultatifs. Si aucune couleur n’est fournie, le premier plan est noir (#000000) et l’arrière-plan est blanc (#ffffff). Pour une vérification ciblée, saisissez plutôt les couleurs que vous souhaitez comparer dans un format accepté.

Comment vérifier deux couleurs

1. Saisissez la couleur du premier plan, c’est-à-dire la couleur du texte ou d’un élément placé au-dessus de l’arrière-plan. Vous pouvez utiliser une notation hexadécimale à trois ou six chiffres précédée de #, comme #369 ou #336699.
2. Saisissez la couleur de l’arrière-plan dans le champ correspondant. Vous pouvez également employer une notation de type RGB commençant par rgb et contenant trois valeurs numériques décimales séparées par des virgules, par exemple rgb(51,51,51).
3. Lancez la vérification. Les espaces placés au début ou à la fin des valeurs sont retirés et le texte est normalisé en minuscules avant son interprétation.
4. Consultez le rapport obtenu. Pour des couleurs valides, repérez le ratio arrondi à deux décimales, puis les évaluations associées aux seuils du texte normal et du texte de grande taille.
5. Si le résultat signale une erreur de couleur, contrôlez chaque valeur et sa notation, puis relancez la vérification. Dans ce cas, le résultat est bien renvoyé, mais les évaluations habituelles de contraste ne sont pas produites.

Comment lire le résultat

Le ratio permet de comparer la différence de luminosité entre les deux couleurs. Les évaluations indiquent si le ratio atteint chacun des seuils examinés : 4,5 et 7,0 pour le texte normal, ainsi que 3,0 et 4,5 pour le texte de grande taille. Il faut lire ces résultats selon la catégorie de texte concernée, plutôt que de considérer un seul seuil comme valable pour tous les usages.

Deux couleurs identiques produisent un ratio de 1,0. Une couleur mal interprétée ne doit pas être lue comme un échec de la vérification : le rapport contient alors une indication d’erreur et ne fournit pas les évaluations normales. Enfin, ces seuils ne constituent pas une évaluation complète d’une interface ou d’un design. Ils portent sur la paire de couleurs vérifiée et ne remplacent pas l’examen d’autres éléments visuels ou de la lisibilité dans son contexte.

Exemple pratique

Une personne prépare un bloc de texte gris foncé sur un arrière-plan blanc et veut examiner cette paire avant de l’intégrer à une page.

Saisir #333333 comme couleur de texte et #ffffff comme arrière-plan, puis lancer la vérification.

Le rapport affiche un ratio arrondi à deux décimales, suivi d’évaluations pour les seuils du texte normal et du texte de grande taille.

Limites

• Le rapport examine la paire de couleurs et les quatre seuils prévus. Il ne constitue pas une évaluation complète de l’accessibilité d’un design ; les composants RGB sont en outre interprétés sans contrôle explicite de leur intervalle.

Erreurs fréquentes

• Une valeur peut être refusée si elle ne suit pas l’une des notations reconnues, par exemple un nom de couleur ou une autre forme hexadécimale. Corrigez-la avec une notation hexadécimale à trois ou six chiffres, ou avec une notation RGB à trois composants numériques séparés par des virgules. Les composants RGB sont interprétés comme des entiers décimaux sans contrôle explicite de leur intervalle : vérifiez donc vous-même que les valeurs saisies correspondent à votre couleur attendue.

Questions fréquentes

Puis-je lancer une vérification sans saisir deux couleurs ?

Oui, si vous ne renseignez aucun champ : le premier plan utilise le noir #000000 et l’arrière-plan le blanc #ffffff. Vous pouvez aussi ne remplir qu’une des deux couleurs, l’autre conservant sa valeur par défaut.

Quelles notations de couleur sont acceptées ?

Utilisez une notation hexadécimale à trois ou six chiffres commençant par #, ou une notation de type RGB commençant par rgb avec trois composants numériques décimaux séparés par des virgules.

Que se passe-t-il si une couleur est invalide ?

Le résultat contient une indication d’erreur et ne fournit pas les évaluations normales de contraste. Vérifiez la notation de la couleur concernée, puis relancez la vérification.