Calculez le rapport de contraste entre la couleur du texte et la couleur d’arrière-plan à l’aide d’un outil de contraste. Les textes normaux doivent avoir un rapport de contraste d’au moins 4,5:1 et les textes agrandis de 3:1 minimum. Ces exigences s’appliquent au vrai texte ET au texte sous forme d’image.

Comment vous y prendre ?

Si vous respectez les exigences suivantes, le texte sur votre site web sera accessible du point de vue du contraste de couleur :

  1. Pour tous les textes (hormis les exceptions décrites ci-dessous), le contraste entre les couleurs de premier plan et d’arrière-plan satisfait aux exigences suivantes :
    1. le texte ‘normal’ a un rapport de contraste de 4,5:1 ou plus ;
    2. le texte ‘agrandi’ a un rapport de contraste de 3:1 ou plus.
  2. Alternative pour le point 1 : il y a un lien ou un bouton (avec un contraste suffisant) qui redirige les visiteurs vers une version de la page web conforme aux exigences de contraste (aussi appelée ‘mode contraste élevé’).
  3. Tant la couleur du texte que la couleur d’arrière-plan ont été définies dans le fichier CSS.
 

Astuce : servez-vous d’un outil pour tester le rapport de contraste.

Testez le rapport de contraste entre la couleur de premier plan et celle d’arrière-plan à l’aide d’un outil.

Exceptions

Ces exigences ne s’appliquent pas à :

  1. du texte sur des boutons ou d’autres éléments inactifs (par exemple un bouton sur lequel il n’est pas possible de cliquer) ;
  2. du texte purement décoratif, comme des motifs d’arrière-plan avec des lettres dépourvues de sens ;
  3. du texte qui se trouve sur une photo, mais qui n’est pas la raison pour laquelle la photo est présente (le texte n’a aucune valeur informative) ;
  4. du texte faisant partie d’un logo ou d’un nom de marque.

Texte ‘normal’ et ‘agrandi’

Le rapport de contraste requis dépend de la taille du texte. Plusieurs dispositifs et tailles d’écran affichent les lettres dans une autre taille en raison de différences de calcul et de résolution. La nature de la police peut elle aussi influencer la lisibilité. Une police fine et étroite sera moins lisible qu’une police plus large et épaisse.

L’unité de mesure pour les tailles de textes ‘normaux’ et ‘agrandis’ est indiquée en point (pt) dans les exigences d’accessibilité. C’est une unité absolue qui ne convient pas pour une utilisation sur le web, mais uniquement pour l’impression.

  • Par ‘texte normal’, l’on entend une taille de 14 ;points ou moins. Ce qui correspond approximativement à 1,2 em ou 120 %. Le texte standard doit être défini à 100 %.
  • Par ‘texte agrandi’, l’on entend une taille de 18 points minimum ou de 14 points en gras. Ce qui correspond plus ou moins à 1,5 em ou 150 %.
 

En toute sécurité

Si vous voulez jouer la carte de la sécurité, appliquez les exigences de contraste pour du texte normal à l’ensemble du texte, même s’il est affiché en plus grand.

Exemples

Image en arrière-plan

Même lorsque vous utilisez une image en arrière-plan d’un texte, vous devez veiller à ce que le contraste entre l’image et le texte soit suffisant. Pour vérifier que c’est bien le cas, comparez les couleurs de l’image d’arrière-plan qui sont le plus proches de la couleur du texte avec celle-ci.

  • Par exemple, si le texte est blanc, choisissez les couleurs les plus claires de l’image d’arrière-plan.
  • Si le texte est noir, choisissez les couleurs les plus foncées.

     

En outre, vous pouvez regarder plus spécifiquement quelles parties de l’image se trouvent réellement derrière le texte et comparer ces couleurs. N’oubliez pas non plus que la position de l’image d’arrière-plan peut changer en fonction des dispositifs et des tailles d’écran.

Ombre et bordure autour du texte

Placer une bordure autour de chaque lettre ou une ombre derrière le texte permet d’améliorer le contraste entre le texte et l’arrière-plan.

  • Si vous ajoutez une bordure, utilisez la couleur de la bordure comme couleur de premier plan au lieu de la couleur de la lettre.
  • Pour une ombre, utilisez la couleur de l’ombre comme couleur d’arrière-plan au lieu de la couleur d’arrière-plan d’origine.
 

Comment cela contribue-t-il à un meilleur site web ?

En ayant un contraste suffisant entre le texte et l’arrière-plan, vous vous assurez que la couleur n’est plus un facteur déterminant pour pouvoir percevoir ou non un texte.

Des études ont montré que les rapports de contraste susmentionnés sont suffisants pour les personnes avec diverses déficiences visuelles, telles que différentes formes de daltonisme. De même, les textes avec un contraste suffisant conviennent également aux personnes qui, en raison de leur âge, peuvent moins bien percevoir les contrastes.

Pour des concepteurs graphiques

Le concepteur doit veiller à ce que le contraste soit toujours suffisant. Il doit aussi penser aux couleurs pour les liens cliqués, par exemple.

Pour des développeurs

Le développeur doit s’assurer que les couleurs exactes sont maintenues lors de la conversion du projet en code. Il peut intégrer des restrictions dans le CMS afin que les rédacteurs ne puissent pas utiliser de contrastes faibles quand ils créent et éditent du contenu sur le site web.