Analyser une palette avec WCAG
Analysez les contrastes entre les couleurs de votre palette et repérez les associations qui respectent les niveaux WCAG AA ou AAA.
Palette à analyser
Matrice de contraste
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
Légende WCAG 2.1
Niveau AAA
Ratio ≥ 7:1 - Excellence
Niveau AA
Ratio ≥ 4.5:1 - Standard
AA Large
Ratio ≥ 3:1 - Grands textes
Échec
Ratio < 3:1 - Non conforme
Analysez les contrastes entre les couleurs de votre palette et repérez les associations qui respectent les niveaux WCAG AA ou AAA.
Analyser une palette avec WCAG présente uniquement les réglages et résultats utiles à sa fonction. Les options disponibles peuvent varier selon l’outil et le type de donnée fourni.
Formats pris en charge
Comment ça marche
Étape 1
Ouvrez Analyser une palette avec WCAG et préparez la donnée demandée par l’interface
Étape 2
Ajustez les contrôles visibles selon le résultat recherché
Étape 3
Vérifiez le résultat affiché avant de le copier, l’exporter ou le réutiliser si cette action est proposée
Erreurs fréquentes à éviter
- Ne supposez pas qu’un format ou une option est disponible s’il n’apparaît pas dans l’interface de l’outil.
- Vérifiez les valeurs obtenues avant de les réutiliser dans une charte, une interface ou un fichier de production.
- Pour un usage accessible, contrôlez aussi le contraste lorsque le résultat est destiné à du texte ou à des composants d’interface.
Conseils de pro
- Conservez la valeur source et le résultat lorsque vous devez comparer plusieurs variantes ou revenir à un réglage précédent.
- Utilisez les formats réellement affichés par l’outil plutôt que de convertir mentalement une valeur ou d’en déduire une équivalence.
- Sur mobile ou tablette, laissez les textes et contrôles se répartir sur plusieurs lignes plutôt que de forcer une largeur fixe.
Traitement des données
Le traitement dépend de la fonction utilisée. Les services du site, comme le consentement, l’analytique ou le compte, sont gérés séparément de l’opération couleur.
Ce que fait cet outil
Analysez les contrastes entre les couleurs de votre palette et repérez les associations qui respectent les niveaux WCAG AA ou AAA. Analyser une palette avec WCAG se concentre sur cette tâche précise et n’ajoute pas de fonction qui n’est pas affichée dans son interface. Utilisez les contrôles proposés pour obtenir le résultat attendu, puis vérifiez les valeurs présentées avant de les reprendre dans un autre outil ou document.
Préparer une entrée exploitable
Commencez avec une donnée adaptée à Analyser une palette avec WCAG : couleur, valeur, image ou réglage selon ce que demande l’écran. Les formats annoncés pour cette page sont Palette, HEX, CSS Variables, JSON. Si un format ou une option n’apparaît pas dans l’interface, ne considérez pas qu’il est pris en charge par cette fonction.
Lire et vérifier le résultat
Le résultat doit être lu dans le contexte de l’opération effectuée. Comparez la valeur obtenue avec votre source et vérifiez les réglages qui ont servi au calcul. Pour un usage visuel important, contrôlez aussi le rendu réel dans votre interface plutôt que de vous fier uniquement au code couleur.
Utilisation sur mobile et tablette
Analyser une palette avec WCAG utilise la mise en page responsive du site : les titres, sous-titres, breadcrumbs et contrôles peuvent revenir à la ligne sur les écrans étroits. Cette adaptation évite de couper les traductions longues. Vérifiez néanmoins le résultat final dans le contexte où vous comptez réellement l’utiliser.
Réutiliser le résultat dans votre projet
Une fois le résultat vérifié, réutilisez seulement les actions proposées par Analyser une palette avec WCAG, par exemple la copie ou l’export lorsqu’elles sont présentes. Conservez la valeur source si vous devez reproduire le réglage plus tard. Pour une interface, documentez aussi le rôle de la couleur et son niveau de contraste attendu.
Outils associés
Guides et tutoriels
Apprenez à utiliser nos outils avec nos guides détaillés.
Couleurs non accessibles : erreurs fréquentes sur les sites web
Identifiez et corrigez les erreurs d'accessibilité couleur les plus courantes. Guide pratique pour éviter les pièges qui rendent vos sites inaccessibles.
Comment respecter les règles WCAG avec les couleurs ?
Guide complet pour mettre en conformité vos couleurs avec les normes WCAG. Critères, outils et bonnes pratiques pour une accessibilité garantie.
Couleurs non adaptées au web : problèmes courants
Identifiez et corrigez les problèmes de couleurs web les plus fréquents. Guide de diagnostic et solutions pour des couleurs qui fonctionnent.
Questions fréquentes
Apprenez à utiliser nos outils avec nos guides détaillés.