Seuils de contraste WCAG AA et AAA sans les mythes

AA et AAA qualifient des exigences, pas des couleurs

WCAG 2.2 organise les critères de succès vérifiables en trois niveaux : A, AA et AAA. Le contraste minimal, critère 1.4.3, est une exigence de niveau AA. Le contraste renforcé, critère 1.4.6, est une exigence de niveau AAA. Une paire premier plan/arrière-plan ne possède donc pas intrinsèquement une note « couleur AA » ou « couleur AAA ». Elle possède un rapport mesuré, qui peut être évalué selon un critère précis pour un contenu précis.

Le contexte modifie le résultat. Un rapport de 4,6:1 satisfait le contraste minimal de niveau AA pour un texte normal et le contraste renforcé de niveau AAA pour un texte de grande taille, mais pas le seuil renforcé de 7:1 pour un texte normal. Dire seulement « cette combinaison est AAA » masque la catégorie du texte et le critère qui rend l’affirmation exacte.

Les quatre seuils de texte dans une seule matrice

Les critères minimal et renforcé portent sur les mêmes catégories de texte et les mêmes exceptions répertoriées, mais imposent des rapports différents. Comparez au seuil le résultat non arrondi. Une étiquette affichant 4,5:1 ne constitue pas une preuve suffisante si la valeur sous-jacente est 4,48:1.

• À 3,2:1, le texte de grande taille satisfait le minimum AA, mais le texte normal échoue et aucune catégorie ne satisfait le contraste renforcé.
• À 4,6:1, le texte normal satisfait AA ; le texte de grande taille satisfait les critères de contraste AA et AAA.
• À 6,5:1, le texte normal reste sous le seuil renforcé de 7:1, même s’il satisfait largement AA.
• À 7,1:1, le texte normal comme le texte de grande taille satisfont les critères de contraste minimal et renforcé.
• Un résultat de seuil s’applique au premier plan, à l’arrière-plan, à l’état et à la catégorie de texte rendus qui ont été testés, pas à tous les usages du même jeton.

Le texte de grande taille a une définition, pas une apparence

WCAG définit le texte de grande taille comme un texte d’au moins 18 points, ou d’au moins 14 points lorsqu’il est en gras, avec une taille équivalente prise en compte pour les polices CJK. Le document Understanding du W3C précise que CSS utilise 1pt = 1,333px, soit environ 24px et 18,5px. La définition normative repose sur la taille en points et la graisse, non sur le fait que le texte soit un titre, paraisse important, soit en capitales ou occupe une grande largeur.

• Utilisez la taille de police fournie par l’auteur avant tout zoom facultatif appliqué par l’utilisateur.
• Considérez 18pt ou environ 24 pixels CSS comme du texte de grande taille, quelle que soit la graisse.
• Considérez 14pt ou environ 18,5 pixels CSS comme du texte de grande taille uniquement lorsqu’il est en gras.
• Vérifiez la police réelle et la graisse calculée ; des formes de lettres inhabituellement fines ou peu familières peuvent rester difficiles à lire même au seuil.
• Retestez la typographie adaptative lorsqu’un titre de bureau devient plus petit sur mobile.
• Classez chaque style de texte séparément au lieu de déclarer un composant entier comme étant de grande taille.

Satisfaire le contraste AA ne signifie pas être conforme WCAG AA

Une page n’est conforme au niveau AA que si elle satisfait tous les critères de succès applicables de niveaux A et AA, ou fournit une version de remplacement conforme. Satisfaire le critère 1.4.3 apporte une preuve pour une exigence au sein d’un ensemble bien plus vaste. Cela ne teste ni l’accès au clavier, ni les équivalents textuels, les libellés, la gestion des erreurs, la redistribution, la visibilité du focus, la taille des cibles, la langue, la sémantique, ni les nombreuses autres exigences de ces niveaux.

• La conformité est cumulative : le niveau AA inclut tous les critères A ainsi que tous les critères AA.
• La conformité WCAG porte sur des pages web complètes ; un en-tête ou un composant conforme ne peut pas rendre conforme une page qui échoue par ailleurs.
• Lorsqu’une page constitue une étape d’un processus complet, toutes les pages de ce processus doivent être conformes au niveau annoncé.
• Seules les utilisations des technologies compatibles avec l’accessibilité peuvent être invoquées pour établir la conformité.
• Une déclaration formelle de conformité est facultative, mais si elle est faite, elle doit préciser la version, le niveau, le périmètre et les technologies utilisées exigés par WCAG.

Cette distinction est importante dans les rapports. Écrivez « la paire de texte testée satisfait le critère de succès WCAG 2.2 1.4.3 avec un rapport de 5,25:1 » lorsque les preuves ne montrent que cela. Réservez « la page est conforme à WCAG 2.2 niveau AA » à une évaluation de page couvrant tous les critères applicables et toutes les exigences de conformité.

