Vérifiez le contraste des couleurs de votre site

Le contraste des couleurs mesure la différence de luminosité entre un texte et son fond. Pour qu'un texte courant soit lisible par le plus grand nombre, le rapport de contraste doit être d'au moins 4,5:1 ; pour un grand texte ou un bouton, 3:1 suffit. Saisissez vos deux couleurs : l'outil calcule le rapport selon la formule officielle des règles internationales d'accessibilité (WCAG), reprises par le RGAA.

Pourquoi le contraste compte pour le site de la mairie

Un texte gris clair sur fond blanc paraît élégant, mais beaucoup d'habitants le lisent mal : personnes âgées, personnes malvoyantes, ou simplement quelqu'un qui consulte le site sur son téléphone en plein soleil. Le contraste fait partie des critères du RGAA (référentiel général d'amélioration de l'accessibilité), que les sites des communes doivent respecter.

Concrètement : un rapport de 1:1, c'est une couleur sur elle-même (invisible) ; 21:1, c'est du noir sur du blanc.

Comment utiliser l'outil

1. Saisissez la couleur du texte et celle du fond, en code hexadécimal (par exemple #1E3A8A) ou avec le sélecteur de couleur.
2. Le rapport de contraste s'affiche immédiatement, avec un aperçu du texte.
3. Lisez les quatre lignes de résultat : texte courant, grand texte, éléments d'interface, niveau renforcé.
4. Si le contraste est insuffisant, l'outil propose la teinte la plus proche qui atteint 4,5:1.

Où trouver le code d'une couleur ? Dans la charte graphique de la commune, dans l'outil de gestion du site, ou avec la pipette de votre navigateur.

Les seuils utilisés

Exemple de résultat

Texte gris #767676 sur fond blanc #FFFFFF : rapport de 4,54:1. Suffisant pour le texte courant, le grand texte et les éléments d'interface ; insuffisant pour le niveau renforcé.

Avec un gris à peine plus clair, #777777, le rapport tombe à 4,47:1 : insuffisant pour le texte courant. Un écart invisible à l'œil suffit à passer sous le seuil.

Les limites de l'outil

• Il compare deux couleurs unies. Un texte posé sur une photo ou un dégradé doit être vérifié à l'endroit le moins contrasté.
• Il ne vérifie pas tout votre site. Pour un premier relevé automatique, utilisez le test d'accessibilité du site de la mairie.
• Un bon contraste ne suffit pas à rendre un site accessible : le RGAA compte 106 critères.

Questions fréquentes

Q : Comment calculer un contraste de couleurs ? R : On calcule la luminance relative de chaque couleur (sa luminosité perçue, de 0 pour le noir à 1 pour le blanc), puis on applique la formule (L1 + 0,05) / (L2 + 0,05), L1 étant la couleur la plus claire. Le détail figure dans la spécification ci-dessous.

Q : Quel contraste minimum pour un site de mairie ? R : 4,5:1 pour le texte courant et 3:1 pour les grands textes, les boutons et les icônes utiles, selon les critères 3.2 et 3.3 du RGAA.

Q : Un rapport de 4,49:1 est-il accepté ? R : Non. Le seuil est un minimum : on n'arrondit pas vers le haut. L'outil affiche le rapport tronqué à deux décimales et compare la valeur exacte.

Q : Le logo de la commune est-il concerné ? R : Les logos font partie des cas particuliers du critère 3.2 du RGAA. Le texte qui accompagne le logo, lui, reste concerné.

Pour aller plus loin

Notre guide du RGAA explique les obligations d'accessibilité des sites de commune. Vous préparez vos signatures e-mail ? Le générateur de signature vérifie aussi le contraste de votre couleur.

Appel à l'action : Faites auditer le site de votre commune selon les 106 critères du RGAA : notre offre accessibilité (audit à 590 € HT).

Sources

• W3C, WCAG 2.2, définitions « relative luminance » et « contrast ratio », critères 1.4.3, 1.4.6 et 1.4.11 : https://www.w3.org/TR/WCAG22/
• RGAA 4.1.2, critères 3.2 et 3.3 : https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/

---