Français
Menu du site

contrast-minimum

Le texte respecte le contraste des couleurs minimal (AA)

automaticWCAG 1.4.3 (AA)confiance : highgravité : seriousperceivable

Vérifie que le texte visible a un ratio de contraste d’au moins 4.5:1 (normal) ou 3: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.3 pour sa taille : 3:1 pour le grand texte, 4.5: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. C’est contrast-computable qui décide de ce qu’il faut mettre en question aux ratios de WCAG. Aux ratios propres de cette règle (les réglages d’une variante), un texte en deux couleurs qui ne divergent qu’à ces ratios, et un texte tracé par un contour ou une ombre dont la meilleure couleur les atteint mais pas le ratio AA de WCAG, sont mis en question ici (PSEUDO_ELEMENT_COLOR, TEXT_STROKE, TEXT_SHADOW), puisqu’aucune autre règle ne le ferait. Un texte tracé par un contour dont la meilleure couleur se situe entre le ratio AA de WCAG et un ratio plus élevé de la variante échoue ici et est aussi mis en question par contrast-computable : deux réponses à deux exigences, celle de la variante et le critère 1.4.3 de WCAG. 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. 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, quel que soit le mode de contraste : la couleur Canvas du jeu de couleurs dans lequel la page est dessinée, que fixe le color-scheme propre de la page (sur la racine, ou dans <meta name="color-scheme">), tel que le définit CSS Color Adjustment 1. Une page qui ne déclare aucun jeu de couleurs est dessinée en clair, sur blanc, quelle que soit la préférence de l’utilisateur ; une page qui ne déclare que dark, sur le canevas sombre. Dans un navigateur, les couleurs sont lues sur la page ; un émulateur (jsdom), qui ne résout aucune couleur système, prend celles de Chromium (#121212 pour le canevas sombre, #ffffff pour le texte que donne un jeu de couleurs sombre). Un canevas que nomme l’analyse, lorsque contrast.rootCanvasFallback en fournit un, est mesuré à sa place. Là où le canevas ne peut pas être connu (dans un cadre, où la page qui l’entoure peut transparaître ; en couleurs forcées, où c’est la palette de l’utilisateur), le texte est laissé à contrast-computable, ou mesuré sur la couleur de repli avec le mode auditorAssist. Une page qui prend en charge les deux jeux de couleurs (light dark) est dessinée dans celui que préfère l’utilisateur. L’analyse voit celui-là (dans un navigateur, tel qu’il est dessiné ; jsdom dessine en clair), et son texte y est mesuré et, là où ses couleurs ne peuvent pas changer avec le jeu de couleurs, dans l’autre aussi, sur le canevas de ce dernier : ce n’est pas le cas lorsqu’une règle dans une requête prefers-color-scheme, une valeur light-dark() ou une couleur système (autre que les couleurs de texte et de lien propres au jeu de couleurs, lorsqu’aucune règle ne colore le texte) atteint la couleur du texte ou un arrière-plan derrière lui. Il échoue s’il échoue dans l’un des jeux de couleurs mesurés, et réussit s’il réussit dans chacun.

Ce que rapporte un constat.

  • metrics.ratio (texte sous le seuil) : le rapport de contraste du texte avec son arrière-plan (4.5 pour 4,5:1), comparé à metrics.threshold, le rapport qu’exige sa taille.
  • colors.foregroundHex, colors.backgroundHex (texte sous le seuil) : la couleur du texte (la -webkit-text-fill-color avec laquelle il est peint, color si elle n’est pas définie) et la couleur de l’arrière-plan derrière lui, en hexadécimal, après fusion de toute transparence. colors.foregroundRgba et colors.backgroundRgba donnent les deux mêmes couleurs sous forme rgba().
  • 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é.
  • typography.fontSizePx, typography.fontSizePt (texte sous le seuil) : la taille de police telle qu’elle est dessinée, en pixels CSS et en points : 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 (sa valeur d’ajustement rapportée à l’aspect propre de la police, lu dans un navigateur). C’est sur cette taille qu’est jugé le seuil du grand texte, comme la « size when the content is delivered » de WCAG.
  • typography.declaredFontSizePx, typography.sizeScaledBy (texte sous le seuil, 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 (texte sous le seuil) : la graisse calculée sous forme de nombre (400, 700) et telle qu’écrite.
  • typography.isBold, typography.isLargeText (texte sous le seuil) : si le texte compte comme gras, et comme grand texte, la taille qui n’exige que 3:1.
  • Les champs de rapport, de seuil et de typographie ci-dessus sont un contrat stable, contrairement au reste de data.details.
  • assumptionsApplied, assumedRootCanvasColor (texte sous le seuil) : null sauf si la page ne définit aucun arrière-plan opaque et que le texte a été mesuré sur une couleur de canevas 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), sur la couleur de repli (blanc par défaut). assumptionsApplied vaut alors ['ROOT_CANVAS_FALLBACK'] et assumedRootCanvasColor est cette couleur.
  • colorScheme (texte sous le seuil, sur le canevas d’une page qui prend en charge le clair et le sombre) : 'light' ou 'dark', le jeu de couleurs dans lequel il reste en dessous, alors qu’il réussit dans l’autre, et l’indication le nomme ; le rapport et les couleurs sont ceux de ce jeu de couleurs. Absent lorsqu’il reste en dessous dans chaque jeu de couleurs mesuré (il est alors signalé dans le jeu de couleurs dans lequel la page est dessinée) et sur une page à un seul jeu de couleurs.
  • colorSchemesChecked (texte sous le seuil, et le pass) : les jeux de couleurs dans lesquels le texte sur le canevas a été mesuré, ['light'] ou ['dark'], lorsque la page prend en charge les deux et que l’un n’a pas pu être mesuré. Un binding peut relancer l’analyse avec le navigateur dans l’autre jeu de couleurs. Absent lorsque chaque jeu de couleurs que prend en charge la page a été mesuré.
  • generatedBy (texte généré sous le seuil) : ::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 récapitulatif lorsque rien n’échoue) : le nombre de nœuds de texte examinés par la règle, et combien d’entre eux avaient des couleurs qu’elle a pu calculer. Répétés sous metrics sur un pass.
  • 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:#767676;">Body text</p>

