Les règles de contraste de couleur sont souvent les plus difficiles à respecter pour un designer graphique. Celles-ci limitent le nombre de combinaisons de couleur texte/arrière-plan possibles et, de ce fait, restreignent en quelque sorte la liberté de création du concepteur visuel.

Par contre, en sachant que les capacités visuelles d’un individu diminuent considérablement avec l’âge, il est important de garder en tête qu’un bon contraste de couleur aide l’ensemble de la population à mieux voir. L’expérience du Web est enrichie lorsqu’on n’a pas besoin de plisser les yeux pour lire un titre !

Afin d’évaluer les contrastes de couleur entre texte et arrière-plan, nous vous suggérons fortement de vous procurer l’outil gratuit « Colour Contrast Analyser ».

Étapes pour évaluer le contraste des couleurs à l'aide de Colour Contrast Analyser

Assurez-vous d’abord que l’outil est en mode « Luminosité » (numéro 1 et en rouge sur l’image) puisque c’est sur ce critère que se basent les règles d’accessibilité de contraste de couleur. Sélectionnez la couleur d’avant-plan (correspondant habituellement au texte) et la couleur d’arrière-plan de la zone que vous voulez évaluer à l’aide des pipettes (numéro 2 et en bleu sur l’image) ou en entrant le code de la couleur à la main. Validez les résultats (numéro 3 et en vert sur l’image) en tenant compte de votre niveau d’accessibilité (AA ou AAA). Les règles de contraste de couleurs sont expliquées ci-après.

Prenez note que les logos et les images de texte décoratives (qui n’apportent aucun nouveau contenu) peuvent faire fi des règles suivantes.

Selon les standards WCAG 2.0 du W3C, niveau AA :

  • Le texte (ou les images de texte informatif) de moins de 18 points (ou moins de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 4,5 pour 1 avec son arrière-plan. (Règle 1.4.3 de WCAG 2.0 [anglais seulement])
  • Le texte (ou les images de texte informatif) de plus de 18 points (ou plus de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 3 pour 1 avec son arrière-plan. (Règle 1.4.3 de WCAG 2.0 [anglais seulement])
Selon les standards WCAG 2.0 du W3C, niveau AAA :
  • Le texte (ou les images de texte informatif) de moins de 18 points (ou moins de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 7 pour 1 avec son arrière-plan. (Règle 1.4.6 de WCAG 2.0 [anglais seulement])
  • Le texte (ou les images de texte informatif) de plus de 18 points (ou plus de 14 points en gras) devrait posséder un contraste de luminosité d’au moins 4,5 pour 1 avec son arrière-plan. (Règle 1.4.6 de WCAG 2.0 [anglais seulement])