Français
Menu du site

contrast-enhanced

Le texte respecte le contraste des couleurs renforcé (AAA)

automaticWCAG 1.4.6 (AAA)confiance : highgravité : seriousperceivable

Vérifie que le texte visible a un ratio de contraste d’au moins 7:1 (normal) ou 4.5:1 (grand), lorsque le contraste peut être calculé à partir du CSS.

Applicabilité. S’applique au texte visible auquel s’applique contrast-computable (voir cette règle pour les conditions d’éligibilité), restreint au texte dont l’arrière-plan et le premier plan peuvent réellement être calculés. Un texte éligible non calculable rend cette règle notApplicable plutôt que cantTell : signaler cette incertitude revient à contrast-computable, si bien que les deux ne signalent jamais deux fois le même texte.

Attendu. Chaque nœud texte calculable atteint le ratio qu’exige le critère 1.4.6 pour sa taille : 4.5:1 pour le grand texte, 7:1 pour tout le reste. Un texte est grand à partir de 24px, ou à partir de 14pt (environ 18.667px) lorsque la graisse calculée est de 700 ou plus. (n) => Un texte tracé par un -webkit-text-stroke ou un text-shadow est laissé à contrast-computable, sauf lorsque chaque couleur dans laquelle il est tracé, y compris son remplissage à moins que celui-ci ne dessine rien (transparent, ou de la couleur de son arrière-plan), est sous le ratio par rapport à un arrière-plan uni : aucune lecture ne peut alors satisfaire au critère, et il échoue, mesuré d'après la meilleure de ces couleurs (\drawnBy\ : \textStroke\ ou \textShadow\). Marge (\contrast-ratio\) : parmi les textes qui atteignent leur ratio, l'élément qui en est le plus proche, avec son ratio non arrondi comparé à celui qu'exige sa taille ; \context.largeText\ indique lequel. Seul un texte à moins de 10 % de son ratio compte comme proche : un texte plus au-dessus ne donne donc aucune marge. \measuredCount\ compte les éléments dont le contraste a été calculé. Un texte dont une partie est peinte par un ::first-line ou un ::first-letter dans une couleur propre est mesuré dans les deux couleurs : là où les deux atteignent leur ratio, il réussit, là où les deux restent en dessous, il échoue (\pseudoElementColor\ nomme le pseudo-élément), et là où elles divergent, il est laissé à contrast-computable. Un texte sans arrière-plan opaque derrière lui, jusqu’à la racine, est mesuré sur le canevas que le navigateur peint sous la page, dans le jeu de couleurs dans lequel la page est dessinée et, sur une page qui prend en charge le clair et le sombre, dans l’autre aussi là où ses couleurs ne peuvent pas changer avec le jeu de couleurs, comme le décrit contrast-minimum. Un texte de taille normale dont l’arrière-plan ne peut pas être déterminé échoue quand même lorsque sa couleur ne peut atteindre 7:1 sur aucun arrière-plan (CONTRAST_UNREACHABLE_ANY_BACKGROUND, metrics.bestRatio : son ratio par rapport au blanc ou au noir, le plus élevé des deux). Un placeholder de champ sous son ratio (PLACEHOLDER_BELOW_THRESHOLD) échoue lorsque la page a choisi ses couleurs : la couleur, l’opacité ou l’arrière-plan du placeholder, ou l’arrière-plan du champ, diffèrent de ceux du navigateur, lus dans un cadre vierge. Un placeholder laissé dans les couleurs propres du navigateur est considéré comme atteignant le ratio (WCAG G148), et lorsque cela ne peut pas être établi, c’est une occurrence cantTell.