Le contraste AAA ne signifie pas une conformité AAA de tout le site

Un rapport de 7:1 pour du texte normal démontre la partie numérique du critère de contraste renforcé de niveau AAA pour cette paire rendue. La conformité de niveau AAA est beaucoup plus large : la page doit satisfaire tous les critères A, AA et AAA. Le W3C déconseille explicitement d’exiger la conformité AAA comme politique générale pour des sites entiers, car certains contenus ne peuvent pas satisfaire tous les critères AAA.

• Utilisez le contraste 7:1 pour le texte normal et 4,5:1 pour le texte de grande taille comme objectifs renforcés utiles lorsqu’ils conviennent au design.
• Ne dégradez pas une paire robuste à 8:1 au seul motif que l’objectif formel du projet est le niveau AA.
• Ne présentez pas un produit entier comme AAA parce que les jetons de son système de design satisfont les valeurs de contraste renforcé.
• Consignez les critères AAA individuels satisfaits au-delà du niveau de conformité déclaré.
• Vérifiez qu’un contraste plus fort ne nuit ni à la hiérarchie ni à la compréhension, notamment dans les interfaces denses, tout en maintenant le minimum normatif.

Les exceptions sont étroites et les règles de contraste voisines restent applicables

Les critères 1.4.3 et 1.4.6 excluent le texte des composants d’interface inactifs, le texte purement décoratif ou invisible, le texte accessoire dans une image contenant un autre contenu visuel important, ainsi que le texte qui fait partie d’un logo ou d’un nom de marque. Ces catégories décrivent le rôle du contenu, pas une étiquette stylistique commode. Les textes secondaires, espaces réservés de champs actifs, textes éditoriaux aux couleurs de la marque, éléments de navigation et légendes ordinaires ne deviennent pas exemptés simplement parce qu’ils sont atténués ou associés à une marque.

• Documentez la justification chaque fois qu’une exception est appliquée.
• Confirmez qu’un texte désactivé appartient réellement à un contrôle inactif et non à un état actif peu mis en avant.
• Distinguez un logotype d’un texte ordinaire qui utilise simplement une police ou une couleur de marque.
• Évaluez les images de texte avec les mêmes critères de contraste, sauf si une exception répertoriée s’applique.
• Testez les contours des contrôles actifs, les indicateurs de focus et les graphiques porteurs de sens selon le critère Contraste non textuel lorsqu’il s’applique.
• Veillez à ce que la couleur ne soit pas le seul moyen visuel de transmettre une information.
• Continuez à vérifier le zoom, la redistribution, les substitutions d’espacement, la sémantique, le clavier et les technologies d’assistance.

Un vérificateur de contraste ne peut pas déduire de façon fiable tous ces rôles à partir de deux champs de couleur. Il peut calculer un rapport et le comparer à des seuils choisis. Une personne chargée de l’audit doit encore identifier le contenu, déterminer les couleurs finales rendues, sélectionner le bon critère, inspecter chaque état pertinent et replacer ce résultat dans une évaluation d’accessibilité plus large.

Consignez des preuves qu’une autre personne pourra reproduire

• Identifiez l’URL, le composant, l’état, la fenêtre d’affichage, le thème, la locale et l’échantillon de texte.
• Consignez la famille, la taille et la graisse de police calculées, ainsi que la qualification éventuelle de texte de grande taille.
• Résolvez alpha, superpositions, dégradés, images et valeurs héritées afin d’obtenir le premier plan et l’arrière-plan effectifs.
• Conservez le rapport en pleine précision et le seuil utilisé ; n’arrondissez que l’affichage destiné aux personnes.
• Nommez précisément le critère testé : minimum 1.4.3 ou renforcé 1.4.6.
• Consignez réussite, échec ou exception documentée sans transformer le résultat en déclaration au niveau de la page.
• Ajoutez un lien vers le texte WCAG principal et conservez la date de l’audit et le nom de la personne responsable.
• Suivez séparément les autres critères A, AA et les critères AAA facultatifs.

{
  "sample": "Primary button label",
  "state": "default",
  "foreground": "#FFFFFF",
  "background": "#4F46E5",
  "ratio": 6.2875,
  "text": { "sizePx": 16, "weight": 600, "largeScale": false },
  "criterion": "WCAG 2.2 1.4.3",
  "threshold": 4.5,
  "result": "pass"
}

Cette fiche indique exactement ce qui a satisfait le test et permet de le répéter après une modification de jeton ou de typographie. Color Atlas respecte la même limite : il calcule des preuves de contraste reproductibles, identifie les quatre seuils de texte et renvoie vers les documents W3C correspondants. Il ne transforme pas un rapport isolé en certification. Utilisez ces preuves pour étayer un audit complet de la page et du processus.