Vérificateur de Contraste d'Image

Vérificateur de contraste d'image

Téléchargez une image, déplacez le texte, ajustez la couleur et la taille pour vérifier le contraste WCAG AA/AAA.

Déposez le fichier ou parcourez

Format : jpeg, png & Taille maximale du fichier : 25 Mo

WCAG

AA: Réussi AAA: Échoué

Contrast Ratio

8.42 Very good

Votre texte

Taille du texte

Couleur du texte

Conformité du Contraste d'Image WCAG

Assurer le contraste des images est crucial pour la lisibilité et l'accessibilité. Plusieurs facteurs influencent la conformité, y compris le contraste entre le texte et les images, les superpositions sur les images, et la lisibilité du texte sur différents arrière-plans.

Exigences en matière de Ratio de Contraste Expliquées

Petit texte – contraste de 4,5:1 avec l'arrière-plan

Tout texte de taille normale (inférieur à 24px ou 19px en gras) placé sur une image doit avoir un ratio de contraste d'au moins 4,5:1 pour être lisible.
Cela garantit la clarté même sur des arrière-plans complexes ou texturés.

Grand texte – contraste de 3:1 avec l'arrière-plan

Le grand texte (au moins 24px ou 19px en gras) nécessite seulement un ratio de contraste de 3:1, car les tailles de police plus grandes améliorent la lisibilité.
Cela permet plus de flexibilité dans le choix des couleurs tout en maintenant l'accessibilité.

Éléments décoratifs – aucune exigence de contraste

Les images purement décoratives qui ne contiennent pas de texte essentiel n'ont pas d'exigences spécifiques en matière de contraste.
Cependant, elles ne doivent pas interférer avec la lisibilité lorsqu'elles sont placées près du texte.

Objets graphiques – contraste de 3:1 pour les informations clés

Les icônes, boutons ou graphiques doivent maintenir un contraste minimum de 3:1 par rapport à leur arrière-plan s'ils fournissent des informations importantes.
Si une image inclut du texte ou des éléments visuels clés, elle doit respecter les directives standard de contraste pour l'accessibilité.

Considérations Clés

Texte lisible – Le texte sur les images doit rester clairement visible en tout temps.
Utiliser les superpositions judicieusement – Ajouter des arrière-plans semi-transparents peut améliorer le contraste.
Éviter la dépendance à la couleur – Assurez-vous que l'information n'est pas transmise uniquement par la couleur ; utilisez des symboles ou des étiquettes si nécessaire.
La scalabilité compte – Le contraste doit rester suffisant sur différentes tailles d'écran et résolutions.

Analyse gratuite de l’accessibilité de votre site

Ne vous limitez pas au contraste : analysez votre site pour tous les critères de conformité WCAG.

Lancer l’analyse gratuite

Erreurs Courantes de Contraste d'Image Commis par les Designers

Placer du texte sur des images sans contraste suffisant peut le rendre illisible. Assurez un ratio de contraste de 4,5:1 pour le petit texte et de 3:1 pour le grand texte en utilisant des superpositions, des ombres ou des couleurs contrastées.
Bien que les superpositions puissent améliorer le contraste, une transparence excessive peut faire fusionner le texte avec l'arrière-plan. Utilisez des superpositions solides ou semi-transparentes avec une opacité suffisante pour maintenir la lisibilité.
Les icônes ou étiquettes placées directement sur des images sans contraste suffisant peuvent être difficiles à identifier. Assurez toujours un contraste minimum de 3:1 entre les éléments clés et leur arrière-plan.
Utiliser uniquement la couleur pour différencier le texte ou les éléments peut créer des barrières d'accessibilité pour les utilisateurs daltoniens. Associez toujours les couleurs à des motifs, des étiquettes ou des icônes pour assurer une distinction claire.
Un contraste qui semble bon sur un écran peut échouer dans différentes conditions d'éclairage. Testez les images dans des environnements lumineux et sombres pour assurer la lisibilité dans tous les scénarios de visualisation.

Merci pour vos commentaires 😊

L'équipe de tabnav s'engage à prendre en compte vos commentaires et à travailler sur des améliorations.

Vérificateur de Contraste de Couleur WCAG