Hiérarchie visuelle
Le renard brun rapide saute par-dessus le chien paresseux. La lisibilité est essentielle.
Un vérificateur de contraste est un outil d'accessibilité qui mesure la différence de luminance entre les couleurs de premier plan et d'arrière-plan. Il calcule le rapport de contraste et évalue si votre combinaison de couleurs respecte les normes WCAG 2.1. Le vérificateur de contraste de Color Taste fournit des résultats instantanés de réussite/échec pour les niveaux AA et AAA, ainsi que des suggestions de correction automatique lorsque vos couleurs ne répondent pas aux exigences.
Vérifiez que vos couleurs respectent les normes WCAG AA : 4,5:1 pour le texte normal et 3:1 pour les grands textes et les composants d'interface.
Vérifiez la conformité à la norme AAA plus stricte : 7:1 pour le texte normal et 4,5:1 pour les grands textes.
Testez le contraste pour le texte normal, les grands textes (18pt+), les boutons, les bordures de champs, les icônes et autres éléments d'interface.
Tapez ou collez votre couleur de texte/de premier plan au format HEX, RVB ou TSL dans le premier champ de saisie.
Saisissez votre couleur d'arrière-plan dans le deuxième champ. L'aperçu en direct se met à jour en temps réel.
Le rapport de contraste est calculé automatiquement. Les coches vertes indiquent une réussite, les croix rouges indiquent un échec aux niveaux WCAG.
Lorsque votre combinaison échoue, cliquez sur la suggestion de correction automatique pour ajuster vos couleurs tout en conservant l'intention de conception.
Obtenez des calculs de rapport de contraste en temps réel avec des résultats de réussite/échec pour les normes AA et AAA.
Lorsque le contraste échoue, recevez des suggestions intelligentes qui ajustent vos couleurs de manière minimale pour répondre aux exigences d'accessibilité.
Voyez exactement à quoi ressemble votre texte sur votre couleur d'arrière-plan avec des aperçus en temps réel pour différentes tailles de texte.
Travaillez dans votre format de couleur préféré. Le vérificateur gère toutes les conversions automatiquement.
Vérifiez l'accessibilité pendant le processus de conception.
Validez le contraste dans le code avant la mise en production.
Assurez-vous que les palettes de tokens respectent les normes WCAG.
Auditez et corrigez les problèmes de contraste à grande échelle.
WCAG 2.1 définit des rapports de contraste minimaux pour différents types de contenu et niveaux de conformité :
4,5:1 pour le texte normal, 3:1 pour les grands textes (18pt ou 14pt en gras). C'est l'objectif de conformité le plus courant.
7:1 pour le texte normal, 4,5:1 pour les grands textes. La référence absolue pour une accessibilité maximale.
3:1 minimum pour les boutons, les bordures de champs, les icônes et tout élément graphique porteur de sens.
Pour WCAG AA : le texte normal nécessite au moins 4,5:1, les grands textes (18pt ou 14pt en gras) nécessitent au moins 3:1, et les composants d'interface non textuels nécessitent au moins 3:1.
AAA est une norme plus stricte : 7:1 pour le texte normal et 4,5:1 pour les grands textes. La plupart des systèmes de design visent AA comme minimum, avec AAA comme objectif ambitieux pour le contenu critique.
Oui. Le vérificateur de contraste de Color Taste accepte les formats de couleur HEX, RVB et TSL. Saisissez vos couleurs dans n'importe quel format et l'outil gère la conversion automatiquement.
Lorsque votre combinaison de couleurs échoue, Color Taste suggère des couleurs ajustées qui répondent aux exigences WCAG tout en restant aussi proches que possible de votre intention de conception originale. Cliquez sur la suggestion pour l'appliquer instantanément.
Oui, le vérificateur de contraste de Color Taste est entièrement gratuit. Pas d'inscription, pas de filigrane, pas de limites d'utilisation. Vérifiez autant de combinaisons de couleurs que vous le souhaitez.