Les éléments doivent respecter des seuils minimaux de rapport de contraste des couleurs

ID de règle: color-contrast
Ensemble de règles: axe-core 4.13
Impact sur l’utilisateur: Sérieux
Lignes directrices: WCAG 2.1 (AA), WCAG 2.0 (AA), WCAG 2.2 (AA), Trusted Tester, EN 301 549, RGAA

Créez des sites Web plus accessibles avec axe DevTools Pro

Recherchez et corrigez davantage de problèmes avec les tests guidés intelligents™ en répondant à une série de questions simples sur le contenu de votre page. Essai gratuit. Aucune carte de crédit nécessaire.

Compliance Data & Impact

User Impact

Disabilities Affected

  • Basse vision
  • Daltonisme

Standard(s)

  • WCAG 2.1 (AA)
  • WCAG 2.0 (AA)
  • WCAG 2.2 (AA)
  • Trusted Tester
  • EN 301 549
  • RGAA

Critères de réussite WCAG [WCAG 2.1 (AA)]

  • 1.4.3: Contrast (Minimum)

Critères de réussite WCAG [WCAG 2.0 (AA)]

  • 1.4.3: Contrast (Minimum)

Critères de réussite WCAG [WCAG 2.2 (AA)]

  • 1.4.3: Contrast (Minimum)

Directives pour les testeurs de confiance

  • 13.C: The visual presentation of text and images of text have sufficient contrast.

    RGAA

    • 3.2.1: Text has sufficient contrast against its background color.

    Comment résoudre le problème

    Assurez-vous que tous les éléments de texte présentent un contraste de couleur suffisant entre le texte au premier plan et la couleur d'arrière-plan.

    Critère de réussite : Assurez-vous d'un contraste de couleur d'au moins 4,5:1 pour un petit texte ou 3:1 pour un grand texte, même si le texte fait partie d'une image. Le texte de grande taille a été défini dans les exigences comme 18 pt (24 pixels CSS) ou 14 pt en gras (19 pixels CSS). Remarque : les éléments dont le rapport est de 1:1 sont considérés comme "incomplets" et nécessitent une vérification manuelle.

    Utilisez l'analyseur de contraste de couleurs ci-dessous pour trouver les couleurs qui respectent les directives.

    Image

    Outils d'analyse du contraste des couleurs : Vous trouverez ci-dessous des liens vers des outils qui analyseront les rapports de contraste des couleurs par rapport aux directives :

    • Extensions de navigateur axe DevTools —  : Le produit d'entreprise de Deque, axe DevTools HTML, permet aux groupes de développement d'intégrer les tests d'accessibilité dans les processus de test automatisés existants et est utilisé par les clients en conjonction avec le produit de surveillance et de création de rapports d'accessibilité axe Monitor de Deque. En plus de fournir une bibliothèque de code pour l'intégration dans de nombreux langages de programmation, axe DevTools inclut également des extensions d'analyse d'accessibilité Web pour Google Chrome et Mozilla Firefox, permettant aux développeurs front-end d'entreprise d'exécuter un test d'accessibilité rapide à tout moment. Les outils d'analyse renvoient des informations détaillées sur les violations d'accessibilité et des instructions pour résoudre les problèmes, y compris des liens vers des connaissances plus approfondies.
    • axe-core — Le moteur d'accessibilité axe est une bibliothèque de règles d'accessibilité JavaScript open source qui est rapide, ne renvoie aucune erreur faussement positive ni aucun résultat en double, et est disponible sous forme de référentiel GitHub, de plugin de navigateur ou d'intégration de framework.

    Pourquoi c'est important

    Certaines personnes malvoyantes ont une faible perception du contraste, ce qui signifie qu'il n'y a pas beaucoup de zones claires ou sombres. Tout a tendance à apparaître à peu près de la même luminosité, ce qui rend difficile de distinguer les contours, les bordures, les bords et les détails. Un texte dont la luminance (luminosité) est trop proche de l’arrière-plan peut être difficile à lire.

    Il y a près de trois fois plus de personnes malvoyantes que de personnes atteintes de cécité totale. Une personne sur douze ne peut pas voir l'intégralité du spectre moyen des couleurs - environ 8 % des hommes et 0,4 % des femmes aux États-Unis. Une personne malvoyante ou daltonienne est incapable de distinguer un texte sur un arrière-plan sans contraste suffisant.

    La transparence et l'opacité des couleurs sont prises en compte dans la conception du site web.

    La transparence et l'opacité des couleurs au premier plan sont plus difficiles à détecter et à prendre en compte en raison de :

    • Ratio de couleurs 1:1 au premier plan et à l'arrière-plan.
    • Dégradés d'arrière-plan CSS.
    • Couleurs d'arrière-plan dans les pseudo-éléments CSS.
    • Couleurs d'arrière-plan créées avec des bordures CSS.
    • Chevauchement par un autre élément au premier plan - cela entraîne parfois un positionnement délicat.
    • Éléments déplacés en dehors de la fenêtre d'affichage via CSS.

    Description de la règle

    Tous les éléments de texte doivent avoir un contraste suffisant entre le texte au premier plan et les couleurs d'arrière-plan en conformité avec les seuils de rapport de contraste WCAG 2 AA.

    L'algorithme (en termes simples)

    Vérifie tous les éléments de texte pour garantir que le contraste entre le texte de premier plan et les couleurs d'arrière-plan respecte les seuils de rapport de contraste WCAG 2 AA.

    Note :

    Cette règle ne s'appliquera pas aux éléments de texte qui ont un [missing word or phrase] background-image, qui sont masqués par d'autres éléments ou qui sont des images de texte.

    Cela vérifie également les éléments enfants des boutons désactivés afin qu'ils puissent être ignorés pour éviter une fausse valeur.

    Ressources

    Pages de cours de l'Université Deque (abonnement requis)

    Contribuer à axe-core sur GitHub

    Autres ressources

    Vous pouvez également consulter ces autres ressources.

    Reportez-vous à la liste complète des règles d'axe 4.13 .

    Ces informations vous ont-elles été utiles ?

    Vous avez déjà donné votre avis, merci..

    Votre réponse a été la suivante :

    Ces informations vous ont-elles été utiles ?
    Date/heure de soumission des commentaires :