Le défaut de design le plus fréquent qu’on croise en observant des sites et des interfaces n’est ni un mauvais choix de typographie ni une mise en page confuse. C’est un texte gris clair sur fond blanc, ou blanc cassé sur gris pâle, censé donner un air « épuré ». Ce choix a un nom technique et un seuil chiffré, et il rate ce seuil neuf fois sur dix.
Le rapport qui décide si un texte se lit
Le contraste entre un texte et son fond se mesure par un rapport de luminance, de 1:1 (deux couleurs identiques, illisible) à 21:1 (noir pur sur blanc pur). Les WCAG (Web Content Accessibility Guidelines), rédigées par le W3C, fixent pour le niveau AA — le niveau de référence, celui que réclament la plupart des obligations légales — un rapport minimal de 4,5:1 pour le texte courant. En dessous, un texte n’est pas seulement « moins beau », il devient objectivement difficile à distinguer de son arrière-plan pour une part significative des lecteurs, bien au-delà des personnes malvoyantes.
Ce chiffre n’est pas arbitraire : il vient de mesures sur la perception humaine du contraste. C’est ce qui le rend vérifiable a posteriori — un outil de mesure donne un verdict binaire, pas une impression.
Le grand texte et les boutons ont un seuil plus tolérant
Les WCAG distinguent le texte courant du grand texte (à partir d’environ 18 points, ou 14 points en gras) et des composants d’interface — boutons, champs de formulaire, icônes cliquables, bordures qui délimitent une zone active. Pour ces éléments, le seuil AA descend à 3:1. La logique : un caractère plus grand ou une forme plus large reste identifiable avec moins de contraste qu’une ligne de texte fine. C’est aussi pourquoi un gros titre en gris moyen passe souvent inaperçu comme problème alors qu’un paragraphe dans la même teinte est franchement illisible : le seuil qui s’applique n’est pas le même.
Beaucoup de maquettes échouent précisément sur ce point pour les boutons secondaires et les icônes « discrètes » : on les allège visuellement, et on descend sous 3:1 sans s’en rendre compte.
Le niveau AAA, la marche au-dessus
Il existe un niveau plus exigeant, l’AAA, réservé aux contextes où la lisibilité est critique — contenus destinés à des publics très diversifiés, services essentiels.
Pour le texte courant, le niveau AAA impose un rapport de contraste minimal de 7:1 — près du double de l’exigence AA.
Peu de sites grand public visent l’AAA sur l’ensemble de leur contenu : le seuil est contraignant sur le choix des couleurs de marque. Mais le connaître aide à comprendre l’écart entre « conforme » et « confortable ». Un site en 4,6:1 est conforme AA ; un site en 7:1 se lit sans effort, y compris pour des yeux fatigués en fin de journée.
Le RGAA, la version française pour le service public
En France, les services publics et les organismes remplissant une mission de service public se réfèrent au RGAA, le référentiel général d’amélioration de l’accessibilité, qui reprend et décline ces mêmes exigences de contraste dans un cadre réglementaire national. Un site d’agence, de collectivité ou d’établissement public qui les ignore ne prend pas seulement un risque d’image : il s’expose à un défaut de conformité opposable. Pour un studio qui travaille pour ce type de client, vérifier le contraste n’est pas une option de confort, c’est une clause de cahier des charges.
La couleur seule ne dit jamais tout
Le contraste résout la lisibilité du texte. Il ne résout pas un autre piège, tout aussi répandu : coder une information uniquement par la couleur. Un champ de formulaire qui passe au rouge pour signaler une erreur, sans icône ni message, un graphique où deux séries ne se distinguent que par la teinte, un statut « validé / refusé » représenté par du vert et du rouge sans autre indice : dans chacun de ces cas, une personne daltonienne perd l’information.
Le daltonisme n’est pas un cas marginal. La deutéranopie et la protanopie, les deux formes les plus courantes, entraînent une confusion entre le rouge et le vert — précisément la paire la plus utilisée pour opposer « bon » et « mauvais » dans les interfaces. La règle qui en découle est simple et devrait être un réflexe de conception : la couleur ne doit jamais être le seul vecteur d’une information. Un statut se double toujours d’un mot ou d’une icône ; un graphique, de motifs ou d’étiquettes directes.
Le focus, l’oublié des refontes
Quand on navigue au clavier — par choix, par handicap moteur, ou simplement parce qu’on tabule vite dans un formulaire — un contour de focus visible indique où on se trouve sur la page. C’est l’un des éléments les plus souvent supprimés en design, parce qu’il « casse » l’esthétique d’un bouton. Or ce contour est lui aussi soumis à une exigence de contraste : invisible ou trop pâle, il rend la navigation au clavier inutilisable, silencieusement, sans qu’aucun test visuel classique ne le remarque puisqu’on navigue à la souris pour vérifier une maquette.
Le vrai test grandeur nature : le métro en plein soleil
Voilà pourquoi ce sujet n’est pas une contrainte réservée aux personnes en situation de handicap. Un texte en gris clair sur fond blanc, conforme à l’écran d’un bureau bien éclairé, devient illisible sur un smartphone tenu en plein soleil, sur un quai de métro, ou simplement pour un lecteur de plus de 45 ans dont l’œil distingue naturellement moins bien les faibles contrastes. Le contraste WCAG n’est donc pas un supplément d’âme accessible : c’est ce qui fait qu’un site se lit, tout court, dans les conditions réelles où il est consulté — et ces conditions concernent la totalité de l’audience, pas une minorité qu’on pourrait ignorer.
Pour une marque, la conséquence pratique se pose souvent bien avant l’écran : dans le choix des couleurs qui iront ensuite sur un site ou une application, comme dans la structuration numérique qui accompagne un projet.
