Elysia Tools
Navigation mobile
Design
Vérifier le rapport de contraste des couleurs et la conformité WCAG pour l'accessibilité
Exécution
Remplissez le formulaire, lancez l’outil et consultez le résultat au même endroit.
Exemples
Associé
Prêt à exécuter
Guide d'utilisation de l'outil
Le Vérificateur de Contraste de Couleur est un outil essentiel pour garantir que vos designs respectent les normes d'accessibilité WCAG, assurant une lisibilité optimale pour tous les utilisateurs.
Contexte
Un designer prépare une nouvelle interface pour une application mobile.
Problème
Il craint que le texte gris clair sur fond blanc ne soit pas assez lisible pour les malvoyants.
Utilisation
Il saisit le code hexadécimal du gris (#757575) et du blanc (#FFFFFF) dans l'outil.
Résultat
L'outil indique un rapport de 4.54:1, confirmant que le texte respecte le niveau AA des normes WCAG.
Contexte
Un bouton bleu avec du texte blanc est utilisé sur un site e-commerce.
Problème
Le contraste semble faible, rendant le bouton difficile à lire pour certains utilisateurs.
Utilisation
Il teste la combinaison de couleurs actuelle et découvre un rapport de 2.8:1.
Résultat
Il ajuste la teinte du bleu vers une nuance plus sombre pour atteindre un rapport de 4.6:1, garantissant une meilleure accessibilité.
C'est une mesure de la différence de luminance entre deux couleurs, utilisée pour déterminer la lisibilité du texte.
Les Web Content Accessibility Guidelines (WCAG) définissent les standards pour rendre le contenu web accessible aux personnes en situation de handicap.
Le niveau AA exige un rapport d'au moins 4.5:1 pour le texte normal et 3:1 pour le texte large.
Oui, bien que les logos soient parfois exemptés, il est recommandé de maintenir un bon contraste pour la reconnaissance de la marque.
L'outil analyse les valeurs hexadécimales opaques. Pour les couleurs avec transparence, calculez la couleur résultante sur fond blanc ou noir.