Vérificateur de contraste des couleurs
Couleur du texte
Couleur de fond
Aperçu
Texte normal (18px)
Texte en gros caractères (24px gras)
Tenez-nous au courant
Veuillez partager votre expérience
Outils similaires
Générateur de gradient
Créez des dégradés linéaires et radiaux avec la sortie CSS
Générateur de palettes de couleurs
Extraire les couleurs des images et générer des palettes
Générateur d'espace réservé
Générer des images de substitution
Générateur de favicon
Redimensionner les images et générer des fichiers ICO
À propos Vérificateur de contraste des couleurs
Vérifiez la conformité WCAG AA/AAA et les rapports de contraste des couleurs du texte et de l'arrière-plan. Outil d'accessibilité gratuit.
Comment utiliser
Étape 1
Saisissez ou sélectionnez une couleur de premier plan (texte) à l'aide du code HEX ou du sélecteur de couleurs.
Étape 2
Saisissez ou sélectionnez une couleur de fond à l'aide du code HEX ou du sélecteur de couleurs.
Étape 3
Visualisez le rapport de contraste calculé en temps réel
Étape 4
Vérifiez la conformité aux normes WCAG AA et AAA pour les textes de taille normale et grande.
Étape 5
Aperçu visuel du texte sur fond clair
Étape 6
Si le contraste est insuffisant, utilisez les couleurs suggérées pour une meilleure accessibilité.
Étape 7
Utilisez « Inverser les couleurs » pour inverser le premier plan et l’arrière-plan.
Caractéristiques et avantages
- ✅Calcul du rapport de contraste en temps réel
- ✅Vérification de la conformité aux normes WCAG 2.1 AA et AAA
- ✅Vérifications séparées pour le texte normal et le texte de grande taille
- ✅Aperçu visuel du texte sur fond blanc
- ✅Sélecteurs de couleurs pour une sélection de couleurs facile
- ✅Saisie de couleur hexadécimale avec validation
- ✅Bouton d'inversion des couleurs pour un test rapide
- ✅Générateurs de couleurs aléatoires
- ✅Prompt automatiques pour les contrastes défaillants
- ✅Indique les proportions requises (4,5:1, 3:1, 7:1, 4,5:1)
- ✅Indicateurs de réussite/échec avec coches
- ✅100 % basé sur navigateur – aucun téléchargement sur serveur
- ✅100 % gratuit – sans filigrane, sans inscription
FAQ
Qu'est-ce que le rapport de contraste des couleurs ?
Le rapport de contraste des couleurs mesure la différence de luminance entre deux couleurs et s'exprime par un ratio tel que 4,5:1. Plus ce ratio est élevé, meilleur est le contraste. Il est calculé selon la formule WCAG 2.1, basée sur la luminance relative de chaque couleur.
Que sont les normes WCAG AA et AAA ?
Les WCAG (Web Content Accessibility Guidelines) définissent deux niveaux de conformité : AA (minimum) exige un rapport de 4,5:1 pour les textes normaux et de 3:1 pour les textes de grande taille. AAA (amélioré) exige un rapport de 7:1 pour les textes normaux et de 4,5:1 pour les textes de grande taille. La plupart des sites web visent la conformité au niveau AA.
Qu'est-ce qui est considéré comme un texte de grande taille ?
On considère qu'un texte de grande taille mesure 18 points (24 px) ou plus, ou 14 points (18,66 px) ou plus s'il est en gras. Les textes de grande taille ont des exigences de contraste moins élevées (3:1 pour AA, 4,5:1 pour AAA) car ils sont plus faciles à lire.
Pourquoi mon design échoue-t-il aux tests de contraste ?
Les raisons courantes incluent : l’utilisation de texte clair sur fond clair, de texte foncé sur fond foncé ou de couleurs de luminance similaire. Même des couleurs qui vous semblent différentes peuvent présenter un faible contraste. Il est toujours conseillé de tester avec un outil de vérification du contraste.
Dois-je viser la conformité AA ou AAA ?
Le niveau AA des WCAG est une exigence légale pour la plupart des sites web et constitue le minimum requis. Le niveau AAA est recommandé pour une accessibilité optimale, notamment pour les sites destinés aux personnes âgées ou malvoyantes. Commencez par le niveau AA et visez le niveau AAA lorsque cela est possible.
Puis-je utiliser n'importe quelles couleurs si le contraste est bon ?
Un bon contraste est essentiel, mais insuffisant. Pensez également au daltonisme (utilisez notre simulateur de daltonisme), évitez de vous fier uniquement à la couleur pour transmettre des informations et assurez-vous que les couleurs s'harmonisent dans votre design global.
Que faire si je n'arrive pas à obtenir un bon contraste avec les couleurs de ma marque ?
Essayez de modifier la teinte (plus claire ou plus foncée), d'utiliser la couleur de votre marque pour les accents plutôt que pour le texte, d'ajouter des bordures ou des arrière-plans, ou d'utiliser la fonction de prompt pour trouver l'alternative disponible la plus proche. Les couleurs de marque peuvent souvent être légèrement modifiées sans altérer l'identité visuelle.
Dois-je vérifier chaque combinaison de couleurs ?
Vérifiez toutes les combinaisons de texte sur fond clair, notamment le corps du texte, les titres, les liens, les boutons et les champs de formulaire. Vérifiez également les états de survol et de focus. Les icônes et les graphiques véhiculant des informations doivent également respecter les exigences de contraste.
Le rapport de contraste maximal est-il de 21:1 ?
Oui, 21:1 est le rapport de contraste maximal possible, obtenu en comparant le noir pur (#000000) au blanc pur (#FFFFFF) ou inversement. Cela représente le contraste le plus élevé possible.