Code & web

Contraste de couleurs (accessibilité)

Vérifiez si un texte est lisible sur son fond selon les règles d'accessibilité WCAG.

Intégrer ce calculateur sur votre site

Copiez ce code et collez-le dans votre page (WordPress, Wix, Webflow, HTML…). C'est gratuit : merci de laisser le lien vers HOD Calc.

Comment ça marche

Le ratio va de 1:1 à 21:1. WCAG demande au moins 4,5:1 pour le texte normal (AA) et 7:1 pour le niveau AAA ; 3:1 suffit pour les gros titres.

Les résultats sont donnés à titre indicatif et ne remplacent pas l'avis d'un professionnel.

Exemple de calcul

Avec les valeurs proposées par défaut :

  • Couleur du texte#1a1f36
  • Couleur du fond#f8faff

on obtient :

  • Ratio de contraste15,55 : 1
  • AA texte normal (4,5)✓ réussi
  • AA gros texte (3)✓ réussi
  • AAA texte normal (7)✓ réussi

Questions fréquentes

Comment fonctionne l'outil « Contraste de couleurs » ?

Le ratio va de 1:1 à 21:1. WCAG demande au moins 4,5:1 pour le texte normal (AA) et 7:1 pour le niveau AAA ; 3:1 suffit pour les gros titres.

Quelles informations faut-il saisir ?

Il suffit de renseigner : couleur du texte, couleur du fond. Le résultat se met à jour pendant que vous tapez.

Pouvez-vous donner un exemple ?

Couleur du texte : #1a1f36; Couleur du fond : #f8faff → Ratio de contraste : 15,55 : 1; AA texte normal (4,5) : ✓ réussi.

Ce calculateur est-il gratuit et mes données restent-elles privées ?

Oui. HOD Calc est entièrement gratuit et sans inscription. Le calcul est fait directement dans votre navigateur : rien de ce que vous tapez n'est envoyé ni enregistré.