Vérifier le contraste des couleurs

Choisissez la couleur du texte et celle du fond pour savoir si votre design est lisible et accessible. Vous obtenez le ratio de contraste, sa conformité aux niveaux AA et AAA des WCAG et, s'il est insuffisant, la couleur de texte la plus proche qui est conforme.

Texte et fond

Accepte HEX, rgb(), hsl(), oklch() ou les noms CSS. Un texte semi-transparent est mélangé avec le fond.

Grand texte d'exemple

Ceci est un texte de taille normale. L'accessibilité web signifie que tout le monde, y compris les personnes malvoyantes ou daltoniennes, peut lire et utiliser votre page.

Bouton

Ratio de contraste

Texte normal (4,5:1) AA
Texte normal (7:1) AAA
Grand texte (3:1) AA
Grand texte (4,5:1) AAA
Icônes et composants (3:1) AA

Qu'est-ce que le ratio de contraste ?

Le ratio de contraste compare la luminance relative de deux couleurs et va de 1:1 (la même couleur) à 21:1 (noir sur blanc). Il est défini par les règles d'accessibilité WCAG 2 du W3C et sert de référence aux réglementations sur l'accessibilité (en France, le RGAA, et la norme européenne EN 301 549) ainsi qu'à des outils comme Lighthouse.

Niveaux AA et AAA

AA est le niveau généralement exigé : 4,5:1 pour le texte normal et 3:1 pour le grand texte (à partir de 24 px, ou 18,66 px en gras). AAA est le niveau renforcé : respectivement 7:1 et 4,5:1. Les icônes, les bordures des champs de formulaire et les autres composants d'interface doivent avoir au moins 3:1 par rapport aux couleurs qui les entourent.

Les logos et les textes purement décoratifs ou d'éléments désactivés en sont exemptés.

Comment améliorer le contraste

Il suffit presque toujours d'assombrir le texte (ou de l'éclaircir sur un fond sombre) sans changer de teinte : c'est pourquoi nous vous proposons la même couleur avec une autre luminosité, calculée dans l'espace OKLCH pour que le changement soit le plus petit possible. Évitez le texte gris clair sur blanc et le texte sur des images sans voile sombre.