Français
Menu du site

contrast-computable

Le contraste des couleurs peut être calculé pour le texte affiché

automaticWCAG 1.4.3, 1.4.6 (AAA)confiance : highgravité : seriousperceivable

Détermine si l’on dispose de suffisamment d’informations pour calculer le contraste des couleurs WCAG du texte visible (p. ex. aucun dégradé, image ou mode de fusion qui rende l’arrière-plan indéterminable).

Applicabilité. S’applique à chaque nœud texte visible du périmètre, ainsi qu’au libellé des <input type="button">/[type="submit"]/[type="reset"], qui est rendu à partir de l’attribut value et échappe donc à un parcours des nœuds texte, ainsi qu’au texte qu’affiche un champ de formulaire : la valeur courante d’un <textarea> ou d’un <input> qui affiche du texte (text, search, email, url, tel, password, number, les types de date et d’heure) ou, tant que la valeur est vide, son placeholder, dans la couleur, la police, l’opacité et l’arrière-plan de ::placeholder (seulement là où le navigateur calcule ce style ; jsdom ne le fait pas). Le texte d’un <select> déroulant (sans multiple, d’une size de 1 ou sans size, hors appearance: base-select) compte comme celui du select, dessiné par le contrôle fermé dans ses couleurs, sa police et son arrière-plan : son option affichée, et toute autre option aux couleurs du select. Dans un navigateur, il en va de même du texte que génère le content d’un ::before ou d’un ::after (chaînes, attr() tel que le navigateur le résout, compteurs), et du texte du ::marker d’un élément de liste (un chiffre, une lettre ou une chaîne ; une puce ou une image n’est pas du texte), chacun évalué dans la couleur et la police du pseudo-élément, sur son élément ; jsdom ne calcule aucun style de pseudo-élément, si bien que ce texte y est laissé de côté. Le texte ne compte que si son élément est visible dans le DOM selon le mode de visibilité de l’exécution, n’est pas masqué par la technique sr-only (clip ou clip-path), et n’appartient ni à un contrôle désactivé ni au libellé d’un tel contrôle, l’exception WCAG pour les composants d’interface inactifs. Les sous-arbres exclus via engineOptions.excludeSelectors sont ignorés, et les shadow roots ouvertes sont parcourues comme des racines à part entière.

Attendu. Les deux termes du calcul de contraste peuvent être établis à partir du CSS pour chaque nœud texte concerné : un arrière-plan effectif qui se résout en couleur opaque, et une couleur de premier plan analysable. Lorsque l’un des deux ne peut pas l’être (image ou dégradé d’arrière-plan (un dégradé d’une seule couleur est cette couleur, et une couche qui ne peint rien sous le texte, comme un soulignement de 1px, est laissée de côté), mix-blend-mode, filter (autre qu’un drop-shadow() seul au-dessus d’un arrière-plan opaque sous tout le texte, qui masque l’ombre) ou backdrop-filter, text-shadow, qui peut ajouter un contraste que ce moteur, sans modèle de rendu des glyphes, ne sait pas prendre en compte, contour -webkit-text-stroke (tracé dans sa propre couleur, souvent sur la majeure partie du glyphe), ::first-line ou ::first-letter dans une couleur propre (le texte qu’il colore dépend des retours à la ligne), opacité sur un ancêtre, ou sur l’élément même du texte au-dessus de son propre arrière-plan, qui ne peut pas être résolue par rapport à ce qui se trouve derrière, arrière-plan racine jamais opaque là où le canevas de la page ne peut pas être connu (dans un cadre, en couleurs forcées ; ailleurs, le texte est mesuré sur le canevas, voir contrast-minimum), couleur impossible à analyser, option d’un <select> déroulant, autre que celle affichée, dotée de sa propre couleur, de son propre arrière-plan ou de sa propre opacité (SELECT_OPTION_COLOR : elle n’est affichée que dans la liste qu’ouvre le select, que la plateforme dessine dans ces couleurs ou dans les siennes), ou, dans un émulateur comme jsdom, couleur de texte impossible à déterminer dans le jeu de couleurs dans lequel la page est dessinée (COLOR_SCHEME_NOT_RENDERED)), le résultat est cantTell et nomme l’obstacle. C’est cette règle qui signale cette incertitude, ce qui permet à contrast-minimum et contrast-enhanced de rester silencieuses sur le même texte au lieu de deviner un ratio. Une exception : un texte tracé par un contour ou une ombre, dont chaque couleur, remplissage compris lorsqu’il est visible, est sous le ratio AA par rapport à un arrière-plan uni, échoue à contrast-minimum et contrast-enhanced, et n’est pas mis en question ici.

