Quel contraste minimum pour le texte d'un chatbot ?

4,5:1 entre le texte et son fond, selon le critère 1.4.3 du W3C (niveau AA). Pour le grand texte, au moins 18 points ou 14 points en gras, le seuil descend à 3:1.

Ma couleur de marque est trop claire pour du texte blanc : que faire ?

Gardez-la pour les surfaces décoratives et prenez une nuance plus foncée de la même teinte pour les fonds qui portent du texte et pour les boutons, jusqu'à atteindre les seuils.

Le logo doit-il respecter ces seuils ?

Non : le W3C exclut de l'exigence de contraste le texte qui fait partie d'un logo ou d'un nom de marque. Le reste de la fenêtre, en revanche, y est soumis.

Choisir les couleurs de son chatbot sans rater le contraste

Partez des couleurs de la marque, puis mesurez chaque paire de couleurs de la fenêtre de conversation : 4,5:1 au moins entre un texte et son fond, 3:1 pour le grand texte et pour ce qui permet d'utiliser l'interface (bouton d'ouverture, bordure du champ de saisie, icônes, indicateur de focus). Si la couleur de marque ne passe pas, on ne la jette pas : on la réserve aux surfaces décoratives et on fonce sa nuance là où il y a du texte.

Les seuils cités sont ceux des règles d'accessibilité du W3C, le consortium qui publie les standards du web (WCAG, règles internationales pour l'accessibilité des contenus web), niveau AA.

Les deux seuils à connaître

Critère W3C	Ce qu'il vise	Seuil
1.4.3 Contraste minimum	Texte courant et images de texte	4,5:1
1.4.3 Contraste minimum	Grand texte : au moins 18 points, ou 14 points en gras (environ 24 et 18,5 pixels)	3:1
1.4.11 Contraste des éléments non textuels	Ce qui permet d'identifier un composant d'interface et son état, et les parties de graphiques nécessaires à la compréhension	3:1 avec les couleurs voisines

Deux précisions du W3C qui comptent :

les seuils ne s'arrondissent pas : un rapport de 2,999:1 échoue au seuil de 3:1 ;
ne sont pas concernés le texte d'un logo ou d'un nom de marque, les éléments purement décoratifs et les composants inactifs.

Élément par élément dans la fenêtre d'un chatbot

Élément	Paire à mesurer	Seuil
Bouton qui ouvre la conversation	Bouton / fond du site autour ; icône / bouton	3:1
En-tête avec le nom de l'assistant	Texte du nom / fond de l'en-tête	4,5:1 (3:1 si grand texte)
Bulles de l'utilisateur	Texte / couleur de la bulle	4,5:1
Bulles de l'assistant	Texte / couleur de la bulle	4,5:1
Liens dans les réponses	Texte du lien / fond de la bulle	4,5:1
Champ de saisie	Bordure du champ / fond ; texte saisi / fond du champ	3:1 ; 4,5:1
Bouton d'envoi	Icône / bouton ; bouton / fond	3:1
Indicateur de focus (navigation au clavier)	Contour / couleurs voisines	3:1

Le bouton d'ouverture est un cas particulier : il se pose sur le site de votre client, dont vous ne maîtrisez pas toujours les couleurs. Testez-le sur les pages réelles, pas seulement sur un fond blanc.

Des exemples chiffrés donnés par le W3C

La page du W3C sur le critère 1.4.11 donne des exemples utiles pour calibrer l'œil :

Exemple (sur fond blanc sauf mention)	Rapport	Résultat
Bordure de champ en gris #767676	au moins 3:1	Réussi
Contour de case à cocher en gris #9D9D9D	2,7:1	Échec
Contour de focus en gris #AAAAAA	2,3:1	Échec
Icône blanche sur gris foncé #6E747B	4,7:1	Réussi

Retenez l'ordre de grandeur : des gris clairs qui paraissent élégants sur une maquette peuvent échouer. Mesurez de la même façon les couleurs de marque pastel.

La méthode en cinq étapes

Listez les couleurs de la marque (codes hexadécimaux exacts), y compris les nuances secondaires.
Associez chaque couleur à un rôle : fond de l'en-tête, bulle de l'assistant, bulle de l'utilisateur, bouton, liens.
Mesurez chaque paire texte / fond et élément / fond avec un outil de mesure de contraste.
Corrigez sans trahir la marque : foncez ou éclaircissez la même teinte plutôt que d'en changer ; si une couleur vive ne passe pas avec du texte blanc, essayez un texte foncé dessus, ou réservez-la à des éléments sans texte (bordure décorative, illustration).
Consignez les paires validées et leur rapport dans la charte de marque, pour que personne ne les change au détour d'une mise à jour.

Le cas de la marque de votre client

Quand l'assistant est livré aux couleurs d'un client, ses couleurs ont pu être choisies pour un logo ou une plaquette, pas pour du texte sur fond coloré. Montrez-lui les mesures plutôt que d'en débattre : un tableau « couleur / usage / rapport mesuré / conforme ou non » aide à trancher. Et rappelez que son logo, lui, n'est pas soumis à ces seuils.

Si la fenêtre propose un mode sombre, refaites toutes les mesures : une paire qui passe sur fond clair peut échouer sur fond sombre.

Cette page porte sur le choix des couleurs. L'accessibilité de la fenêtre d'un assistant ne s'arrête pas aux contrastes : navigation au clavier, lecteurs d'écran, taille des textes demandent leurs propres vérifications.