Vérificateur de Palette de Couleurs Accessible
Vérifiez toute votre palette de couleurs pour l'accessibilité WCAG. Ajoutez 2 à 8 couleurs et observez les ratios de contraste pour chaque combinaison texte-fond. Tout le traitement se fait dans votre navigateur.
Résumé de la palette
6 combinaison(s) échoue(nt) AA pour le texte normal :
- #1A1A2E on #2563EB (3.30:1)
- #2563EB on #1A1A2E (3.30:1)
- #2563EB on #EAEAEA (4.30:1)
- #EAEAEA on #2563EB (4.30:1)
- #EAEAEA on #FFFFFF (1.20:1)
- #FFFFFF on #EAEAEA (1.20:1)
Votre palette
Ajoutez ou supprimez des couleurs (2–8). Chaque couleur peut être utilisée comme texte ou fond ; nous vérifions chaque paire.
Matrice de contraste
Chaque cellule représente "couleur du texte sur couleur de fond" : ratio et réussite/échec WCAG AA (normal).
| Texte ↓ \ Fond → | 1A1A2E | 2563EB | EAEAEA | FFFFFF |
|---|---|---|---|---|
1A1A2E | — | 3.30 Échoue | 14.18 Passe | 17.06 Passe |
2563EB | 3.30 Échoue | — | 4.30 Échoue | 5.17 Passe |
EAEAEA | 14.18 Passe | 4.30 Échoue | — | 1.20 Échoue |
FFFFFF | 17.06 Passe | 5.17 Passe | 1.20 Échoue | — |
Palettes prédéfinies
Référence WCAG
Table des matières
Qu'est-ce que l'accessibilité de palette ?
L'accessibilité de palette signifie que chaque façon de combiner les couleurs de votre ensemble — texte sur fond, bordures sur surfaces, boutons sur cartes — répond aux exigences de contraste afin que le contenu soit lisible et les éléments d'interface distinguables pour tous les utilisateurs, y compris les personnes à faible vision ou avec des différences de perception des couleurs.
Vérifier une seule paire (ex. texte du corps sur fond de page) ne suffit pas. Les titres, légendes, boutons, liens et bordures créent de nombreuses paires possibles. Une palette accessible est celle où les combinaisons que vous utilisez réellement (ou pourriez utiliser) respectent les règles de contraste WCAG.
Pourquoi vérifier toute la palette ?
Les systèmes de design et les palettes de marque ont plusieurs rôles : fonds (page, cartes, sections), texte (titres, corps, légendes) et UI (boutons, bordures, icônes). N'importe lequel peut se retrouver au-dessus d'un autre. Si vous ne testez que "texte principal sur fond de page", vous pouvez manquer des paires défaillantes comme "légende sur fond de carte" ou "texte de bouton sur primaire".
Un vérificateur de palette teste chaque combinaison texte-fond pour que vous voyiez la situation complète : quelles paires passent, lesquelles échouent et combien de combinaisons atteignent AA ou AAA. Cela facilite la correction des paires problématiques ou la documentation des combinaisons approuvées pour votre équipe.
Comment fonctionne l'outil
Ajoutez 2 à 8 couleurs à l'aide du sélecteur de couleur ou de la saisie hexadécimale. L'outil construit chaque paire ordonnée texte-fond et calcule le ratio de contraste à l'aide de la formule WCAG.
- Résumé — Nombre total de combinaisons, combien passent AA (normal) et AAA (normal), et une liste des paires défaillantes.
- Matrice de contraste — Un tableau avec chaque cellule montrant le ratio et Passe/Échoue pour WCAG AA texte normal (4,5:1).
- Copier le rapport — Un clic copie votre palette, résumé et chaque combinaison à coller dans des docs ou tickets.
Tous les calculs s'exécutent dans votre navigateur ; aucune donnée de couleur n'est envoyée à un serveur.
Quand l'utiliser
- Systèmes de design — Avant de fixer les couleurs de marque ou d'UI, vérifiez chaque paire texte/fond prévue.
- Changement de thème — Pour les thèmes clair/sombre ou multiples, assurez-vous que la palette de chaque thème passe en tant qu'ensemble.
- Audits — Voyez rapidement quelles combinaisons dans une palette existante échouent et nécessitent un ajustement.
- Documentation — Exportez le rapport pour documenter les paires approuvées pour votre équipe ou vos clients.
Niveaux de contraste WCAG
Les Règles pour l'accessibilité des contenus Web (WCAG) définissent des ratios de contraste minimaux pour le texte et l'UI :
- AA Normal — Minimum 4,5:1 pour le texte ordinaire (moins de 18pt ou 14pt gras). C'est l'objectif habituel pour le texte du corps.
- AAA Normal — 7:1 pour un contraste amélioré.
- AA Grand — 3:1 pour le grand texte (18pt+ ou 14pt+ gras).
- Composants UI et graphiques — Minimum 3:1 pour les icônes, bordures, contrôles de formulaire et graphiques significatifs.
La matrice de cet outil montre passe/échoue pour AA normal. Le résumé et le rapport incluent les comptages pour AA et AAA afin que vous puissiez voir combien de paires atteignent chaque niveau.
Questions fréquentes
Le Vérificateur de Contraste de Couleurs teste un premier plan et un fond à la fois — idéal pour valider une seule combinaison ou essayer des alternatives. Le Vérificateur de Palette de Couleurs Accessible teste chaque paire dans un ensemble de 2 à 8 couleurs à la fois, afin que vous puissiez voir quelles combinaisons dans votre palette complète passent ou échouent et copier un rapport complet.
Si une couleur n'est pas un hexadécimal valide à 3 ou 6 chiffres (ex. vous êtes encore en train de taper ou avez laissé une valeur vide), l'outil ne peut pas calculer le contraste pour les paires qui l'utilisent. Corrigez ou supprimez la couleur invalide et ces cellules afficheront le ratio et Passe/Échoue à la place.
Vous pouvez ajouter entre 2 et 8 couleurs. Avec 2 couleurs, vous obtenez 2 combinaisons (A sur B, B sur A). Avec 8 couleurs, vous obtenez 56 combinaisons. Limiter la palette aux couleurs que vous utilisez réellement pour le texte et les fonds rend la matrice gérable et le rapport ciblé.
Non. Tous les calculs de contraste utilisent la même formule WCAG et s'exécutent entièrement dans votre navigateur. Vos couleurs ne quittent jamais votre appareil.
Si de nombreuses combinaisons échouent, votre palette a peut-être trop de teintes similaires (ex. gris clairs sur des gris légèrement différents). Ajoutez plus de contraste : incluez des couleurs clairement plus claires et plus sombres pour avoir des options valides de texte/fond. Utilisez le Vérificateur de Contraste de Couleurs pour tester des paires individuelles et obtenir des suggestions d'amélioration.
Oui. Vous pouvez saisir un hex à 6 chiffres (ex. #1A1A2E) ou un raccourci à 3 chiffres (ex. #FFF). L'outil étend les codes à 3 chiffres en 6 chiffres en interne et les utilise dans la matrice et le rapport.