Accessibilité
Mesurez le rapport de contraste entre une couleur de texte et son fond selon les critères WCAG 2.2 AA et AAA.
Grand texte en gras
Texte normal : le renard brun rapide saute par-dessus le chien paresseux.
Bouton
5,08:1
| Critère | Seuil | Résultat |
|---|---|---|
| Texte normal — AA | 4,5:1 | Réussi |
| Texte normal — AAA | 7:1 | Échec |
| Grand texte — AA | 3:1 | Réussi |
| Grand texte — AAA | 4,5:1 | Réussi |
| Composants d’interface et icônes — AA | 3:1 | Réussi |
Le vérificateur de contraste calcule le rapport de contraste entre une couleur de texte et une couleur de fond, puis indique si le couple respecte les niveaux AA et AAA des WCAG 2.2 pour le texte normal, le grand texte et les composants d’interface. L’aperçu se met à jour en direct, et si le texte est insuffisant, l’outil propose la couleur la plus proche qui atteint 4,5:1 en gardant la même teinte. Tout est calculé dans votre navigateur : aucune couleur n’est envoyée à un serveur.
Le niveau AA demande 4,5:1 pour le texte normal et 3:1 pour le grand texte (24 px ou plus, ou 18,66 px en gras) ainsi que pour les composants d’interface et les icônes. Le niveau AAA, plus strict, demande 7:1 pour le texte normal et 4,5:1 pour le grand texte.
Selon la formule des WCAG : on calcule la luminance relative de chaque couleur à partir de ses composantes sRGB, puis le rapport (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance la plus claire. Il va de 1:1 (aucun contraste) à 21:1 (noir sur blanc).
Oui. Le critère 1.4.11 des WCAG 2.2 demande au moins 3:1 pour les éléments qui permettent de repérer ou d’utiliser un composant, comme la bordure d’un champ de formulaire ou une icône sans texte, et pour les états comme le focus.
Non. Le calcul se fait localement dans votre navigateur et rien n’est transmis ni conservé.
Statique ou dynamique, taille, marge, correction d’erreur, contraste, PNG ou SVG : les réglages pour créer un QR code gratuit qui se scanne du premier coup.
Les ratios de contraste WCAG expliqués : 4,5:1, 3:1 et 7:1, grand texte, erreurs fréquentes (gris clair, texte sur image) et comment corriger une couleur.
Ce que représentent HEX, RGB et HSL, comment convertir une couleur de l’un à l’autre, pourquoi HSL aide pour les variantes et quel format choisir selon l’usage.
Comment extraire les couleurs d’une image : pixel exact, palette dominante par découpe médiane, limites du JPEG et de l’éclairage, puis contrôle du contraste.
Construire une palette pour un site : base, harmonies, règle 60-30-10, nuances de 50 à 950, couleurs d’état, contrastes et export en CSS ou en Tailwind v4.
Convertissez HEX, RGB, HSL, HSV et OKLCH, avec aperçu et contraste.
Relevez une couleur dans une image et obtenez sa palette dominante.
Compressez, redimensionnez et convertissez vos images JPEG, PNG, WebP.
Créez harmonies et nuances 50 à 950, exportables en CSS ou Tailwind.