Ce que rapporte un constat.

  • blockerProperty, blockerValue (un effet CSS qui fait obstacle) : la propriété CSS qui bloque le calcul et sa valeur, par exemple mix-blend-mode, filter, text-shadow, -webkit-text-stroke ou opacity.
  • blockerSelector (un effet CSS qui fait obstacle) : un sélecteur pour l’élément qui le porte, qui peut être un ancêtre du texte.
  • backgroundFillType (une image ou un dégradé d’arrière-plan) : image, gradient, imageAndGradient ou unknown.
  • background, backgroundAlpha (un arrière-plan qui ne devient jamais opaque, ou une couleur impossible à analyser) : la couleur d’arrière-plan pour autant qu’elle ait pu être déterminée, sous forme de chaîne rgba(), et son opacité de 0 à 1.
  • eligibleTextCount (le pass) : le nombre de nœuds de texte vérifiés.
  • assumptionsCount, assumptionsApplied (le pass) : le nombre de nœuds de texte qui ont nécessité une hypothèse pour obtenir un arrière-plan, et lesquelles ont été faites. Chaque élément est un code ; ROOT_CANVAS_FALLBACK signifie qu’un arrière-plan de page qui ne devient jamais opaque a été supposé reposer sur la 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 cette couleur, blanc par défaut. Un texte mesuré sur le canevas que lui donne le jeu de couleurs de la page n’en nécessite aucune.
  • generatedBy (texte généré qui ne peut pas être mesuré) : ::before, ::after ou ::marker, le pseudo-élément dont le texte est mis en question ; le sélecteur nomme son élément. GENERATED_TEXT_UNREADABLE désigne un contenu dont le texte ne peut pas être lu (un compteur dans un style propre à la page), GENERATED_TEXT_POSITIONED un pseudo-élément sorti du flux sans arrière-plan opaque propre.
  • 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.

Exemples

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

Le premier plan et l’arrière-plan sont tous deux des couleurs unies et opaques, donc un ratio peut être calculé (qu’il réussisse ensuite AA/AAA ou non).

can't tell
<p style="background-image:url(texture.png); color:#000000;">Body text</p>

Un background-image derrière le texte n’est pas une couleur unie, donc aucun ratio de contraste ne peut être calculé.

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.

ANCESTOR_OPACITY

  1. Repérez le texte indiqué par le rapport et notez l’ancêtre dont l’opacity est inférieure à 1.
  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 le texte et l’arrière-plan tels qu’ils apparaissent à l’écran (atténués), avec la pipette sur la page rendue.
  3. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Les couleurs atténuées à l’écran atteignent le seuil, ou le texte atténué est un contrôle inactif (désactivé), qui est exempté.

Échec. Les couleurs atténuées à l’écran donnent un ratio inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6), sauf si le texte fait partie d’un contrôle inactif.

BACKGROUND_FILTER_OR_BACKDROP_FILTER

  1. Repérez le texte indiqué par le rapport et notez le filter ou le backdrop-filter appliqué au texte ou à un ancêtre (dans le panneau Styles des outils de développement).
  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 les couleurs du texte et de l’arrière-plan telles qu’elles apparaissent à l’écran avec le filtre appliqué, en utilisant la pipette sur la page rendue plutôt que les valeurs déclarées.
  3. Pour un flou ou un backdrop-filter au-dessus d’un contenu qui change, faites défiler la page ou attendez que différents contenus passent derrière, et vérifiez le pire cas.
  4. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Avec le filtre appliqué, le ratio à l’écran atteint le seuil.

Échec. Avec le filtre appliqué, le ratio à l’écran passe sous le seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

