Vérificateur de Contraste (WCAG)
Vérifiez le contraste texte/arrière-plan selon les normes WCAG.
Suggère automatiquement des couleurs conformes et délivre des certificats de conformité.
🔤 Couleur du texte
🎨 Couleur de fond
Ceci est un aperçu du texte normal (16px)
Ceci est un aperçu du texte en gras (16px)
Ceci est un grand texte (24px)
Ceci est un grand texte en gras (18px)
Rapport de contraste
12.63 : 1
Texte normal AA
≥ 4.5:1
Grand texte AA
≥ 3:1
Texte normal AAA
≥ 7:1
Grand texte AAA
≥ 4.5:1
💡 Couleurs suggérées pour respecter la norme AA :
Ajuster la couleur du texte :
Ajuster la couleur de fond :
🏆 Certificat de conformité WCAG AA
* L'image du certificat se télécharge lors du clic sur le bouton de Partage.
📋 Code CSS
À propos
Un outil gratuit pour vérifier instantanément si vos combinaisons de couleurs Web ou d'application répondent aux normes de contraste WCAG 2.1. Un faible contraste rend le texte difficile à lire pour les personnes malvoyantes.
Lorsque vos couleurs échouent, l'outil suggère automatiquement la couleur conforme la plus proche, vous aidant à améliorer l'accessibilité sans modifier radicalement votre conception.
Une fois la norme AA atteinte, vous pouvez enregistrer un certificat officiel de conformité WCAG AA pour le partager.
Comment utiliser
Entrez les couleurs
Cliquez sur le sélecteur de couleurs ou saisissez directement un code HEX/RVB pour la couleur du texte et de l'arrière-plan.
Vérifiez les résultats
Le rapport de contraste et le statut de réussite/échec WCAG AA/AAA se mettent à jour en temps réel avec un aperçu en direct.
Délivrer le certificat
Si vous franchissez le seuil AA, vous pouvez enregistrer un certificat officiel et le partager facilement.
Glossaire
- Rapport de contraste
- Une valeur numérique représentant la différence de lumière entre les couleurs de premier plan et d'arrière-plan. Il va de 1:1 (aucune différence) à 21:1 (noir sur blanc).
- WCAG (Règles d'accessibilité des contenus Web)
- Normes internationales établies par le W3C définissant comment rendre le contenu Web accessible. Les gouvernements du monde entier exigent le respect de ces directives.
- Norme AA
- L'objectif de milieu de gamme pour le contraste. Le texte normal nécessite un ratio d'au moins 4,5:1, tandis que les grands textes (18 pt+) nécessitent 3:1. Il s'agit de la base juridique pour la plupart des entreprises.
- Norme AAA
- La norme WCAG la plus stricte ciblant des besoins d'accessibilité spécialisés. Nécessite 7:1 pour le texte normal et 4,5:1 pour le texte volumineux. Elle peut restreindre considérablement les choix de conception.
- Luminance relative
- La luminosité relative de n'importe quel point dans un espace colorimétrique. Il s'appuie sur des calculs gamma mathématiques ajustés à la perception de l'œil humain pour évaluer les couleurs sur une échelle de 0 à 1.
- Accessibilité (a11y)
- La pratique consistant à créer des environnements utilisables pour les personnes handicapées, y compris les déficiences visuelles, les contraintes cognitives et le déclin lié à l'âge.
FAQ
- Q.Quel est le rapport de contraste recommandé pour le texte Web ?
- Selon les normes WCAG AA, le texte normal nécessite un ratio minimum de 4,5:1. Un texte plus grand (généralement 18 pt ou 14 pt en gras) ne nécessite que 3:1.
- Q.Cet outil simule-t-il le daltonisme ?
- Non, cette version se concentre exclusivement sur la vérification mathématique des rapports de contraste. Veuillez utiliser un logiciel de simulation de daltonisme dédié en plus de cet outil.
- Q.Comment l’algorithme calcule-t-il le ratio ?
- Il met en œuvre la formule exacte de recommandation WCAG en calculant la luminance relative des deux couleurs et en les comparant à l'aide de l'échelle (L1 + 0,05) / (L2 + 0,05).
- Q.Dois-je viser la conformité AA ou AAA ?
- La norme industrielle mondiale et l’exigence légale pour la plupart des opérations commerciales sont le niveau AA. AAA est très restrictif et n’est généralement obligatoire que pour les plateformes gouvernementales spécialisées ou pour les personnes handicapées.
- Q.Les données de couleur de ma marque sont-elles envoyées à un navigateur cloud ?
- Jamais. Toutes les analyses chromatiques et le rendu des certificats s'effectuent entièrement dans votre navigateur, dans la mémoire du navigateur de votre appareil local, garantissant une confidentialité totale de l'entreprise.
- Q.Puis-je saisir des couleurs en utilisant des formats autres que les codes HEX ?
- Oui, en plus des formats HEX (comme #ffffff), vous pouvez également sélectionner visuellement les couleurs à l'aide du sélecteur de couleurs ou saisir directement les valeurs de coordonnées RVB.
- Q.Le certificat généré est-il juridiquement contraignant ?
- Il s'agit d'une preuve mathématique fiable de vos combinaisons réussies selon les formules du W3C, mais ne remplace pas un audit d'accessibilité tiers complet.
Cas d'utilisation
Validation de la conception Web
Vérifiez le contraste lors de la conception pour garantir la conformité WCAG des pages de destination et des sites d'entreprise.
Examen de l'interface utilisateur de l'application mobile
Vérifiez la lisibilité du texte et des étiquettes des boutons pour les utilisateurs malvoyants.
Conformité en matière d'accessibilité
Auditez les sites concernant les problèmes de contraste pour répondre aux exigences ADA, EN 301 549 ou WCAG à l'échelle mondiale.
Présentations
Vérifiez que les couleurs du texte des diapositives et des documents sont parfaitement lisibles de manière fiable par tous les membres de l'auditoire.
Envoyer des commentaires
Faites-nous part de vos réflexions pour nous aider à améliorer l'outil.
Les commentaires sont temporairement suspendus
Le serveur est occupé ou la protection anti-spam est active. Veuillez réessayer plus tard.