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.

Outil de remplacement de couleur

Outil de remplacement de couleur

Remplacez une couleur dans une image par une autre. Tolérance réglable pour la distance de couleur. Entièrement privé, fonctionne dans votre navigateur.

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.

Pipette de Couleur d'Image

Pipette de Couleur d'Image

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

Supprimer les Lignes en Double

Supprimer les Lignes en Double

Supprime les lignes en double dans le texte.

Generateur de Nombres Aleatoires

Generateur de Nombres Aleatoires

Generez des nombres aleatoires entre des plages personnalisees.

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.