Vérificateur de contraste

Vue d'ensemble

Cet outil s’adresse aux designers, développeurs et relecteurs qui doivent évaluer une paire de couleurs sans approximation. Il affiche le ratio de contraste entre deux couleurs et aide à comprendre ce que ce résultat signifie dans un vrai contexte d’interface : texte, libellés, boutons, cartes et surfaces. Utilisez-le lors de l’ajustement d’un thème, de la validation d’une couleur de marque ou avant la mise en ligne d’un composant. Il est particulièrement utile quand une combinaison paraît correcte à l’écran mais devient difficile à lire en petit texte, sur des états désactivés ou sur des surfaces teintées.

Cas d'usage

• Texte de paragraphe sur fond clairVérifiez qu’un texte courant reste lisible sur du blanc, de l’ivoire ou des cartes très pâles.
• Libellé de bouton sur couleur de marqueTestez si un texte blanc, foncé ou légèrement teinté reste net sur un bouton plein.
• Texte secondaire dans un tableau de bordContrôlez si les métadonnées, dates et indications restent visibles dans des écrans denses.
• Revue d’un thème sombreÉvaluez le texte sur des panneaux anthracite, des cartes et des calques avant de livrer une interface dark mode.

Comment ca marche

1. 1

   Choisissez la couleur du texte et la couleur du fond.

2. 2

   L’outil calcule le ratio de contraste entre les deux couleurs.

3. 3

   Analysez le résultat pour le texte normal, les grands titres et les surfaces d’interface où la lisibilité compte.

Exemples

FAQ