Points clés
- Catégorie
- Design et couleur
- Types d’entrée
- color, file, select
- Type de sortie
- html
- Couverture des échantillons
- 4
- API disponible
- Yes
Vue d’ensemble
Ce vérificateur d'accessibilité des couleurs vous permet d'évaluer le contraste WCAG de vos interfaces et de simuler leur apparence pour les utilisateurs atteints de daltonisme. En combinant l'analyse précise des couleurs de premier plan et d'arrière-plan avec la possibilité d'importer une maquette, cet outil identifie instantanément les zones à faible contraste pour garantir un design inclusif et conforme aux normes AA ou AAA.
Quand l’utiliser
- •Lors de la création d'une nouvelle palette de couleurs pour s'assurer qu'elle est lisible par tous les utilisateurs.
- •Avant de valider une maquette d'interface utilisateur (UI) pour vérifier la conformité aux normes d'accessibilité WCAG.
- •Pour auditer un design existant en identifiant rapidement les problèmes de contraste localisés sur des captures d'écran.
Comment ça marche
- •Saisissez votre couleur de premier plan (texte ou icône) et votre couleur d'arrière-plan (surface).
- •Sélectionnez le niveau d'exigence WCAG souhaité (AA ou AAA).
- •Importez facultativement une image de votre maquette pour analyser les contrastes locaux.
- •Consultez le rapport généré qui affiche les ratios de contraste et simule différentes déficiences visuelles (protanopie, deutéranopie, etc.).
Cas d’usage
Exemples
1. Vérification d'une palette de boutons
UI Designer- Contexte
- Un designer crée un nouveau thème pour une application SaaS et souhaite s'assurer que les boutons principaux sont accessibles.
- Problème
- Vérifier si le texte gris foncé sur fond blanc reste lisible pour tous les types de vision.
- Comment l’utiliser
- Entrez `#1f2937` comme couleur de premier plan et `#ffffff` comme couleur de fond, puis sélectionnez le niveau WCAG AA.
- Configuration d’exemple
-
{ "foreground": "#1f2937", "background": "#ffffff", "wcagLevel": "AA" } - Résultat
- Le rapport confirme que le ratio de contraste dépasse 4.5:1 et reste lisible sous toutes les simulations de daltonisme.
2. Analyse de contraste sur une maquette
Auditeur en accessibilité- Contexte
- L'auditeur doit vérifier une page d'accueil complexe contenant du texte superposé à des images.
- Problème
- Identifier rapidement les zones de la page où le texte manque de contraste par rapport à l'image de fond.
- Comment l’utiliser
- Importez la capture d'écran de la page d'accueil dans le champ 'Image de maquette' et définissez le niveau sur WCAG AA.
- Configuration d’exemple
-
{ "designImage": "homepage_mockup.png", "wcagLevel": "AA" } - Résultat
- L'outil génère une grille visuelle marquant les tuiles de l'image où le contraste local est inférieur au seuil de 4.5:1.
Tester avec des échantillons
image, png, jpgHubs associés
FAQ
Quelle est la différence entre les niveaux WCAG AA et AAA ?
Le niveau AA exige un ratio de contraste de 4.5:1 pour le texte de taille normale, tandis que le niveau AAA, plus strict, requiert un ratio de 7:1.
Quelles déficiences visuelles sont simulées par l'outil ?
L'outil simule la protanopie, la deutéranopie, la tritanopie et l'achromatopsie pour vérifier la lisibilité dans chaque condition.
Puis-je analyser une maquette complète avec cet outil ?
Oui, vous pouvez importer une image (PNG, JPEG ou WEBP) et l'outil mettra en évidence les zones dont le contraste est inférieur au seuil choisi.
Les grands textes ont-ils les mêmes exigences de contraste ?
Non, les textes de grande taille ont des seuils plus bas : 3:1 pour le niveau AA et 4.5:1 pour le niveau AAA.
Que se passe-t-il si une couleur échoue au test de simulation ?
Le rapport recalcule le ratio de contraste pour chaque simulation, vous indiquant si une paire de couleurs initialement correcte devient illisible pour certains utilisateurs.