Ce que rapporte un constat.

  • metrics.ratio (un fail) : le rapport de contraste du texte, par exemple 4.5 pour 4,5:1, non arrondi, comparé à metrics.threshold (7, ou 4.5 pour le grand texte).
  • colors.foregroundHex, colors.backgroundHex (un fail) : les couleurs du texte et de l’arrière-plan à partir desquelles le rapport a été calculé, en hexadécimal (le texte dans la -webkit-text-fill-color avec laquelle il est peint, color si elle n’est pas définie). Une couleur de texte semi-transparente est d’abord fusionnée avec l’arrière-plan.
  • selectField (un select déroulant sur l’arrière-plan propre du navigateur) : backgroundHex, son arrière-plan calculé, et fieldHex, la couleur Field dans laquelle Chromium le peint. Le texte est mesuré par rapport aux deux et le rapport le plus faible est signalé.
  • colors.foregroundRgba, colors.backgroundRgba (un fail) : les mêmes couleurs sous forme de chaînes rgba().
  • typography.fontSizePx, typography.fontSizePt (un fail) : la taille de police telle qu’elle est dessinée (la taille calculée multipliée par le zoom CSS ou, pour du texte SVG, par l’échelle de sa viewBox et de ses transformations, et multipliée par le facteur d’échelle qu’applique font-size-adjust à la police), en pixels CSS et en points.
  • typography.declaredFontSizePx, typography.sizeScaledBy (un fail dessiné à une autre taille) : la font-size calculée, et ce qui l’a fait dessiner autrement (zoom, svg, font-size-adjust). Lorsque cela place le texte de l’autre côté de la limite du grand texte, l’indication le dit (contrast_hint_drawnSize).
  • typography.fontWeight, typography.fontWeightLabel, typography.isBold (un fail) : la graisse calculée sous forme de nombre, bold (700 ou plus) ou normal, et si elle compte comme gras.
  • typography.isLargeText (un fail) : si le texte compte comme grand texte, ce qui fixe le seuil.
  • Les champs de rapport, de seuil et de typographie ci-dessus sont un contrat stable, contrairement au reste de data.details.
  • assumptionsApplied, assumedRootCanvasColor (un fail) : null sauf si l’arrière-plan de la page n’est jamais devenu opaque et a été supposé reposer sur une couleur de canevas : celle que nomme l’analyse (contrast.rootCanvasFallback) ou, avec le mode auditorAssist là où le canevas propre de la page ne peut pas être connu (dans un cadre, en couleurs forcées), la couleur de repli. assumptionsApplied vaut alors ["ROOT_CANVAS_FALLBACK"] et assumedRootCanvasColor est cette couleur. Un texte sur le canevas que lui donne le jeu de couleurs de la page est mesuré sur ce canevas, sans l’un ni l’autre.
  • colorScheme (un fail sur le canevas d’une page qui prend en charge le clair et le sombre) : 'light' ou 'dark', le jeu de couleurs dans lequel le texte reste en dessous, alors qu’il réussit dans l’autre ; absent lorsqu’il reste en dessous dans chaque jeu de couleurs mesuré.
  • colorSchemesChecked (un fail, et le pass) : les jeux de couleurs dans lesquels le texte sur le canevas a été mesuré, lorsque la page prend en charge les deux et que l’un n’a pas pu être mesuré.
  • generatedBy (un fail sur du texte généré) : ::before, ::after ou ::marker, le pseudo-élément dont le texte est mesuré ; le sélecteur nomme son élément, et les couleurs et la police sont celles du pseudo-élément.
  • eligibleTextCount, computableTextCount (le pass, et le résultat notApplicable lorsqu’aucun texte n’était calculable) : le nombre de nœuds de texte dans le périmètre, et combien d’entre eux avaient des couleurs qui ont pu être déterminées. Le pass répète les deux sous metrics.
  • forcedColors (chaque occurrence, lorsque les couleurs mesurées étaient forcées) : true, et l’indication invite à revérifier la page avec les couleurs forcées désactivées. Une analyse en couleurs forcées mesure les couleurs propres de la page ; ce champ n’est donc présent que là où elle n’a pas pu maintenir la page dans ces couleurs.

Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.

Marge. Cette règle mesure contrast-ratio sous forme de rapport, et la valeur doit atteindre le seuil. Quand une réussite est passée près du seuil, le champ margin du résultat désigne l’élément qui s’en est le plus approché tout en le respectant, si bien qu’un résultat qu’un petit changement ferait basculer se voit avant de basculer. Contrairement aux champs d’un constat, c’est un contrat stable. Voir Schéma de sortie.

Exemples

pass
<p style="background:#ffffff; color:#000000;">Body text</p>

Le noir sur blanc donne environ 21:1, bien au-dessus du seuil AAA de 7:1.

fail
<p style="background:#ffffff; color:#767676;">Body text</p>

Le gris sur blanc donne environ 4.6:1 : il respecte le minimum AA mais n’atteint pas le seuil AAA plus strict de 7:1.

