Calculateur de contraste
Vérifiez le contraste entre deux couleurs.
Calculez le contraste entre une couleur de texte et une couleur de fond. L’outil affiche le ratio, les verdicts AA et AAA, et un aperçu visuel pour contrôler rapidement la lisibilité.
Couleurs
Texte
Fond
Résultat
| Repère | Seuil | Statut |
|---|---|---|
| AA texte normal | 4.5:1 | OK |
| AA texte large | 3:1 | OK |
| AAA texte normal | 7:1 | OK |
| AAA texte large | 4.5:1 | OK |
| UI et graphiques | 3:1 | OK |
Aperçu en direct
Explication rapide
Choisissez une couleur de texte et une couleur de fond. Le ratio de contraste se met à jour automatiquement avec les principaux seuils WCAG : texte normal, texte large et éléments d’interface.
À essayer aussi
Besoin d’analyser les visites de votre site ?
Utilisez l’analyseur de logs Apache pour identifier les visiteurs, les robots, les erreurs HTTP et les pages les plus consultées.
Informations complémentaires
Vérifier un contraste avant publication
Ce calculateur aide à contrôler la lisibilité d’un texte sur un fond donné. Il est utile pour préparer une interface, vérifier une charte graphique, tester un bouton, corriger un thème ou comprendre pourquoi un audit d’accessibilité signale un contraste insuffisant.
Le ratio affiché compare la luminance relative des deux couleurs. Plus il est élevé, plus la différence entre le texte et le fond est forte.
Repères AA et AAA
Pour un texte normal, le niveau AA demande généralement un ratio d’au moins 4.5:1. Pour un texte large ou un élément d’interface important, le repère courant est 3:1. Le niveau AAA est plus strict : 7:1 pour le texte normal et 4.5:1 pour le texte large.
Ces seuils ne remplacent pas une vérification complète de la page, mais ils donnent un repère fiable pour éviter les contrastes trop faibles sur les contenus essentiels.
Tester les vrais états de l’interface
Pensez à vérifier les couleurs normales, les états survolés, les états actifs, les boutons désactivés, les messages d’erreur, les badges et les liens. Un contraste correct sur un bouton principal ne garantit pas que tous les petits textes de la page sont lisibles.
L’aperçu permet de voir immédiatement le rendu sur différentes tailles de texte. Il reste préférable de tester ensuite le résultat dans la page réelle, avec la police et la taille finales.
Limites et réutilisation
Les outils AppErgo sont proposés gratuitement à titre pratique et informatif. Malgré le soin apporté à leur conception, un résultat peut être incomplet, inattendu ou erroné. Avant toute utilisation importante, vérifiez les résultats avec une méthode adaptée.
Pour signaler un bug dans l’outil, vous pouvez utiliser le formulaire dédié.
Les résultats obtenus avec les outils peuvent être copiés et réutilisés librement. En cas de réutilisation publique d'un résultat, d'une méthode ou d'une page AppErgo, un lien vers la page concernée est apprécié.
Les textes, images, éléments visuels, scripts, modèles et éléments internes d'AppErgo restent la propriété d'AppErgo, sauf mention contraire.
Pour toute autre demande, vous pouvez contacter le webmaster.