Fonctionnement des normes de contraste WCAG 2.1 / 2.2
Le respect des critères d'accessibilité numérique repose en grande partie sur la lisibilité des éléments textuels et visuels par rapport à leur arrière-plan. Cet outil calcule le rapport de contraste précis entre une couleur de texte et une couleur de fond en appliquant la formule officielle des directives WCAG 2.1 / 2.2.
Le rapport de contraste obtenu s'étend sur une échelle allant de 1:1, ce qui correspond à une absence totale de contraste (par exemple, du texte blanc sur un fond blanc), jusqu'à 21:1, représentant le contraste maximal possible (du texte noir sur un fond blanc). L'outil évalue la conformité selon deux niveaux d'exigence distincts: le niveau AA, qui constitue la cible réglementaire standard pour la majorité des sites Web, et le niveau AAA, qui représente le niveau d'accessibilité le plus rigoureux.
Chaque vérification s'effectue directement dans votre navigateur. Rien de ce que vous saisissez n'est téléversé vers BroBroGo.
Saisie des données de couleur et formats acceptés
Pour effectuer une analyse, vous devez définir deux paramètres distincts:
- Couleur du texte: La valeur de la couleur appliquée aux caractères.
- Couleur de fond: La valeur de la couleur de l'arrière-plan.
L'outil accepte trois formats de notation CSS standards:
- Les valeurs hexadécimales, par exemple
#1a1a1a. - Les valeurs de type
rgb(), par exemplergb(26, 26, 26). - Les valeurs de type
hsl().
Au démarrage, l'outil est configuré avec les valeurs initiales #4f46e5 pour le texte et #ffffff pour l'arrière-plan, ce qui génère un rapport de contraste initial de 6,29:1. Un bouton d'inversion permet de permuter instantanément les couleurs du texte et de l'arrière-plan afin de tester rapidement la configuration inverse.
En cas de saisie erronée, l'interface affiche des messages d'erreur spécifiques:
- Si la couleur du texte est incorrecte: « Saisissez une couleur de texte valide, comme #1a1a1a ou rgb(26, 26, 26). »
- Si la couleur de fond est incorrecte: « Saisissez une couleur de fond valide, comme #ffffff ou rgb(255, 255, 255). »
Seuils de validation pour le texte normal et le grand texte
Les exigences de contraste diffèrent selon la taille des caractères, car les polices de grande taille ou à forte graisse restent lisibles avec un contraste inférieur. Les directives WCAG établissent une distinction claire entre deux catégories de texte:
| Catégorie de texte | Définition physique | Seuil minimal AA | Seuil minimal AAA |
|---|---|---|---|
| Texte normal | Moins de 18 pt (environ 24 px), ou moins de 14 pt (environ 18,5 px) si en gras. | 4,5:1 | 7:1 |
| Grand texte | Au moins de 18 pt (environ 24 px), ou au moins de 14 pt (environ 18,5 px) si en gras. | 3:1 | 4,5:1 |
L'outil analyse les valeurs saisies et attribue pour chaque catégorie la mention « Réussite » ou « Échec » face aux exigences AA et AAA.
Exigences pour l'interface et les composants graphiques
L'accessibilité ne se limite pas aux blocs de texte. Les éléments interactifs, tels que les bordures de champs de formulaire, les boutons et les icônes informatives, doivent également se détacher de leur arrière-plan pour être identifiables.
Pour la ligne « Interface et graphiques », les critères WCAG 2.1 / 2.2 imposent un seuil de validation unique fixé à 3:1. Contrairement au texte, cette catégorie ne comporte pas de distinction entre les niveaux AA et AAA. L'outil affiche donc un résultat unique (« Réussite » ou « Échec ») basé exclusivement sur ce seuil de 3:1.
Interprétation des verdicts de conformité
Après avoir calculé le rapport de contraste, l'outil affiche une synthèse claire sous la forme d'un verdict. Ce message indique le niveau de conformité le plus élevé atteint par votre combinaison de couleurs:
- « Valide les niveaux AA et AAA pour le texte normal. »: Le rapport est égal ou supérieur à 7:1.
- « Valide le niveau AA pour le texte normal. »: Le rapport est égal ou supérieur à 4,5:1, mais inférieur à 7:1.
- « Valide le niveau AA pour le grand texte uniquement. »: Le rapport est égal ou supérieur à 3:1, mais inférieur à 4,5:1.
- « Sous le seuil minimal AA — augmentez le contraste. »: Le rapport est inférieur à 3:1, ce qui ne respecte pas les exigences minimales d'accessibilité pour le texte.
Foire aux questions
Que signifient les résultats AA et AAA?
Le niveau AA est la cible standard pour la majorité des sites Web: il requiert un rapport d'au moins 4,5:1 pour le texte normal et de 3:1 pour le grand texte. Le niveau AAA est plus exigeant — 7:1 pour le texte normal et 4,5:1 pour le grand texte. Le rapport de contraste s'étend de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
Qu'est-ce qui est considéré comme du grand texte?
Un texte d'au moins 18 pt (environ 24 px), ou 14 pt (environ 18,5 px) s'il est en gras. Les textes plus grands restent lisibles avec un contraste inférieur; ils valident donc le niveau AA à partir de 3:1 et le niveau AAA à partir de 4,5:1, plutôt que de devoir respecter les seuils plus stricts du texte normal.
Quels formats de couleur puis-je saisir?
Saisissez une valeur hexadécimale comme #1a1a1a, une valeur rgb() comme rgb(26, 26, 26), ou une valeur hsl() — ou cliquez sur l'un des échantillons pour choisir une couleur. Utilisez le bouton d'inversion pour permuter instantanément les couleurs du texte et de l'arrière-plan.
S'agit-il de la norme WCAG 2 ou de la nouvelle méthode APCA?
Cet outil utilise la formule WCAG 2.1 / 2.2, qui sert de référence actuelle pour les normes d'accessibilité et les audits. APCA est une méthode plus récente, basée sur la perception visuelle, en cours d'élaboration pour WCAG 3 — elle est prometteuse, mais ne constitue pas encore une norme de conformité officielle. C'est pourquoi les résultats de validation présentés ici ne l'utilisent pas.