# Verificateur daccessibilite de vision des couleurs Mesure le contraste WCAG, simule les principales deficiences visuelles et signale les zones a faible contraste. > Page canonique: https://elysiatools.com/fr/tools/color-vision-accessibility-checker - **Catégorie:** Design - **Mots-clés:** daltonisme, accessibilite, wcag, contraste ## Présentation Ce verificateur evalue a la fois la conformite du contraste et la facon dont une paire de couleurs se comporte pour des utilisateurs ayant differents troubles de la vision des couleurs. Signification des badges : - AA normal : indique si le ratio de contraste respecte WCAG AA pour du texte de taille normale. Le seuil est de 4.5:1. - AAA normal : indique si le ratio de contraste respecte WCAG AAA pour du texte de taille normale. Le seuil est de 7:1. Pourquoi cest important : - "Normal" correspond au texte courant, aux petites etiquettes et a la majorite des contenus dinterface. - Le grand texte a des seuils plus bas : AA large passe a 3:1 et AAA large a 4.5:1. - Une paire peut donc echouer en AAA normal tout en restant acceptable pour de grands titres ou du texte gras de grande taille. Champs : - Couleur de premier plan : texte, icone ou couleur principale placee au-dessus - Couleur de fond : couleur de surface situee derriere - Image de maquette : capture facultative pour analyser les zones de faible contraste - Niveau WCAG : controle le seuil utilise pour signaler les zones a risque dans limage Lecture du resultat : - Les cartes Normal / Protanopia / Deuteranopia / Tritanopia / Achromatopsia montrent lapparence de la paire sous chaque simulation. - Le ratio de contraste est recalcule apres chaque simulation pour voir si une paire correcte en vision normale devient risquee. - Lanalyse de capture marque les tuiles dont le contraste local est inferieur au seuil WCAG choisi. ## Entrées - **Couleur de premier plan** (color) - **Couleur de fond** (color) - **Image de maquette** (file) - **Niveau WCAG** (select) ## 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. ## Fonctionnement - 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 - Validation de l'accessibilité des boutons d'appel à l'action (CTA) sur une page de destination. - Vérification de la lisibilité des graphiques et des tableaux de bord pour les utilisateurs daltoniens. - Audit de conformité WCAG automatisé sur des captures d'écran d'applications web ou mobiles. ## Questions fréquentes ### 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. ## Outils associés - [Verificateur d accessibilite](https://elysiatools.com/fr/tools/accessibility-checker): Detecte les problemes WCAG 2.1 courants dans du HTML, des pages ou des maquettes et fournit des corrections concretes - [Extracteur de palette couleur depuis image](https://elysiatools.com/fr/tools/image-color-palette-extractor): Charge une image, extrait les couleurs dominantes et exporte des tokens reutilisables avec controle du contraste - [Analyseur d image VP8](https://elysiatools.com/fr/tools/vp8-image-analyzer): Analyse une image WebP/VP8 avec Sharp, genere une displacement map en niveaux de gris et rend un relief 3D avec Three.js - [Generateur de heatmap d accessibilite](https://elysiatools.com/fr/tools/accessibility-heatmap-generator): Genere une heatmap d accessibilite centree sur le contraste a partir d une capture ou de HTML et suggere des couleurs - [Extracteur de Canaux d'Image](https://elysiatools.com/fr/tools/image-channel): Extrait, manipule et analyse les canaux de couleur individuels (RGB, Alpha, Luminance) avec options de traitement professionnel - [Extracteur de Couleurs d'Image](https://elysiatools.com/fr/tools/image-color-extractor): Extrait les couleurs dominantes des images en utilisant divers algorithmes dont le clustering k-means et l'analyse d'histogramme - [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 - [Étalonnage Cinématographique](https://elysiatools.com/fr/tools/image-cinematic-color): Appliquez un étalonnage couleur cinématographique professionnel à vos images. ## Exemples - [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 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 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é - [Generateurs d'effets CSS, palettes et design tokens](https://elysiatools.com/fr/hubs/design-generate): Des outils reunis pour effets visuels CSS, creation de palettes et generation de design tokens dans un seul hub. - [Outils d audit d accessibilite web et de couleurs accessibles](https://elysiatools.com/fr/hubs/web-accessibility-audits): Regroupez dans un meme hub les controles WCAG, l ordre de lecture des lecteurs d ecran, les problemes de contraste, les risques lies a la vision des couleurs et le choix de palettes accessibles. - [Outils de conversion de formats d image et d export anime](https://elysiatools.com/fr/hubs/image-convert): Comparez les convertisseurs d image pour JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 et les exports orientes animation dans un meme hub. - [Outils de nettoyage, finition et preparation d images en lot](https://elysiatools.com/fr/hubs/image-utility): Regroupe dans un meme hub les outils de nettoyage d image, rognage, marge, encadrement, redimensionnement et compression par lot, filigrane et finition visuelle.