Fonctionnement des normes de contraste WCAG 2.1 / 2.2
Le calcul du contraste repose sur la comparaison de la luminance relative de deux couleurs afin de garantir la lisibilité des contenus numériques pour tous les utilisateurs. Le présent outil applique rigoureusement la formule définie par les directives WCAG 2.1 / 2.2, qui constituent la référence réglementaire actuelle pour l'accessibilité du web.
L'échelle des rapports de contraste s'étend de 1:1 à 21:1. Un rapport de 1:1 représente une absence totale de contraste (par exemple, du texte blanc sur un fond blanc), tandis qu'un rapport de 21:1 représente le contraste maximal possible, obtenu avec du texte noir sur un fond blanc. Entre ces deux extrêmes, les normes WCAG définissent des seuils précis que les concepteurs, développeurs et créateurs de contenus doivent respecter pour rendre leurs interfaces accessibles.
Les critères de validation pour le texte et l'interface
L'évaluation de l'accessibilité d'une combinaison de couleurs s'articule autour de trois catégories d'éléments visuels, chacune associée à des exigences de contraste spécifiques:
- Texte courant: Cette catégorie regroupe les caractères de taille standard. Pour atteindre le niveau AA, un rapport de contraste minimal de 4.5:1 est requis. Pour le niveau AAA, plus exigeant, le rapport doit atteindre au moins 7:1.
- Grand texte: Les caractères de plus grande taille restent lisibles avec un contraste inférieur. Le niveau AA est validé dès que le rapport atteint 3:1, tandis que le niveau AAA exige un rapport minimal de 4.5:1.
- Interface et images: Cette catégorie concerne les composants d'interface utilisateur et les éléments graphiques fonctionnels. Contrairement au texte, cette évaluation ne comporte pas de distinction entre les niveaux AA et AAA. Elle est soumise à un seuil unique de validation fixé à 3:1.
Le tableau ci-dessous résume les seuils de conformité appliqués par l'outil:
| Élément visuel | Seuil Niveau AA | Seuil Niveau AAA |
|---|---|---|
| Texte courant | ≥ 4.5:1 | ≥ 7:1 |
| Grand texte | ≥ 3:1 | ≥ 4.5:1 |
| Interface et images | ≥ 3:1 (Seuil unique) | Non applicable |
Définition du grand texte et du texte courant
Pour appliquer correctement ces règles, il convient de définir précisément la frontière entre le texte courant et le grand texte. Selon les critères du W3C, un texte est considéré comme grand s'il répond à l'un des critères suivants:
- Une taille de police d'au moins 18pt (ce qui correspond à environ 24px).
- Une taille de police d'au moins 14pt (environ 18,5px) à la condition d'être en gras.
Tout texte ne répondant pas à ces critères de dimension ou de graisse est traité comme du texte courant et se voit appliquer les seuils de contraste les plus stricts (4.5:1 pour le niveau AA et 7:1 pour le niveau AAA).
Utilisation des formats de couleur et de l'interface
L'outil permet d'analyser les associations de couleurs en saisissant directement les valeurs dans les champs dédiés. Les formats de couleur acceptés sont les suivants:
- Les valeurs hexadécimales (par exemple,
#1a1a1a). - Les valeurs de type
rgb()(par exemple,rgb(26, 26, 26)). - Les valeurs de type
hsl().
Par défaut, l'outil s'initialise avec la couleur #4f46e5 pour le texte et #ffffff pour le fond, ce qui génère un rapport de contraste initial de 6.29:1.
Si une valeur saisie est incorrecte ou non reconnue, l'interface affiche un message d'erreur spécifique. Pour un problème lié à la couleur du texte, le message est: "Saisissez une couleur de texte valide, comme #1a1a1a ou rgb(26, 26, 26).". Pour la couleur de fond, le message d'erreur est: "Saisissez une couleur de fond valide, comme #ffffff ou rgb(255, 255, 255).".
Un bouton d'inversion permet d'échanger instantanément la couleur du texte et la couleur de fond afin de tester la combinaison inverse.
Interprétation des verdicts de conformité
Après analyse de la combinaison de couleurs, l'outil affiche un verdict clair résumant le niveau d'accessibilité maximal atteint:
- Valide AA et AAA pour le texte courant.: La combinaison atteint ou dépasse un rapport de 7:1, garantissant une accessibilité maximale pour tous les types de textes.
- Valide AA pour le texte courant.: Le rapport est d'au moins 4.5:1 mais reste inférieur à 7:1. Le texte courant respecte la norme standard AA.
- Valide AA pour le grand texte uniquement.: Le rapport se situe entre 3:1 et 4.4:1. La combinaison est insuffisante pour du texte standard, mais convient pour les grands titres ou les composants d'interface.
- Sous le minimum AA — augmentez le contraste.: Le rapport est inférieur à 3:1. La combinaison ne respecte pas les critères minimaux d'accessibilité et doit être modifiée.
Confidentialité et traitement des données
Le traitement des données s'effectue localement. Chaque vérification se fait dans votre navigateur. Rien de ce que vous saisissez n’est envoyé à BroBroGo. Les valeurs de couleur et les calculs de contraste associés restent confinés à votre session de navigation locale.
Questions fréquemment posées
Que signifient les résultats AA et AAA? AA est le niveau visé par la plupart des sites: il exige un rapport d’au moins 4.5:1 pour le texte courant et 3:1 pour le grand texte. AAA est plus exigeant — 7:1 pour le texte courant et 4.5:1 pour le grand texte. Le rapport va de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
Qu’entend-on par grand texte? Un texte à partir de 18pt (environ 24px), ou 14pt (environ 18,5px) en gras. Le grand texte reste lisible avec moins de contraste: il valide donc AA dès 3:1 et AAA dès 4.5:1, au lieu des seuils plus stricts appliqués au texte courant.
Quis ont besoin de cet outil? Cet outil s'adresse aux designers qui vérifient la lisibilité des textes et des composants, aux développeurs soucieux de respecter les normes d'accessibilité, ainsi qu'aux équipes de contenu qui valident le contraste des couleurs de leurs supports de communication.
Quels formats de couleur puis-je saisir? Tapez une valeur hex comme #1a1a1a, une valeur rgb() comme rgb(26, 26, 26) ou une valeur hsl() — ou cliquez sur l’une des pastilles pour choisir une couleur. Le bouton d’inversion échange les couleurs du texte et du fond.
S’agit-il de WCAG 2 ou de la nouvelle méthode APCA? L’outil applique la formule WCAG 2.1 / 2.2, celle sur laquelle s’appuient aujourd’hui les règles d’accessibilité et les audits. APCA est une méthode plus récente et plus perceptuelle, encore en préparation pour WCAG 3 — prometteuse, mais pas encore un standard de conformité: les résultats affichés ici ne l’utilisent donc pas.