Contraste web : une couleur de marque doit aussi laisser lire

Le gris clair d’un tarif, posé sur un fond blanc, peut sembler discret sur une maquette et devenir pénible à déchiffrer sur le site. Le contraste désigne ici l’écart de luminosité entre les lettres et ce qui se trouve derrière elles. Il concerne donc une paire texte-fond, pas une couleur isolée. Une teinte de votre identité visuelle peut convenir sur un fond et poser problème sur un autre.

Les WCAG sont les recommandations du W3C pour l’accessibilité des contenus web. Au niveau AA, leur critère de contraste des textes fixe un rapport minimal de 4,5:1 pour le texte courant et de 3:1 pour le grand texte. Ces repères servent à examiner un choix graphique ; ils ne constituent pas, à eux seuls, un verdict sur l’accessibilité du site.

Le même texte change de contrainte selon sa présentation

Le « grand texte » a un sens précis dans ce critère : au moins 18 points, ou 14 points en gras, soit environ 24 pixels CSS, ou 18,7 pixels CSS en gras. Un titre que l’on trouve visuellement imposant n’entre donc pas automatiquement dans cette catégorie. Le W3C précise aussi que les seuils ne se franchissent pas par arrondi : un résultat de 4,499:1 reste inférieur à 4,5:1.

Pour préparer une discussion avec la personne qui conçoit votre site, rassemblez quelques usages réels plutôt qu’une palette seule. Le tableau suivant propose un relevé de travail ; il ne prétend pas évaluer une page existante.

Usage à relever	Question à résoudre
Prix sous une photo de produit	La couleur des chiffres reste-t-elle lisible sur le fond effectivement utilisé ?
Texte blanc sur une photographie	Le texte traverse-t-il des zones claires selon le recadrage de l’image ?
Mention secondaire en petits caractères	Cette information utile a-t-elle été rendue trop discrète ?

Imaginons un artisan dont le beige clair sert à la fois de fond et de couleur de texte. Il n’est pas nécessaire d’abandonner cette identité : on peut garder le beige en surface et choisir une teinte plus sombre pour les informations à lire. La décision porte sur le rôle de chaque couleur. Pour un texte sur photographie, un fond uni dédié au texte est une piste à examiner lorsque les variations de l’image rendent le résultat incertain.

Mesurer la lisibilité et expliciter le sens

Le W3C demande de considérer les couleurs définies pour le texte et son fond, plutôt que de mesurer les pixels lissés du bord des lettres dans une capture. Une mesure doit donc être rapprochée des styles réellement appliqués à l’élément. Demandez un relevé indiquant la page, l’élément, les deux couleurs, la taille et le résultat du calcul. Cela permet de vérifier la correction dans les mêmes conditions. Un passage réussi sur un seul exemple ne valide pas toutes les pages.

Une seconde question reste indépendante du contraste : la couleur transmet-elle à elle seule une information ? Le critère sur l’usage de la couleur demande un autre moyen visuel lorsque la couleur porte le sens. Si une disponibilité est uniquement signalée par un point vert ou rouge, assombrir ces points ne dit toujours pas ce qu’ils signifient à une personne qui distingue mal ces couleurs. Ajouter les mots « Disponible » ou « Indisponible » rend l’information explicite. Le contraste et le libellé répondent alors à deux difficultés différentes.

Faire entrer la lecture dans le projet graphique

Un relevé de quelques textes difficiles à lire donne une base concrète à une refonte : conserver l’identité, préciser les fonds et rendre les informations utiles perceptibles. Les offres de création de sites Gaia présentent un travail sur le design et l’ergonomie. Apportez ces exemples pour définir les contrôles attendus dans votre projet, sans assimiler la création d’un site à une certification d’accessibilité.