Vérificateur de contraste de couleur

Vérificateur de contraste de couleurs WCAG gratuit : testez les couleurs du texte et de l'arrière-plan pour vérifier la conformité AA et AAA dans votre navigateur. Entrez les valeurs hexadécimales ou RVB, consultez le rapport de contraste et réussissez/échouez instantanément. Pas de connexion, pas de téléchargement.

Que mesure ce vérificateur de contraste de couleurs ?

Il calcule le rapport de contraste WCAG 2.x entre une couleur de premier plan (texte) et une couleur d'arrière-plan en utilisant la luminance relative sRGB. Vous obtenez un rapport numérique (par exemple 4,52:1) plus réussite/échec pour les seuils WCAG AA et AAA sur le texte normal et le texte volumineux. Il s'agit d'un outil d'aide à l'assurance qualité de la conception, et non d'un audit d'accessibilité entièrement automatisé de l'ensemble de votre site.

Quels formats de couleurs sont pris en charge ?

Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb() et rgba(). Collez les valeurs de la palette de marque à partir de jetons Figma, de variables CSS ou de documents de conception. Un hexadécimal court comme #fff se développe en #ffffff avant que la luminance ne soit calculée.

Quelle est la différence entre les WCAG AA et AAA ?

AA est la référence légale et produit commune : 4,5 : 1 pour le texte normal, 3 : 1 pour le texte de grande taille. AAA est plus strict : 7:1 normal, 4,5:1 grand. De nombreux sites marketing ciblent AA pour le corps du texte et AAA uniquement pour les titres phares ou l'interface utilisateur à haut risque. Cet outil affiche les deux afin que vous puissiez choisir une cible défendable avec un design.

Qu'est-ce qui est considéré comme un texte volumineux pour les WCAG ?

Le texte volumineux a un poids normal d'au moins 18 points (24 px CSS) ou d'au moins 14 points en gras (environ 18,66 px CSS). Les boutons, les légendes et les petits caractères échouent souvent AA, même lorsque les titres réussissent : vérifiez chaque taille que vous expédiez, pas seulement l'échantillon H1.

Les couleurs de ma marque sont-elles téléchargées ?

Non. L'analyse et les calculs de luminance s'exécutent entièrement dans votre navigateur. Les expériences de palette inédites et les couleurs NDA des clients restent sur votre appareil. Effacez les champs sur les machines partagées une fois terminé.

La transparence affecte-t-elle le rapport de contraste ?

Les valeurs rgba et #RRGGBBAA sont analysées, mais le contraste est évalué sur des canaux sRGB opaques : le vérificateur ne compose pas de texte alpha-composite sur des arrière-plans photographiques. Pour le texte sur les images, échantillonnez la couleur effective derrière la copie ou utilisez d'abord une superposition unie, puis revérifiez.

Ce vérificateur de contraste WCAG est-il gratuit ?

Oui. Gratuit sans connexion pour le ratio de base et le chemin réussite/échec.

  • text-diff
  • word-counter
  • readability-checker
  • sentiment-analyzer