BACKGROUND_IMAGE_OR_GRADIENT

  1. Repérez le texte indiqué par le rapport et regardez l’image ou le dégradé situé derrière.
  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 aux zones les plus claires et les plus sombres de l’arrière-plan situé juste derrière les lettres.
  3. Si l’image change (diaporama, vidéo, images adaptatives), vérifiez chaque version, et ce à plusieurs largeurs de fenêtre.
  4. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Chaque partie de l’arrière-plan derrière les lettres donne au moins le ratio requis.

Échec. Une partie de l’arrière-plan derrière le texte donne un ratio inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

BACKGROUND_NOT_COMPUTABLE

  1. Repérez sur la page le texte indiqué par le rapport.
  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 à la couleur visible juste derrière les lettres, en retenant les points le plus sombre et le plus clair si elle varie.
  3. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Le ratio atteint le seuil partout derrière le texte.

Échec. Le ratio est inférieur au seuil à un endroit derrière le texte, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

BACKGROUND_NOT_OPAQUE_AT_ROOT

  1. Repérez le texte indiqué par le rapport ; la page ne définit aucun arrière-plan opaque derrière lui : ce qui s’y affiche est le canevas que peint le navigateur ou, dans un cadre, la page qui l’entoure.
  2. Affichez la page là où elle apparaît : dans la page qui l’intègre, sans couleurs forcées, et dans chaque jeu de couleurs qu’elle prend en charge (clair et sombre).
  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 par rapport à l’arrière-plan réellement visible dans chaque contexte.
  4. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Le ratio atteint le seuil dans tous les contextes où la page s’affiche.

Échec. Dans un des contextes où la page s’affiche, le ratio est inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

BACKGROUND_OVERLAP

  1. Repérez le texte indiqué par le rapport et vérifiez quel élément est réellement peint derrière lui (inspectez-le et masquez puis réaffichez l’élément qui le recouvre).
  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 à la couleur réellement visible derrière les lettres.
  3. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. La couleur réellement présente derrière le texte donne au moins le ratio requis.

Échec. La couleur réellement présente derrière le texte donne un ratio inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

BACKGROUND_UNPARSABLE

  1. Repérez le texte indiqué par le rapport et inspectez la valeur de la couleur d’arrière-plan dans les outils de développement (souvent une syntaxe récente comme oklch(), lab() ou color()).
  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 tel qu’il est rendu à l’écran.
  3. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Le ratio atteint le seuil.

Échec. Le ratio est inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

COLOR_SCHEME_NOT_RENDERED

  1. Ouvrez la page dans un navigateur réglé sur le jeu de couleurs indiqué par le rapport (blockerValue : light ou dark), ou émulez-le dans les outils de développement (Rendu, prefers-color-scheme).
  2. 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 dont les couleurs sont prélevées à la pipette, mesurez-le par rapport à l’arrière-plan qui se trouve derrière lui.
  3. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Dans ce jeu de couleurs, le ratio atteint le seuil.

Échec. Dans ce jeu de couleurs, le ratio est inférieur au seuil, ce qui ne satisfait pas WCAG 1.4.3 (ou 1.4.6).

ELEMENT_OPACITY

  1. Repérez le texte indiqué par le rapport et notez l’opacity inférieure à 1 sur son élément.
  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 le texte et l’arrière-plan tels qu’ils apparaissent à l’écran (atténués), avec la pipette sur la page rendue.
  3. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Les couleurs atténuées à l’écran atteignent le seuil, ou le texte atténué est un contrôle inactif (désactivé), qui est exempté.

Échec. Les couleurs atténuées à l’écran donnent un ratio inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6), sauf si le texte fait partie d’un contrôle inactif.

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 pour savoir s’il compte comme texte de grande taille (au moins 24px, ou 18.66px en gras).
  4. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

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 (ou 1.4.6).

FOREGROUND_UNPARSABLE

  1. Repérez le texte indiqué par le rapport et inspectez la valeur de sa couleur dans les outils de développement (souvent une syntaxe récente comme oklch(), lab() ou color()).
  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 telle qu’elle est rendue par rapport à son arrière-plan.
  3. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Le ratio atteint le seuil.

