Tiny Online Tools logoTiny Online ToolssearchRechercher des outils…grid_viewTous les outils
Accueilchevron_rightOutils de Designchevron_rightVérificateur de Contraste de CouleurVérificateur de Contraste de Couleur

Vérificateur de Contraste de Couleur

Vérifiez les ratios de contraste WCAG 2.1 pour l'accessibilité.

#f8fafc#111827

Sample Heading Text

The quick brown fox jumps over the lazy dog. This is body text at 16px to demonstrate readability at normal size.

16.96:1
Contrast Ratio
Résultats WCAG 2.1
check_circle
AA Normal Text
Min 4.5:1Body text, UI components
RÉUSSI
check_circle
AA Large Text
Min 3:118pt+ or 14pt+ bold
RÉUSSI
check_circle
AAA Normal Text
Min 7:1Enhanced: body text
RÉUSSI
check_circle
AAA Large Text
Min 4.5:1Enhanced: large text
RÉUSSI

Outils similaires

Extracteur de palette de dégradé

Extracteur de palette de dégradé

Extrayez les arrêts de couleur prêts pour le dégradé à partir d'une image téléchargée.

Calculateur de rapport hauteur/largeur

Calculateur de rapport hauteur/largeur

Calculez les proportions et les dimensions mises à l'échelle pour les images et les vidéos.

Générateur de bordure dégradée

Générateur de bordure dégradée

Générez du CSS pour les bordures dégradées avec un angle et une largeur réglables.

Calculateur de hauteur de ligne

Calculateur de hauteur de ligne

Calculez des hauteurs de ligne optimales pour une typographie lisible.

Pipette de Couleur d'Image

Pipette de Couleur d'Image

Sélectionnez des codes couleur depuis n'importe quelle image.

mot compteur

mot compteur

Count mots, characters, et sentences in text.

Générateur d'URI de données

Générateur d'URI de données

Générez des URI de données à partir de fichiers locaux sans les télécharger.

apps

Plus d'outils

Parcourez notre collection complète d'outils en ligne gratuits.

Vérifiez le contraste avant d'envoyer vos couleurs en production

Une palette peut être élégante tout en restant insuffisante pour l'accessibilité. Ce vérificateur vous aide à tester les combinaisons de texte et d'arrière-plan par rapport aux seuils WCAG afin de détecter les problèmes avant qu'ils n'arrivent dans un design system, une bibliothèque de composants ou un produit en ligne.

Ce que les résultats indiquent

L'outil affiche le ratio de contraste ainsi que la réussite ou l'échec pour les niveaux WCAG les plus courants :

  • texte normal en AA
  • grand texte en AA
  • texte normal en AAA
  • grand texte en AAA

Pourquoi c'est utile en pratique

Le contrôle du contraste est important pour :

  • valider des couleurs de marque dans des composants
  • tester du texte sur des boutons, cartes ou bannières
  • vérifier l'accessibilité pendant la phase de handoff
  • éviter des combinaisons difficiles à lire pour les personnes malvoyantes

Un résultat conforme ne suffit pas toujours

Une combinaison peut passer techniquement tout en restant inconfortable avec une petite taille de texte ou une graisse légère. Après validation, prenez quand même le temps d'observer l'aperçu avec des tailles de texte réalistes.