Environ 4.6:1, au-dessus du minimum AA de 4.5:1 pour le texte normal.

fail
<div style="background:#ffffff;">
  <div style="opacity:0.5; background:#ffffff;">
    <p style="color:#000000;">Body text</p>
  </div>
</div>

Une opacité d’ancêtre (de groupe) de 50 % sur fond blanc se compose en un gris uni d’environ 4:1, sous le minimum AA.

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_SWITCH_OFFERED

  1. Repérez le sélecteur de contraste indiqué par le rapport et vérifiez qu’il est facile à trouver, en haut de la page ou sur chaque page, et accessible au clavier.
  2. Activez le sélecteur.
  3. Repérez le texte indiqué par le rapport et, 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 par rapport à son arrière-plan en comparant à 4,5:1 (3:1 pour le texte de grande taille : au moins 24px, ou 18.66px en gras).
  4. Passez à une autre page et vérifiez que le réglage est conservé.

Réussite. Le sélecteur est facile à trouver et à utiliser, et une fois activé, le texte atteint son ratio (G174).

Échec. Le sélecteur est difficile à trouver ou n’amène pas ce texte à son ratio : le texte ne respecte donc pas le critère WCAG 1.4.3.

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 à 4,5:1 (3: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.3.

LOGO_TEXT_BELOW_THRESHOLD

  1. Repérez le texte indiqué par le rapport (souvent dans l’en-tête du site ou son lien vers l’accueil).
  2. Déterminez s’il fait partie d’un logo ou d’un nom de marque, comme le nom du site dans son traitement de logo, plutôt que d’un slogan, d’un élément de menu ou d’un autre texte.
  3. S’il ne s’agit pas du texte d’un logo, 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 par rapport à son arrière-plan et comparez à 4,5:1 (3:1 pour le texte de grande taille : au moins 24px, ou 18.66px en gras).

Réussite. Le texte fait partie d’un logo ou d’un nom de marque, qui n’a pas d’exigence de contraste, ou il atteint son ratio.

Échec. Le texte ne fait pas partie d’un logo ou d’un nom de marque et reste sous son ratio, ce qui ne respecte pas le critère WCAG 1.4.3.

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 à 4,5:1 (3: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 4,5:1 (ou 3: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.3.

PSEUDO_ELEMENT_COLOR

  1. Repérez le texte indiqué par le rapport et notez la couleur de ::first-line ou ::first-letter dans le panneau Styles.
  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 fois la couleur du texte de l’élément et la couleur de la première ligne ou de la première lettre par rapport à l’arrière-plan.
  3. Redimensionnez la fenêtre pour voir à quels mots la couleur de la première ligne s’applique selon la largeur.
  4. Comparez chaque ratio à celui que le rapport indique comme requis pour cette couleur : 4,5:1 pour la plupart des textes, ou 3:1 pour le texte de grande taille (au moins 24px, ou 18.66px en gras).

Réussite. Les deux couleurs atteignent le ratio qui leur est requis.

Échec. L’une des couleurs donne un ratio inférieur à celui qui lui est requis : le texte ne satisfait pas à la vérification.

SEMIBOLD_BELOW_THRESHOLD

  1. Repérez le texte en demi-gras indiqué par le rapport.
  2. Comparez-le côte à côte avec un texte en gras (graisse 700) de même taille et de même police sur la page ou dans les outils de développement, en basculant font-weight.
  3. Déterminez s’il se lit comme du gras ; si oui, il compte comme texte de grande taille et doit atteindre 3:1, sinon 4,5:1.

Réussite. Le texte se lit comme du gras : c’est donc un texte de grande taille et son ratio atteint 3:1.

Échec. Le texte ne se lit pas comme du gras : c’est donc un texte normal sous 4,5:1, ce qui ne respecte pas le critère WCAG 1.4.3.

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 à 4,5:1 (3: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 4.5:1, ce qui ne respecte pas le critère WCAG 1.4.3 ; 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.

TEXT_SHADOW

  1. Repérez le texte indiqué par le rapport et notez son text-shadow.
  2. Zoomez et vérifiez si l’ombre forme un contour plein ou un halo autour de chaque lettre.
  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 la couleur qui forme les lettres par rapport à l’arrière-plan.
  4. Comparez le ratio à celui que le rapport indique comme requis : 4,5:1 pour la plupart des textes, ou 3:1 pour le texte de grande taille (au moins 24px, ou 18.66px en gras).

Réussite. La couleur qui forme les lettres atteint le ratio requis.

Échec. La couleur qui forme les lettres donne un ratio inférieur au ratio requis : le texte ne satisfait pas à la vérification.

TEXT_STROKE

  1. Repérez le texte indiqué par le rapport et notez l’épaisseur et la couleur de son -webkit-text-stroke.
  2. Zoomez pour voir quelle couleur forme l’essentiel de chaque lettre (un contour fin compte moins que le remplissage).
  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 cette couleur par rapport à l’arrière-plan.
  4. Comparez le ratio à celui que le rapport indique comme requis : 4,5:1 pour la plupart des textes, ou 3:1 pour le texte de grande taille (au moins 24px, ou 18.66px en gras).

Réussite. La couleur qui forme les lettres atteint le ratio requis.

Échec. La couleur qui forme les lettres donne un ratio inférieur au ratio requis : le texte ne satisfait pas à la vérification.

Voir le code source