Échec. Le ratio est inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

GENERATED_TEXT_POSITIONED

  1. Repérez l’élément indiqué par le rapport et localisez à l’écran le texte que dessine son ::before ou son ::after (il est positionné à l’écart de son élément).
  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 de ce texte par rapport à ce qui s’affiche derrière lui à sa position réelle.
  3. Redimensionnez la fenêtre et faites défiler la page pour vérifier d’autres positions où il pourrait se trouver sur un autre arrière-plan.
  4. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Où qu’il se trouve, le texte généré atteint le seuil.

Échec. Là où se trouve le texte généré, le ratio est inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

GENERATED_TEXT_UNREADABLE

  1. Repérez l’élément indiqué par le rapport et regardez le texte que dessine son ::before, son ::after ou son marqueur de liste (un numéro, une puce ou un libellé).
  2. Déterminez s’il s’agit d’un texte que les utilisateurs doivent lire (un numéro, un mot ou un libellé) ou d’une forme purement décorative.
  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 sa couleur par rapport à l’arrière-plan situé derrière.
  4. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Le texte généré atteint le seuil, ou il est purement décoratif.

Échec. Le texte généré est un contenu à lire et son ratio est inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

MIX_BLEND_MODE

  1. Repérez le texte indiqué par le rapport et notez le mix-blend-mode appliqué au texte ou à son conteneur.
  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 les couleurs fusionnées du texte et de l’arrière-plan telles qu’elles apparaissent à l’écran, avec la pipette sur la page rendue.
  3. Si différents contenus peuvent se trouver derrière (défilement, carrousels), vérifiez le pire cas.
  4. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Les couleurs fusionnées à l’écran atteignent le seuil.

Échec. Les couleurs fusionnées à l’écran donnent un ratio inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

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 constater que la couleur de la première ligne s’applique à des mots différents selon la largeur.
  4. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Les deux couleurs atteignent le seuil.

Échec. L’une des couleurs donne un ratio inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

SELECT_OPTION_COLOR

  1. Repérez la liste déroulante indiquée par le rapport et ouvrez-la à la souris et avec Alt+Flèche bas.
  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 le texte de chaque option par rapport à son arrière-plan dans la liste ouverte, y compris l’option en surbrillance, dans chaque navigateur pris en charge par la page.
  3. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Chaque option de la liste ouverte atteint le seuil.

Échec. Une option de la liste ouverte donne un ratio inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

TEXT_SHADOW

  1. Repérez le texte indiqué par le rapport et notez son text-shadow.
  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 de remplissage du texte par rapport à l’arrière-plan.
  3. Si le remplissage échoue, zoomez et vérifiez si l’ombre forme un contour plein ou un halo autour de chaque lettre ; si c’est le cas, mesurez la couleur de l’ombre par rapport à l’arrière-plan et le remplissage par rapport à l’ombre.
  4. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Le remplissage atteint le seuil par rapport à l’arrière-plan, ou un halo plein entoure chaque lettre et donne le ratio requis.

Échec. Ni le remplissage par rapport à l’arrière-plan, ni un halo plein autour des lettres n’atteint le seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

TEXT_STROKE

  1. Repérez le texte indiqué par le rapport et notez l’épaisseur et la couleur de son -webkit-text-stroke.
  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 de remplissage par rapport à l’arrière-plan, ainsi que la couleur du contour par rapport à l’arrière-plan.
  3. Zoomez pour voir quelle couleur forme l’essentiel de chaque lettre (un contour fin compte moins que le remplissage).
  4. Comparez le ratio à 4,5:1 (3:1 pour le texte de grande taille) pour WCAG 1.4.3, et à 7:1 (4,5:1 pour le texte de grande taille) pour 1.4.6.

Réussite. Le remplissage et le contour atteignent tous deux le seuil, ou bien la couleur qui forme clairement les lettres l’atteint.

Échec. La couleur qui forme les lettres donne un ratio inférieur au seuil, ce qui ne respecte pas le critère WCAG 1.4.3 (ou 1.4.6).

Voir le code source