Qu'est-ce que le contraste WCAG et pourquoi est-il important ?
Les Web Content Accèssibility Guidelines (WCAG) définissent des critères de contraste pour garantir que les contenus web sont lisibles par tous, y compris les personnes malvoyantes ou daltoniennes. Le ratio de contraste mesure la différence de luminosité entre deux couleurs, sur une échelle de 1:1 (aucun contraste) à 21:1 (contraste maximum, noir sur blanc). Un texte avec un contraste insuffisant devient difficile voire impossible à lire pour une partie significative de la population. Respecter les normes WCAG n'est pas seulement une bonne pratique, c'est une obligation legale dans de nombreux pays.
Les niveaux WCAG : AA et AAA expliques
Le niveau AA est le standard minimum recommande : il exige un ratio de contraste d'au moins 4.5:1 pour le texte de taille normale et de 3:1 pour le grand texte (18px gras ou 24px normal). Le niveau AAA est plus strict : 7:1 pour le texte normal et 4.5:1 pour le grand texte. Le niveau AA est atteignable pour la plupart des designs sans compromettre l'esthetique. Le niveau AAA est ideal mais peut nécessitér des ajustements de palette plus importants. Notre outil vérifié les deux niveaux simultanément.
Comment ameliorer le contraste de votre site web
Si votre combinaison de couleurs ne passé pas les tests WCAG, plusieurs solutions s'offrent a vous. Assombrissez la couleur du texte ou eclaircissez le fond (ou inversement). Augmentez la taille du texte pour beneficier des seuils plus permissifs du grand texte. Ajoutez un fond semi-transparent derriere le texte place sur une image. Évitez les textes gris clair sur fond blanc, une erreur de design très répandue. Testez systematiquement chaque combinaison avec notre outil avant de valider votre design.