Vérificateur de contraste des couleurs
Assurez-vous que votre site web est lisible pour tout le monde. Notre vérificateur gratuit de contraste des couleurs calcule le ratio exact entre les couleurs de votre texte et de votre arrière-plan, en vérifiant la conformité avec les directives d'accessibilité WCAG.
Sample Heading
This is an example paragraph to test readability and visual contrast.
WCAG 2.1 Compliance Status
Qu'est-ce que le Vérificateur de contraste de couleurs - Outil d'accessibilité WCAG ?
Le vérificateur de contraste des couleurs est un utilitaire d'accessibilité web. Il évalue mathématiquement la luminance relative d'une couleur de premier plan (texte) par rapport à une couleur de fond pour déterminer s'il existe une différence visuelle suffisante pour que les utilisateurs malvoyants puissent lire le texte confortablement.
Comment utiliser le Vérificateur de contraste de couleurs - Outil d'accessibilité WCAG
- Entrez le code HEX pour la couleur de votre texte/avant-plan.
- Entrez le code HEX de votre couleur de fond.
- L'outil calcule le ratio de contraste (par exemple, 4,5:1).
- Il affiche une note de Réussite/Échec pour les normes WCAG AA et AAA.
Exemple
Vous testez du texte noir pur (#000000) sur un fond blanc pur (#FFFFFF). L'outil calcule le contraste maximal possible de exactement 21:1, répondant facilement à toutes les exigences d'accessibilité AAA.
Comprendre vos résultats
Un ratio plus élevé signifie que le texte est plus facile à lire. Les directives pour l'accessibilité des contenus Web (WCAG) exigent un ratio minimum de 4,5:1 pour le texte normal (norme AA) et de 7:1 pour une accessibilité stricte (norme AAA).
Cas d'utilisation courants
- Audits d'accessibilité Web : S'assurer qu'un site web corporatif ne viole pas les lois sur la conformité ADA concernant la lisibilité.
- Conception UI/UX : Vérification si un texte d'espace réservé gris clair dans un champ de saisie blanc est trop difficile à lire.
- Lignes directrices de la marque : Vérifier que les couleurs de la marque peuvent être superposées en toute sécurité dans les graphiques marketing.
Comment ça marche
L'outil convertit les deux codes HEX en RGB, applique une formule mathématique spécifique pour calculer la 'luminance relative' des deux couleurs, puis divise la luminance la plus claire par la luminance la plus foncée. Le résultat est un ratio compris entre 1:1 (aucun contraste) et 21:1 (contraste maximum).
Conseils et notes de précision
- •Le texte large (plus de 18 pt ou 14 pt en gras) est plus facile à lire, donc les WCAG ne nécessitent qu'un ratio minimum de 3:1 pour respecter la norme AA.
- •Le daltonisme affecte la perception des teintes, mais le contraste de luminance relative reste le facteur le plus important pour la lisibilité.
Foire aux questions
Que se passe-t-il si mes couleurs échouent au contrôle ?
S'ils échouent, votre texte sera très difficile à lire pour les personnes ayant une faible vision ou un daltonisme. Vous devriez assombrir la couleur du texte ou éclaircir la couleur de l'arrière-plan jusqu'à ce que le ratio atteigne au moins 4,5:1.
Est-ce que 21:1 est le meilleur contraste ?
Mathématiquement, oui. Cependant, le texte noir pur sur des arrière-plans blancs purs (21:1) peut provoquer une fatigue oculaire ou une « halation » chez certains utilisateurs dyslexiques. Un gris très foncé (par exemple, #222222) sur du blanc cassé est souvent préféré.
Outils associés
Sélecteur de couleur
Vous cherchez la teinte exacte de bleu pour l'arrière-plan de votre site web ? Notre sélecteur de couleurs en ligne gratuit vous permet de choisir visuellement les couleurs et vous fournit les formats de code exacts dont les développeurs et les designers ont besoin.
Générateur de palette de couleurs
Vous commencez un nouveau projet de design mais vous êtes bloqué sur les couleurs ? Notre générateur de palette de couleurs gratuit crée automatiquement des schémas de couleurs magnifiques et mathématiquement équilibrés pour stimuler votre créativité.
Convertisseur HEX en RGB
Vous avez un code couleur hexadécimal mais vous avez besoin des valeurs RVB pour ajouter un canal d'opacité en CSS ? Notre convertisseur HEX en RVB gratuit traduit instantanément les chaînes de couleurs hexadécimales en entiers standards Rouge, Vert, Bleu.
Formateur JSON en Ligne Gratuit
Travailler avec des données JSON non formatées peut être un casse-tête pour les développeurs. Notre Formateur JSON en ligne simplifie l'embellissement, la validation et l'analyse de vos chaînes JSON en un instant. Que vous déboguiez une réponse d'API ou écriviez des fichiers de configuration, cet outil formate vos données et met en évidence les erreurs de syntaxe.
Populaire
Calculateur d'âge
Vous voulez savoir exactement quel âge vous avez, au jour près ? Notre calculateur d'âge gratuit vous donne une réponse précise en quelques secondes : années, mois, jours, le nombre total de jours vécus et un compte à rebours jusqu'à votre prochain anniversaire. Tout le traitement s'effectue localement dans votre navigateur — votre date de naissance ne quitte jamais votre appareil.
Calculateur de pourcentage
Vous avez des difficultés avec les pourcentages ? Notre Calculateur de Pourcentage gratuit gère instantanément toutes les questions standard sur les pourcentages, du calcul des réductions à la détermination des taxes.
Prêt à commencer ?
Vérifiez dès maintenant l'accessibilité de vos couleurs !
Utiliser l'outil maintenantAvis de non-responsabilité: Cet outil calcule le contraste en se basant sur l'algorithme standard WCAG 2.1 pour la luminance relative.