Vérificateur de contraste de couleur

Vérifiez les ratios de contraste de couleur WCAG 2.1 pour le texte et les arrière-plans. Vérifiez la conformité AA et AAA pour le texte normal et volumineux.

Comment utiliser Vérificateur de contraste de couleur

  1. 1Entrez votre couleur de premier plan (texte) , RGB ou couleur nommée.
  2. 2Entrez votre couleur d'arrière-plan.
  3. 3Consultez le ratio de contraste et la conformité WCAG 2.1 AA/AAA pour le texte normal et volumineux.
  4. 4Ajustez les couleurs jusqu'à ce que votre conception réponde aux exigences d'accessibilité.
ZenovayAnalytics

Analytics pensé pour les fondateurs.

  • Suivi des visiteurs en temps réel
  • Vie privée d'abord, sans bandeau cookies
  • Installé en deux minutes
Découvrir Zenovay

Questions fréquemment posées

Qu'est-ce que le contraste de couleur WCAG ?
WCAG (Web Content Accessibility Guidelines) exige un contraste de couleur suffisant entre le texte et son arrière-plan afin que les personnes malvoyantes ou daltoniques puissent lire le contenu. Le ratio de contraste est mesuré de 1:1 (pas de contraste) à 21:1 (noir sur blanc).
Qu'est-ce que la conformité WCAG AA par rapport à AAA ?
WCAG AA exige un ratio de contraste de 4,5:1 pour le texte normal et 3:1 pour le texte volumineux (18 pt+ ou 14 pt+ gras). AAA exige 7:1 pour le texte normal et 4,5:1 pour le texte volumineux. AA est le minimum légal pour la plupart des lois sur l'accessibilité (ADA, EN 301 549). AAA est la norme or.
Qu'est-ce qui compte comme texte volumineux dans WCAG ?
Le texte volumineux est défini comme 18 pt (24 px) ou plus pour le poids normal, ou 14 pt (environ 18,67 px) ou plus pour le texte gras. Le texte volumineux a des exigences de contraste plus faibles car il est plus facile à lire avec un contraste plus faible.
Pourquoi le contraste des couleurs est-il important pour le SEO ?
Un texte à faible contraste augmente le taux de rebond (les utilisateurs partent), réduit le temps sur la page et nuit aux scores Core Web Vitals. Google utilise les signaux d'engagement dans le classement. Les sites accessibles se classent également mieux car ils servent plus d'utilisateurs efficacement.
Comment puis-je corriger un contraste faible ?
Assombrissez la couleur du texte ou éclaircissez l'arrière-plan (pour les thèmes clairs). De petits ajustements progressifs de 10-20% de la luminosité suffisent souvent. Utilisez une roue chromatique pour maintenir votre teinte de marque tout en ajustant la luminosité.
Quels formats de couleur cet outil accepte-t-il ?
Cet outil accepte les couleurs hex (#fff, #ffffff), RGB (rgb(255,255,255)), les couleurs CSS nommées (white, red) et HSL (hsl(0, 0%, 100%)). Hex est le format le plus fiable.
Le contraste WCAG s'applique-t-il aux icônes et graphiques ?
WCAG 1.4.11 (Non-text Contrast, Level AA) exige un ratio de contraste de 3:1 pour les composants UI (icônes, boutons, contrôles de formulaire) et les graphiques informatifs. Cet outil se concentre sur le contraste du texte (WCAG 1.4.3 et 1.4.6).