Corriger les contrastes de texte insuffisants

Le problème

Un texte qui contraste insuffisamment avec son fond est illisible pour les personnes malvoyantes, les daltoniens — et pour tout le monde en plein soleil. Le critère 3.2 du RGAA exige un ratio d’au moins 4,5:1 pour le texte courant, 3:1 pour les grands textes (24 px, ou 18,5 px en gras).

Mesurer

Le ratio se calcule entre la couleur du texte et celle du fond. Repères concrets sur fond blanc : #767676 passe tout juste (4,54:1) ; #999999 échoue (2,85:1) ; #595959 est confortable (7:1). Notre vérificateur de contrastes mesure automatiquement les textes stylés en ligne de n’importe quelle page.

Corriger sans trahir la charte

Dans 90 % des cas, assombrir le gris de deux crans suffit et personne ne voit la différence — sauf ceux qui, enfin, lisent. Centralisez les couleurs dans des variables CSS pour corriger une fois partout :

:root { --texte-secondaire: #595959; }  /* au lieu de #999 */

Pensez aux états oubliés : placeholders, liens visités, texte sur image (ajoutez un voile), boutons désactivés visibles.

Vérifier la correction

Relancez l’analyse, puis testez les principaux gabarits : les couleurs viennent souvent de composants différents. Notre détection couvre les styles en ligne ; les feuilles externes exigent l’inspecteur du navigateur ou un audit.

Autres erreurs fréquentes à corriger

• Corriger un code de langue invalide
• Corriger une hiérarchie de titres incohérente
• Corriger la langue de page non déclarée (attribut lang)
• Corriger les liens non explicites (« cliquez ici », « en savoir plus »)
• Corriger une page sans titre principal h1
• Corriger les boutons sans intitulé

← Retour au guide RGAA complet