Vérificateur de contraste des couleurs

1. Saisissez la valeur HEX de la couleur de premier plan ou choisissez-la avec son sélecteur.
2. Saisissez la valeur HEX de la couleur d’arrière-plan ou utilisez son sélecteur.
3. Consultez le ratio de contraste en temps réel.
4. Vérifiez les résultats WCAG 2.2 pour le texte normal, le texte agrandi et les éléments non textuels concernés.
5. Prévisualisez un exemple de texte et un bouton avec les couleurs choisies.
6. Utilisez Inverser pour échanger les couleurs de premier plan et d’arrière-plan, ou Réinitialiser pour retrouver les couleurs par défaut.

Vérificateur de contraste des couleurs

Le contraste des couleurs décrit la différence de luminosité relative entre deux couleurs. Un contraste suffisant peut aider à distinguer le texte de son arrière-plan. Ce vérificateur permet de tester une combinaison avant de l’utiliser dans un site Web, une application, un système de design ou une autre interface.

Saisissez des valeurs HEX ou choisissez les couleurs avec les sélecteurs. Le ratio de contraste et les résultats WCAG 2.2 se mettent à jour lorsque les couleurs changent.

Vérifier le contraste des couleurs

Choisissez une couleur de premier plan pour le texte ou un autre élément et une couleur d’arrière-plan. Saisissez les valeurs HEX ou utilisez les sélecteurs. Le vérificateur calcule le ratio de contraste et affiche les résultats selon les seuils WCAG applicables.

Qu’est-ce qu’un ratio de contraste ?

Le ratio de contraste décrit la différence relative entre deux couleurs et s’écrit sous forme de rapport, par exemple 4,5:1. Il va de 1:1, sans différence de contraste, à 21:1, le contraste maximal entre le noir et le blanc. Un ratio élevé indique généralement une différence plus importante, mais le seuil requis dépend de l’usage : texte normal, texte agrandi ou contenu non textuel concerné.

Exigences de contraste WCAG 2.2

Pour le texte normal, WCAG AA exige au moins 4,5:1 et AAA au moins 7:1. Pour le texte agrandi, AA exige 3:1 et AAA 4,5:1. Les composants d’interface et objets graphiques significatifs concernés ont un minimum de 3:1 selon le critère non textuel applicable. Le vérificateur affiche ces résultats séparément.

Qu’est-ce qu’un texte agrandi ?

Pour le contraste WCAG, le texte de grande taille correspond à au moins 18 points ou 14 points en gras. Les points et pixels CSS ne sont pas toujours interchangeables : tenez compte du rendu réel du texte. S’il ne répond pas à la définition du texte agrandi, utilisez les seuils du texte normal.

Comprendre les résultats AA et AAA

AA et AAA sont des niveaux de conformité WCAG différents, et AAA exige un contraste plus élevé pour le texte. Une combinaison avec un ratio de 5:1 satisfait AA pour le texte normal, mais pas AAA ; elle satisfait les deux niveaux pour le texte agrandi. Chaque mention Réussi ou Échec correspond au seuil affiché.

Prévisualiser, inverser et réinitialiser

L’aperçu présente un exemple de texte et un bouton avec les couleurs sélectionnées. Utilisez-le avec le ratio numérique pour examiner visuellement la combinaison. Inverser échange les couleurs de premier plan et d’arrière-plan ; Réinitialiser restaure les couleurs par défaut. Les résultats évoluent lorsque vous modifiez une couleur.

Ce que signifie un résultat réussi

Un résultat réussi signifie que la paire choisie satisfait ce seuil de contraste précis. Cela ne signifie pas que tout un site ou une interface est accessible. L’accessibilité dépend aussi de la typographie, de la taille et de l’espacement du texte, des indicateurs de focus, de la navigation au clavier, des libellés, des textes alternatifs, de la structure, des animations et de la prise en charge des lecteurs d’écran. La couleur ne devrait pas être le seul moyen de transmettre une information importante.

Quand utiliser un vérificateur de contraste

Vérifiez les couleurs du texte et de l’arrière-plan lors de la conception d’un site, comparez des couleurs de texte pour améliorer la lisibilité, examinez les boutons et leurs contours, testez les composants et graphiques concernés ou contrôlez une combinaison déjà présente dans une interface. Une vérification précoce aide à repérer les couleurs à ajuster.

Comparez les couleurs de premier plan et d’arrière-plan et examinez le ratio selon les seuils WCAG 2.2 AA et AAA pour le texte normal et agrandi, ainsi que le seuil non textuel applicable de 3:1.

Saisissez les couleurs de premier plan et d’arrière-plan en HEX ou choisissez-les avec les sélecteurs. Le résultat évolue lorsque vous modifiez une couleur.

Prévisualisez un exemple de texte et un bouton avec les couleurs choisies afin d’observer la combinaison en plus de consulter son ratio.

Utilisez Inverser pour échanger les couleurs de premier plan et d’arrière-plan, ou Réinitialiser pour restaurer les couleurs par défaut.