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 Chromoforge.
- 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’à 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. Chromoforge calcule instantanément 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'accessibilité 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 dépasse 4.5:1 avant de livrer le design.
- Mode sombre : testez chaque combinaison texte/fond pour vos thèmes 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 étiquettes de graphiques sur fonds colores doivent passer AA large (3:1) pour les éléments non textuels.
- Audit d'accessibilité : 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 différence entre WCAG AA et AAA ?
Le niveau AA est le standard minimum exige par la plupart des législations d'accessibilité (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 recommandé pour les sites destinés a des publics ayant des déficiences 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 équivaut 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 liberté de design tout en restant conforme.