Un contraste insuffisant peut rendre un site difficile à lire, même lorsque le texte est assez grand et que la mise en page semble claire. Le contraste concerne la différence visuelle entre un texte ou un élément d’interface et son arrière-plan.
Sur un site web accessible, il ne suffit donc pas de choisir des couleurs esthétiques : il faut vérifier qu’elles restent suffisamment distinctes dans les situations importantes.
Pourquoi le contraste est-il important sur un site web ?
Un texte gris clair sur fond blanc, un bouton peu différencié de son arrière-plan ou un champ de formulaire dont la bordure est presque invisible peuvent devenir difficiles à percevoir pour certains utilisateurs.
Le contraste joue notamment sur la lisibilité des textes, la compréhension des boutons et contrôles, l’identification du focus clavier et la perception de certains éléments graphiques utiles.
Que prévoient les WCAG 2.2 pour le texte ?
Pour le texte courant, les WCAG 2.2 utilisent généralement un rapport de contraste minimal de 4,5:1 au niveau AA. Pour certains textes de grande taille, le seuil est généralement de 3:1.
Ces rapports permettent de mesurer objectivement la différence entre la couleur du texte et celle de son arrière-plan. Ils ne remplacent toutefois pas un contrôle visuel du contexte réel : taille, graisse, état du composant et environnement d’utilisation comptent aussi.
Le contraste ne concerne pas uniquement le texte
Certains composants d’interface et éléments graphiques nécessaires à la compréhension doivent eux aussi rester suffisamment perceptibles. Cela peut concerner, selon le cas, une bordure de champ, un état sélectionné, un indicateur de focus ou une information graphique importante.
L’objectif est qu’un utilisateur puisse identifier les éléments essentiels sans devoir deviner où se trouve une action ou une information.
Quels problèmes de contraste rencontre-t-on souvent ?
- texte gris trop clair sur fond blanc ;
- texte coloré sur un fond de teinte proche ;
- bouton dont le libellé manque de contraste ;
- lien difficile à distinguer du texte environnant ;
- bordure de champ ou contrôle presque invisible ;
- focus clavier trop discret ;
- contraste correct en mode clair mais insuffisant en mode sombre ;
- état au survol ou désactivé qui devient illisible.
Comment vérifier simplement le contraste de son site ?
Une première vérification consiste à repérer les textes, boutons, liens, formulaires et composants importants, puis à mesurer les combinaisons de couleurs utilisées.
Il est utile de contrôler plusieurs états : affichage normal, survol, focus clavier, élément sélectionné, message d’erreur et mode sombre lorsque le site en propose un.
Un outil automatique peut signaler plusieurs contrastes insuffisants, mais il ne couvre pas toujours toutes les situations réelles. Une vérification manuelle reste utile pour comprendre le contexte et la fonction de l’élément concerné.
Faut-il augmenter le contraste partout au maximum ?
Non. L’objectif n’est pas de transformer chaque page en interface noir et blanc ni d’utiliser le contraste le plus fort possible partout.
Il faut surtout respecter des niveaux suffisants pour la lisibilité et l’identification des éléments importants, tout en conservant une hiérarchie visuelle cohérente avec l’identité du site.
Contraste et daltonisme : est-ce la même chose ?
Non. Un contraste suffisant n’assure pas à lui seul qu’une information restera compréhensible pour toutes les personnes ayant une perception différente des couleurs.
Par exemple, deux états peuvent respecter un contraste avec l’arrière-plan tout en restant difficiles à distinguer entre eux si seule la couleur change. C’est pourquoi une information importante ne devrait pas dépendre uniquement d’une teinte.
Pour ce sujet, consultez aussi notre article consacré au daltonisme et aux couleurs accessibles.
Et le mode sombre ?
Le mode sombre doit être contrôlé séparément. Une palette parfaitement lisible en mode clair peut produire des contrastes insuffisants après inversion ou adaptation des couleurs.
Il faut donc vérifier les textes, boutons, liens, formulaires, états de survol et focus dans chaque thème réellement proposé au public.
Un bouton “contraste renforcé” suffit-il ?
Non. Un réglage de contraste renforcé peut apporter un confort supplémentaire, mais il ne remplace pas une palette de base suffisamment accessible.
Le site doit rester utilisable et lisible sans obliger l’utilisateur à activer une option particulière dans un panneau d’accessibilité.
Que peut vérifier DOMMAT ?
Dans le cadre d’un contrôle ou d’un audit d’accessibilité, DOMMAT peut examiner les contrastes des principaux contenus et composants, ainsi que leurs différents états, dans le périmètre convenu.
Pour aller plus loin, découvrez ce que vérifie un audit d’accessibilité web, consultez l’approche Accessibilité DOMMAT ou lisez notre article consacré à la navigation clavier et au focus visible.
Vous pouvez également présenter votre besoin d’accessibilité.