Sélectionnez la langue

Vérificateur de contraste

Vérificateur de contraste des couleurs WCAG pour calculer le rapport de contraste du texte.

Couleur de premier plan

Entrez un triplet hexadécimal valide ou utilisez le sélecteur de couleur.

Couleur d'arrière-plan

Entrez un triplet hexadécimal valide ou utilisez le sélecteur de couleur.

Rapport de contraste 21:1

Texte normal

WCAG AA: Pass

WCAG AAA: Pass

Exemple de texte normal - 16 pixels

Texte en gros caractères

WCAG AA: Pass

WCAG AAA: Pass

Exemple de texte volumineux 18 pt/24 px

Objets graphiques et composants de l'interface utilisateur

WCAG AA:  Pass

image/svg+xml
  • Calculez le rapport de contraste pour une taille de texte normale.
  • Calculez le rapport de contraste pour un texte de grande taille.
  • Calculez le rapport de contraste pour les composants de l'interface utilisateur.
  • Sélectionnez la couleur dans le sélecteur de couleurs
  • Configurer la luminosité des couleurs

Comment utiliser Contrast Checker

  • Choisissez la couleur d'arrière-plan
  • Choisissez la couleur de premier plan
  • Ajustez la luminosité si nécessaire
  • Vérifiez la présence de texte normal et volumineux dans l'audit

FAQ

Comment fonctionne le correcteur de contraste ?

Vous devez évaluer la couleur du texte et de l'arrière-plan. Selon les directives WCAG 2.1, les suivantes sont les suivantes : texte de grande taille : le texte d'une taille minimale de 18 pixels nécessite un rapport de contraste de 3:1 ; texte de petite taille : le texte d'une taille inférieure à 18 pixels nécessite un rapport de contraste de 4, 5:1.

Pourquoi mon site Web devrait-il avoir un contraste de couleur suffisant ?

Le texte sur un arrière-plan présentant un faible taux de contraste est souvent difficile à lire. Cela a non seulement un impact négatif sur les personnes malvoyantes, mais cela dérange en fait tous les utilisateurs. Par exemple, lisez du texte sur un téléphone portable à l'extérieur par une journée ensoleillée.

Qu'est-ce que l'accessibilité d'un site Web ?

Un site Web accessible est un site Web conçu pour que les personnes malvoyantes ou malentendantes puissent l'utiliser sans restrictions. Par exemple, cela garantit que tous les éléments du site présentent un contraste de couleur suffisant, c'est-à-dire que la couleur du texte est très différente de la couleur d'arrière-plan.

Les images et les vidéos doivent-elles être conformes aux exigences de contraste des couleurs des WCAG ?

Certains composants graphiques et d'interface nécessitent un rapport de contraste d'au moins 3:1. Toutefois, cela n'inclut pas les logos, les images décoratives ou les fichiers multimédia généraux.

© Smallize Pty Ltd 2022-2024. All Rights Reserved.