# Generateur de heatmap d accessibilite Genere une heatmap d accessibilite centree sur le contraste a partir d une capture ou de HTML et suggere des couleurs > Page canonique: https://elysiatools.com/fr/tools/accessibility-heatmap-generator - **Catégorie:** Design - **Mots-clés:** accessibilite, heatmap, wcag, contraste ## Présentation Televersez une capture UI ou collez du HTML avec couleurs inline. Loutil produit une heatmap des zones susceptibles de rater WCAG et propose des couleurs de correction. ## Entrées - **Entree HTML** (textarea): Low contrast text - **Image de design** (file) - **Niveau WCAG** (select) - **Afficher les suggestions** (checkbox) ## Quand l'utiliser - Lors de la phase de conception visuelle pour valider les choix de couleurs avant l'intégration. - Lors d'un audit d'accessibilité rapide sur une page web existante via une capture d'écran. - Pour corriger des composants HTML spécifiques en obtenant des suggestions de couleurs conformes aux normes WCAG. ## Fonctionnement - Téléversez une image de votre interface (PNG, JPG, WEBP) ou collez directement votre code HTML contenant des styles de couleur. - Sélectionnez le niveau d'exigence WCAG souhaité (AA pour un contraste de 4.5:1 ou AAA pour 7:1). - Cochez l'option pour afficher les suggestions de correction si vous souhaitez obtenir des codes couleurs alternatifs. - Générez le rapport pour visualiser la heatmap des zones critiques et appliquer les correctifs recommandés. ## Cas d'usage - Vérification rapide des maquettes UI/UX par les designers avant le transfert aux développeurs. - Audit de conformité d'accessibilité visuelle sur des composants isolés (boutons, bannières, alertes). - Génération de rapports visuels (heatmaps) pour illustrer les défauts de contraste lors de présentations d'assurance qualité. ## Questions fréquentes ### Quels formats d'image sont supportés ? L'outil accepte les captures d'écran aux formats PNG, JPEG et WEBP (jusqu'à 15 Mo). ### 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 normal, tandis que le niveau AAA requiert un ratio plus strict de 7:1. ### Comment fonctionne l'analyse HTML ? L'outil inspecte les paires de couleurs de premier plan et d'arrière-plan définies en ligne (inline) dans votre code HTML pour calculer leur ratio de contraste. ### L'outil propose-t-il des solutions pour les erreurs détectées ? Oui, en activant l'option de suggestions, l'outil calcule et affiche des valeurs de couleurs alternatives qui respectent le seuil WCAG choisi. ### Puis-je analyser une page web complète via son URL ? Non, vous devez soit fournir une capture d'écran de la page, soit coller directement le code HTML à analyser. ## Outils associés - [Générateur de Factures PDF](https://elysiatools.com/fr/tools/pdf-invoice-generator): Génère une facture PDF avec marque à partir de lignes structurées - [Générateur de Data URI](https://elysiatools.com/fr/tools/data-uri-generator): Convertit les fichiers en Data URI (Base64 ou pourcentage-encodé) pour intégrer images, polices et ressources directement dans HTML, CSS ou Markdown - [Générateur de Carte de Profondeur](https://elysiatools.com/fr/tools/image-depth-map): Génère des cartes de profondeur à partir d'images en utilisant l'analyse de luminosité, saturation et des bords. Crée des cartes de profondeur en niveaux de gris où les pixels plus clairs indiquent des objets plus proches et les pixels plus sombres indiquent des objets plus lointains. - [Générateur d'Animation Parallaxe](https://elysiatools.com/fr/tools/image-parallax): Génère des animations parallaxe à partir d'images. Crée une animation basée sur la profondeur où différentes couches se déplacent à différentes vitesses, créant un effet 3D. - [De la palette d’image aux design tokens](https://elysiatools.com/fr/tools/image-to-design-tokens): Extrait les couleurs dominantes d’une image par k-means et les exporte en variables CSS / SCSS / config Tailwind / tokens JSON, avec noms et échelle de teintes - [Générateur d'Anaglyphe 3D Rouge-Cyan](https://elysiatools.com/fr/tools/image-anaglyph): Génère des anaglyphes 3D rouge-cyan à partir de photos normales. Crée des images stéréoscopiques 3D visibles avec des lunettes 3D rouge-cyan. - [Générateur de Photo Mosaïque](https://elysiatools.com/fr/tools/image-mosaic-generator): Créez des photos mosaïques étonnantes en combinant des centaines de petites images pour former une grande image principale. Chaque carreau est soigneusement sélectionné pour correspondre aux couleurs de l'image sous-jacente. - [Generateur de Favicon SVG](https://elysiatools.com/fr/tools/svg-favicon-generator): Transforme un logo SVG ou raster en pack favicon complet avec ICO, variantes PNG, icone Apple Touch et web manifest ## Exemples - [Exemples de Traitement d'Images Web Python](https://elysiatools.com/fr/samples/web-image-processing-python): Exemples de traitement d'images Web Python utilisant PIL/Pillow incluant la lecture, l'enregistrement, le redimensionnement et la conversion de format - [Exemples de Traitement d'Images Android Java](https://elysiatools.com/fr/samples/android-image-processing-java): Exemples de traitement d'images Android Java incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples de Traitement d'Images Android Kotlin](https://elysiatools.com/fr/samples/android-image-processing-kotlin): Exemples de traitement d'images Android Kotlin incluant lecture/écriture, mise à l'échelle et conversion de format - [Exemples de Traitement d'Images Web Rust](https://elysiatools.com/fr/samples/web-image-processing-rust): Exemples de traitement d'images Web Rust incluant lecture/écriture, redimensionnement et conversion de format ## Contenu associé - [Audit d’accessibilité web avant publication](https://elysiatools.com/fr/hubs/web-accessibility-audits): Examinez la structure, l’ordre de lecture, le contraste des captures et les risques liés à la vision des couleurs d’une page ou d’un composant, puis faites valider les constats automatisés par une personne.