Un texte gris clair sur fond blanc peut sembler élégant sur un écran bien réglé, puis devenir pénible à lire sur un téléphone ou pour une personne malvoyante. Le contraste des couleurs joue donc un rôle direct dans la lisibilité et l’accessibilité numérique d’un site.
Le RGAA encadre le contraste des textes, des composants et des éléments graphiques porteurs d’information. Comprendre les seuils, tester une palette chromatique et ne jamais transmettre un message par la couleur seule permet d’améliorer l’expérience utilisateur ; quelques repères essentiels facilitent ces choix.
A retenir :
- Contraste adapté à la taille et à la graisse du texte
- Information doublée par un libellé, une icône ou une forme
- Vérification des couleurs dans chaque état des composants interactifs
Contraste des couleurs et seuils du RGAA
Ces repères prennent tout leur sens lorsqu’on examine la lecture quotidienne d’une page. Selon le RGAA, le rapport de contraste compare la luminosité relative du texte et de son arrière-plan : plus l’écart est important, plus les caractères se distinguent.
Rapport de contraste pour les textes
Pour le niveau AA, les textes courants doivent atteindre un rapport de 4,5:1. Les grands caractères peuvent respecter 3:1 ; selon les WCAG, cela concerne notamment les textes d’au moins 24 pixels, ou d’environ 18,66 pixels lorsqu’ils sont en gras.
Le niveau AAA renforce les exigences : le seuil passe à 7:1 pour le texte courant et à 4,5:1 pour les grands caractères. Il constitue une cible supplémentaire, particulièrement utile pour des contenus qui doivent rester faciles à consulter.
Contraste des boutons et éléments graphiques
Les composants d’interface et les éléments graphiques indispensables à la compréhension demandent aussi une attention particulière. Selon le RGAA, leur contraste avec les couleurs voisines doit atteindre au moins 3:1, y compris lorsque le composant change d’état.
Un bouton bleu peut, par exemple, devenir plus clair au survol ou après un clic. Chaque version doit rester perceptible, tandis qu’une icône informative doit se détacher suffisamment du fond pour être comprise sans effort.
Seuils courants à vérifier :
- Texte courant en niveau AA : rapport minimal de 4,5:1
- Grand texte en niveau AA : rapport minimal de 3:1
- Texte courant en niveau AAA : rapport minimal de 7:1
- Composant ou graphique informatif : rapport minimal de 3:1
| Élément vérifié | Seuil AA | Point de contrôle |
|---|---|---|
| Texte courant | 4,5:1 | Texte et arrière-plan |
| Grand texte | 3:1 | Taille et graisse |
| Bouton interactif | 3:1 | Chaque état visible |
| Graphique porteur d’information | 3:1 | Couleurs utiles à la compréhension |
Information par la couleur et perception visuelle
Respecter les ratios ne suffit pas si une couleur reste l’unique indice d’une action ou d’un résultat. Le RGAA demande que l’information soit également accessible par un autre moyen, afin de tenir compte des différences de perception visuelle.
Associer la couleur à un indice complémentaire
Dans un formulaire, des champs obligatoires signalés seulement en rouge peuvent passer inaperçus. Un astérisque accompagné d’une explication, ou une mention textuelle, rend leur statut compréhensible sans dépendre de la distinction des couleurs.
Le même principe s’applique aux liens, aux erreurs et aux graphiques. Un lien peut être souligné, un message d’erreur accompagné d’une icône et d’un libellé, et des séries de données distinguées par des motifs avec une légende.
Indices complémentaires utiles :
- Formulaire : astérisque et indication textuelle des champs obligatoires
- Lien : soulignement ou autre marque visuelle persistante
- Erreur : icône et message explicite en plus de la couleur
- Graphique : légende, libellés ou motifs différenciés
Vérifier les contenus et les états interactifs
Selon le RGAA, l’examen doit inclure les informations figurant dans les textes, les images et les médias. Une vidéo qui distingue deux catégories uniquement par leur couleur nécessite un autre repère visuel ou une information équivalente dans la bande-son.
Une équipe peut commencer par parcourir ses pages comme une personne qui ne distingue pas certaines couleurs. Cette vérification simple révèle souvent des signaux ambigus dans les formulaires, les graphiques et les boutons d’action.
Pour chaque contenu coloré, posez-vous ces questions :
- L’information reste-t-elle claire sans percevoir les couleurs ?
- Les libellés et icônes expliquent-ils l’action ou le résultat ?
- Les changements de survol et de sélection restent-ils visibles ?
- Les vidéos offrent-elles une information équivalente par un autre canal ?
Tester une palette avec Contrast-Finder
Une fois les usages identifiés, un outil de vérification aide à corriger les couleurs avant leur intégration. Contrast-Finder compare une couleur de premier plan et une couleur d’arrière-plan, puis indique si le rapport choisi satisfait le seuil demandé.
Régler les couleurs et le seuil attendu
Le formulaire accepte des noms CSS, des codes hexadécimaux ou des valeurs RGB pour le texte et le fond. Il faut ensuite sélectionner un ratio adapté, puis préciser quelle couleur l’outil peut modifier ; l’autre reste inchangée.
Les options de proposition favorisent soit des couleurs proches de la teinte initiale, soit une palette conforme plus large. Si la première recherche ne fournit aucun résultat, l’algorithme de palette peut suggérer des alternatives plus éloignées.
Étapes de vérification dans l’outil :
- Saisir la couleur du texte et celle de l’arrière-plan
- Choisir le ratio correspondant au texte ou au composant
- Indiquer la couleur modifiable dans la combinaison
- Comparer les suggestions avec l’identité visuelle du site
Intégrer le résultat dans une conception inclusive
Un résultat conforme ne garantit pas à lui seul une interface confortable. Le concepteur doit vérifier les couleurs dans leur contexte, notamment sur les différents écrans, puis tester les états actifs, survolés et désactivés des éléments interactifs.
Conservez les couleurs retenues dans une palette chromatique documentée et contrôlez les nouveaux composants avant leur mise en ligne. Cette méthode limite les retouches tardives et ancre les normes d’accessibilité dans le travail courant de conception.
| Étape | Action | Résultat attendu |
|---|---|---|
| Définir | Identifier le texte ou l’élément à contrôler | Seuil adapté à l’usage |
| Comparer | Entrer les deux couleurs dans l’outil | Rapport de contraste mesuré |
| Ajuster | Tester une couleur alternative proposée | Combinaison conforme au seuil retenu |
| Valider | Contrôler la page et les états interactifs | Lisibilité et perception vérifiées en contexte |
Sources : RGAA, version 4 ; WCAG 2.0, critères 1.4.3 et 1.4.6 ; Contrast-Finder, documentation de l’outil.
