Calculateur de contraste

Vérifie le contraste entre texte et fond selon les normes WCAG et propose des alternatives accessibles.

21.00:1
AATexte normal - minimum 4.5:1 (WCAG AA)
AAATexte normal - minimum 7:1 (WCAG AAA)
AA LargeGrand texte (≥ 18pt ou ≥ 14pt gras) — minimum 3:1 (WCAG AA)
AAA LargeGrand texte (≥ 18pt ou ≥ 14pt gras) — minimum 4.5:1 (WCAG AAA)
UI (3:1)Composants d'interface (bordures, icônes) — minimum 3:1 (WCAG 1.4.11)

Suggestions qui passent le ratio cible

Ajuster
Ratio cible
#050505AAA

Contraste : 20.38

Exemple : Lire ceci facilement

#000000AAA

Contraste : 21.00

Exemple : Lire ceci facilement

#0a0a0aAAA

Contraste : 19.80

Exemple : Lire ceci facilement

#0f0f0fAAA

Contraste : 19.17

Exemple : Lire ceci facilement

#141414AAA

Contraste : 18.42

Exemple : Lire ceci facilement

#1f1f1fAAA

Contraste : 16.48

Exemple : Lire ceci facilement

#292929AAA

Contraste : 14.55

Exemple : Lire ceci facilement

#2e2e2eAAA

Contraste : 13.58

Exemple : Lire ceci facilement

#3d3d3dAAA

Contraste : 10.86

Exemple : Lire ceci facilement

#525252AAA

Contraste : 7.81

Exemple : Lire ceci facilement

#1a1a1aAAA

Contraste : 17.40

Exemple : Lire ceci facilement

#333333AAA

Contraste : 12.63

Exemple : Lire ceci facilement

À propos : Calculateur de contraste

Le calculateur de contraste mesure le ratio entre une couleur de texte et une couleur de fond selon la formule des WCAG, et indique si la paire passe les niveaux AA et AAA pour le texte normal, le grand texte et les composants d'interface. Il s'adresse aux designers et aux développeurs front qui vérifient l'accessibilité d'une charte, d'un bouton ou d'un thème sombre. Quand le contraste ne suffit pas, il propose des couleurs proches qui atteignent le ratio visé.

Fonctionnalités

  • Ratio calculé en direct, avec un badge réussi ou échoué pour AA, AAA, grand texte et composants d'interface (3:1).
  • Aperçu sur tes couleurs : texte normal en 16 px, grand texte en gras et bouton d'action, avec ton propre texte.
  • Jusqu'à 12 suggestions de couleurs proches qui passent le ratio cible (3, 4.5 ou 7), en ajustant le texte ou le fond.
  • Saisie en HEX, en rgb() ou par nom CSS, sélecteur visuel, et bouton pour inverser texte et fond.
  • Annuler et rétablir (Ctrl+Z, Ctrl+Maj+Z), et couleurs gardées dans l'URL : le lien rouvre la même paire.

Comment l'utiliser

  1. Saisis la couleur du texte et celle du fond, en HEX, en rgb() ou avec le sélecteur.
  2. Lis le ratio affiché et vérifie les badges AA et AAA qui correspondent à ton usage.
  3. Si le contraste ne suffit pas, choisis le ratio cible et la couleur à ajuster, texte ou fond.
  4. Clique sur « Appliquer » sous une suggestion, ou copie son code HEX.

Questions relatives à l'utilisation

Le critère 1.4.3 (AA) demande au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte, c'est-à-dire 18 pt (24 px) ou plus, ou 14 pt (environ 18,7 px) en gras. Les composants d'interface et les éléments graphiques utiles doivent atteindre 3:1 (critère 1.4.11).

AAA est le niveau renforcé (critère 1.4.6) : 7:1 pour le texte normal et 4.5:1 pour le grand texte. La plupart des réglementations et des audits d'accessibilité visent AA ; AAA est plutôt recherché pour les longs textes ou les publics malvoyants.

On calcule la luminance relative de chaque couleur à partir de ses composantes sRGB linéarisées, puis le ratio (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire. Le résultat va de 1:1 pour deux couleurs identiques à 21:1 pour du noir sur blanc.