Mode d'emploi
- Saisissez la couleur du texte dans Premier Plan et celle du fond dans Arrière-Plan, en HEX ou avec le sélecteur de couleur.
- Lisez le Ratio de Contraste, de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
- Voyez aussitôt si la paire est RÉUSSI ou ÉCHOUÉ pour les niveaux WCAG AA et AAA, en Texte Normal et en Grand Texte, avec un aperçu.
- Cliquez sur INVERSER pour échanger texte et fond.
Les exigences de contraste WCAG
Les règles pour l'accessibilité des contenus web (WCAG 2.1 et 2.2) fixent un contraste minimal entre le texte et son fond, pour que les personnes malvoyantes ou daltoniennes, et toute personne lisant un téléphone en plein soleil, puissent le lire. En France, le RGAA reprend ces critères.
| Niveau | Texte normal | Grand texte |
|---|---|---|
| AA (le niveau habituellement exigé) | 4,5:1 | 3:1 |
| AAA (renforcé) | 7:1 | 4,5:1 |
| Icônes, boutons, bordures de champs (AA) | 3:1 | 3:1 |
Qu'est-ce qu'un grand texte ?
Un grand texte mesure au moins 18 points (24 pixels CSS) en normal, ou 14 points (environ 18,7 pixels CSS) en gras. La plupart des paragraphes, étiquettes et liens sont du texte normal et doivent atteindre 4,5:1 ; les titres plus grands peuvent se contenter de 3:1.
Les exemples qui piègent
Le gris clair est l'erreur la plus fréquente. Sur fond blanc, #767676 atteint 4,54:1 et passe le niveau AA, mais #777777, à peine plus clair, n'atteint que 4,48:1 et échoue. #959595 donne exactement 3:1, assez seulement pour un grand texte. Du blanc sur jaune (#FFFF00) tombe à environ 1,07:1, presque invisible.
Les couleurs de marque passent souvent pour les titres mais pas pour le petit texte : testez chaque vraie paire, le texte d'un bouton sur ce bouton, un lien sur le fond de page, et le texte indicatif (placeholder) des champs de formulaire, souvent oublié.
Comment le ratio est calculé
Chaque couleur est convertie en luminance relative, une mesure de la luminosité perçue de 0 (noir) à 1 (blanc), après correction de la courbe gamma sRGB. Le ratio vaut (plus claire + 0,05) ÷ (plus foncée + 0,05) et va de 1 à 21. La teinte seule ne suffit pas : un texte rouge sur fond vert peut manquer de contraste même si les couleurs semblent très différentes.
Questions fréquentes
Quel ratio faut-il pour le niveau WCAG AA ?
4,5:1 pour le texte normal et 3:1 pour le grand texte (18 points en normal ou 14 points en gras et plus).
Les logos doivent-ils respecter le niveau AA ?
Non. Le texte qui fait partie d'un logo ou d'un nom de marque n'a pas d'exigence de contraste, pas plus que le texte purement décoratif ou les commandes désactivées.
Le niveau AAA est-il obligatoire ?
Généralement non. Les règles et normes exigent le niveau AA : la norme européenne EN 301 549, sur laquelle s'appuie le RGAA, reprend les WCAG 2.1 AA. AAA reste un bon objectif pour les longs textes.
Mes couleurs sont-elles envoyées quelque part ?
Non. Le ratio est calculé dans votre navigateur.
