Vérificateur de contraste WCAG
Vérifiez si le texte et l'arrière-plan respectent les ratios WCAG AA et AAA.
Ce que couvre cette page
Cette page explique le flux de travail et renvoie directement vers la section correspondante de l’outil principal Chromaforge.
- Générez des palettes depuis une couleur de base.
- Vérifiez le contraste avant de publier du texte UI.
- Exportez CSS, Tailwind, SCSS, JSON, SVG et PNG.
- Fonctionne localement dans le navigateur.
Comment ca fonctionne
Le vérificateur de contraste WCAG calcule le rapport de luminance relative entre deux couleurs selon la formule officielle du W3C. Ce ratio va de 1:1 (aucun contraste, couleurs identiques) jusqu'a 21:1 (noir sur blanc, contraste maximal).
Pour utiliser l'outil, saisissez la couleur du texte et la couleur d'arrière-plan en hexadecimal, RGB ou HSL. Chromaforge calcule instantanement le ratio et vous indique si la combinaison satisfait les niveaux WCAG 2.1 :
- AA normal : ratio minimum 4.5:1 pour du texte de taille standard (moins de 18pt ou 14pt gras).
- AA large : ratio minimum 3:1 pour du texte grand ou des éléments graphiques importants.
- AAA normal : ratio minimum 7:1, requis pour les contextes d'accessibilite maximale.
- AAA large : ratio minimum 4.5:1 pour le texte de grande taille au niveau AAA.
Le résultat s'affiche en temps réel avec un indicateur visuel passe/échoue pour chaque niveau. Vous pouvez aussi inverser les couleurs d'un clic pour tester fond clair sur fond sombre.
Exemples pratiques
Voici des situations concrets ou le vérificateur de contraste devient indispensable :
- Boutons CTA : vérifiez que le texte blanc sur votre couleur primaire depasse 4.5:1 avant de livrer le design.
- Mode sombre : testez chaque combinaison texte/fond pour vos themes dark, car les ratios changent complètement.
- Formulaires : les placeholders gris clairs échouent souvent le niveau AA ; remplacez-les par un gris plus sombre.
- Infographies : les etiquettes de graphiques sur fonds colores doivent passer AA large (3:1) pour les éléments non textuels.
- Audit d'accessibilite : avant une certification RGAA ou une livraison client, passez en revue toutes les paires couleur/fond de votre design system.
FAQ — Contraste WCAG
Quelle est la difference entre WCAG AA et AAA ?
Le niveau AA est le standard minimum exige par la plupart des legislations d'accessibilite (RGAA en France, ADA aux États-Unis). Il requiert un ratio de 4.5:1 pour le texte normal. Le niveau AAA va plus loin avec 7:1 : il est recommande pour les sites destines a des publics ayant des deficiences visuelles importantes, mais n'est pas toujours obligatoire.
Le contraste s'applique-t-il aux images et icônes ?
Oui, partiellement. Les éléments graphiques porteurs d'information (icônes fonctionnelles, graphiques de données, bordures de champs de formulaire) doivent respecter un ratio de 3:1 contre leur arrière-plan selon le critère WCAG 1.4.11. Les images purement décoratives sont exemptées.
Mon texte est en 20px bold. Quel ratio me faut-il ?
Un texte de 20px en gras equivaut a du "texte large" selon WCAG (14pt gras ou 18pt normal). Il suffit donc d'un ratio de 3:1 pour le niveau AA, et de 4.5:1 pour le niveau AAA. Cela vous donne plus de liberte de design tout en restant conforme.
Puis-je v?rifier le contraste d'une couleur semi-transparente ?
Les couleurs RGBA ou avec transparence doivent être calculées sur fond réel. Composez la couleur finale sur son arrière-plan effectif (ex. rgba(0,0,0,0.5) sur blanc = #808080) puis entrez cette valeur opaque dans le vérificateur. Le rendu dépend de la surface sous-jacente.
Le vérificateur fonctionne-t-il hors ligne ?
Oui. Chromaforge effectue tous les calculs directement dans votre navigateur via JavaScript. Aucune donnee n'est envoyée a un serveur. Une fois la page chargee, vous pouvez l'utiliser sans connexion Internet.