Contraste

Conception avec un contraste suffisant

Si le texte, y compris sous forme d’image, n’offre pas un contraste suffisant par rapport à son arrière-plan, il ne sera pas lisible pour les utilisateurs malvoyants ou daltoniens. Les commandes et les graphiques significatifs exigent également un bon contraste.

Pour respecter le critère de succès du niveau AA des WCAG en matière de contraste minimal, suivez les pratiques exemplaires suivantes :

• Assurez-vous que le texte en petits caractères (moins de 18 points [24 pixels] en police ordinaire ou moins de 14 points [19 pixels] en caractères gras) a un rapport de contraste d’au moins 4,5:1 avec l’arrière-plan.
• Assurez-vous que le texte en gros caractères (au moins 18 points [24 pixels] en police ordinaire ou 14 points [19 pixels] en caractères gras) a un rapport de contraste d’au moins 3:1 avec l’arrière-plan.
• S’assurer que le contenu non textuel – les composants d’interface utilisateur actifs (c.-à-d. les commandes) et leurs états et les graphiques significatifs – a un rapport de contraste d’au moins 3:1 avec les couleurs adjacentes.

Il est souvent difficile de satisfaire aux critères du niveau AAA des WCAG, mais ce n’est pas le cas avec un contraste accru. Nous devrions nous y efforcer autant que possible. Pour satisfaire au critère de succès de niveau AAA des WCAG pour un contraste accru, augmenter le rapport de contraste entre les textes en petits et gros caractères comme suit :

• Assurez-vous que le texte en petits caractères (moins de 18 points [24 pixels] en police ordinaire ou moins de 14 points [19 pixels] en caractères gras) a un rapport de contraste d’au moins 7:1 avec l’arrière-plan.
• Assurez-vous que le texte en gros caractères (au moins 18 points [24 pixels] en police ordinaire ou 14 points [19 pixels] en caractères gras) a un rapport de contraste d’au moins 4,5:1 avec l’arrière-plan.

Pour les composants d’interface utilisateur, le rapport de contraste de 3:1 avec les couleurs adjacentes:

• s’applique à une commande et à l’information sur son état, par exemple si un composant est survolé ou sélectionné;
• s’applique à la limite visuelle indiquant la zone touchée, à moins que la commande contienne du texte qui respecte le rapport de contraste de 4,5:1;
• ne s’applique pas si l’apparence de la commande et de ses états sont contrôlés par l’agent utilisateur et non modifiés par l’auteur;
• ne s’applique pas si la commande est désactivée.

Vérifier manuellement le contraste à l’aide de l’outil Colour Contrast Analyzer (CCA).

Les outils automatisés vérifient le contraste de fond, mais une inspection manuelle est nécessaire lorsque le fond est un gradient, une image, une animation ou une vidéo. Si l’arrière-plan change au fil du temps ou au fur et à mesure que l’utilisateur fait défiler ou que l’affichage change, le contraste devrait persister, même si de brefs intervalles (une seconde) de mauvais contraste ne nuiront pas à l’expérience utilisateur.

Le rapport de contraste de 3:1 pour les couleurs adjacentes s’applique également aux graphiques significatifs, qui comprennent des icônes informatives, des lignes dans des graphiques linéaires et des tranches dans des graphiques à secteurs :

• Vérifiez le contraste de l’objet graphique par rapport aux couleurs adjacentes.
• S’il y a plusieurs couleurs ou un gradient, effectuez le test dans la zone au contraste le plus faible.
• Si la zone au contraste le plus faible affiche un rapport inférieur à 3:1, dites-vous qu’elle sera invisible. L’objet graphique est-il toujours compréhensible?
• S’il y a suffisamment d’objets graphiques pour comprendre, il réussit, sinon il échoue.

  Mauvais exemple : Faible contraste avec l’arrière-plan (contrôle)

La couleur grise de la case à cocher (#9D9D9D) a un rapport de contraste de 2,7:1 par rapport au fond blanc, ce qui est insuffisant pour permettre à certains utilisateurs de distinguer la case à cocher.

La bordure grise de l’entrée (#CCCCCC) a un rapport de contraste de 1,6:1 par rapport au fond blanc, ce qui est inférieur au rapport de 3:1 requis pour le contenu non textuel.

L'exemple commence

Étiquette 1

Étiquette 2

L'exemple finit

L’exemple des champs d’entrée est la mise en œuvre actuelle de la BOEW (2021). Vous devez donc remplacer la feuille de style de la BOEW par la couleur d’entrée indiquée dans "Bon exemple : Contraste suffisant (contrôle)". Voici le problème du CSS :

CSS

Début du code

.form-control { border: 1px solid #ccc; }

Fin du code

.form-control { border: 1px solid #93958A; }

  Mauvais exemple : Faible contraste avec une couleur adjacente (graphique)

Ce graphique d’alerte est composé d’une icône en forme de triangle rouge avec un point d’exclamation blanc sur fond gris. Le triangle est habituellement réservé aux alertes comme celles-ci, donc les deux formes sont importantes.

Il y a deux rapports de contraste à considérer avec cette icône:

• Le rapport de contraste entre le point d’exclamation blanc et le triangle rouge, qui est de 5:1.
• Le rapport de contraste entre le triangle rouge et le fond gris, qui est de 2:1.

Le triangle rouge et le fond gris ne présentent pas de contraste suffisant.

Voir d’autres exemples dans le critère de succès 1.4.11: Contraste du contenu non textuel (en anglais).

Le mauvais exemple "Faible contraste avec une couleur adjacente (graphique)" est tiré de Contrast and Colour Accessibility, © WebAIM, 2021.

Ressources WCAG connexes