Comment vérifier

Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.

CONTRAST_UNREACHABLE_ANY_BACKGROUND

  1. Repérez le texte indiqué par le rapport et notez sa couleur, que le rapport donne.
  2. Avec un calculateur de contraste, mesurez cette couleur par rapport au blanc et par rapport au noir.
  3. Comparez le plus élevé des deux ratios à 7:1.

Réussite. Par rapport au blanc ou au noir, la couleur du texte atteint 7:1 : un arrière-plan peut donc lui faire atteindre le ratio ; mesurez-la alors par rapport à son propre arrière-plan.

Échec. Par rapport au blanc comme au noir, la couleur du texte reste en dessous de 7:1 : aucun arrière-plan ne lui fait atteindre le ratio, ce qui ne respecte pas le critère WCAG 1.4.6.

ENGINE_EXCEPTION

  1. Repérez le texte indiqué par le rapport (la vérification s’est arrêtée tôt, donc rien n’a été mesuré).
  2. Avec la pipette de couleur des outils de développement du navigateur, ou un calculateur de contraste alimenté par des couleurs prélevées à la pipette, mesurez la couleur du texte par rapport à l’arrière-plan situé juste derrière les lettres.
  3. Notez la taille et la graisse du texte et comparez le ratio à 7:1 (4,5:1 pour le texte de grande taille : au moins 24px, ou 18.66px en gras).

Réussite. Le ratio atteint le seuil correspondant à sa taille.

Échec. Le ratio est inférieur au seuil correspondant à sa taille, ce qui ne respecte pas le critère WCAG 1.4.6.

PLACEHOLDER_BELOW_THRESHOLD

  1. Repérez le champ indiqué par le rapport et videz-le pour que le placeholder s’affiche.
  2. Dans le panneau Styles, vérifiez si le CSS de la page définit la couleur ou l’opacité de ::placeholder, ou l’arrière-plan du champ.
  3. Avec la pipette de couleur des outils de développement du navigateur, ou un calculateur de contraste alimenté par des couleurs prélevées à la pipette, mesurez le texte du placeholder par rapport à l’arrière-plan du champ et comparez à 7:1 (4,5:1 pour le texte de grande taille : au moins 24px, ou 18.66px en gras).
  4. Vérifiez si le placeholder contient une information nécessaire pour remplir le champ (un format ou une consigne), plutôt qu’un simple exemple.

Réussite. Le placeholder atteint 7:1 (ou 4,5:1 s’il est de grande taille), ou il est entièrement dessiné avec les couleurs par défaut du navigateur.

Échec. La page définit les couleurs du placeholder ou du champ et le ratio est inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.6.

SYMBOLIC_CHARACTER_BELOW_THRESHOLD

  1. Repérez le caractère indiqué par le rapport (comme ×, ☰, › ou un glyphe de police d’icônes).
  2. Déterminez s’il s’agit d’un texte que l’on lit (une partie de mot, un nombre) ou d’une icône qui représente une action, comme un symbole de fermeture ou de menu.
  3. S’il s’agit de texte, avec la pipette de couleur des outils de développement du navigateur, ou un calculateur de contraste alimenté par des couleurs prélevées à la pipette, mesurez le caractère par rapport à son arrière-plan et comparez à 7:1 (4,5:1 pour le texte de grande taille : au moins 24px, ou 18.66px en gras).
  4. S’il s’agit d’une icône, vérifiez d’abord si un texte visible à côté dit la même chose, comme le mot « Fermer » à côté d’un symbole de fermeture. Dans ce cas, l’icône n’est pas le seul moyen de la comprendre et n’a pas besoin du rapport 3:1.
  5. Sinon, mesurez l’icône par rapport à son arrière-plan et comparez avec 3:1 (WCAG 1.4.11).

Réussite. C’est du texte qui atteint son rapport, ou une icône qui atteint 3:1 ou dont le sens est aussi donné par un texte visible à côté.

Échec. C’est du texte sous 7:1, ce qui ne respecte pas le critère WCAG 1.4.6 ; ou une icône sous 3:1 qui est le seul moyen visible de savoir ce qu’elle signifie ou fait, ce qui ne respecte pas le critère WCAG 1.4.11.

Voir le code source