Vérificateur de contraste des couleurs

Vérifiez le ratio de contraste WCAG AA et AAA entre la couleur de texte et la couleur de fond

Essayer un exemple

Couleur du texte (premier plan)

Couleur de fond

Exemple de texte grand (18px gras)

Exemple de texte normal — voici comment votre corps de texte apparaîtra sur la couleur de fond que vous avez choisie.

Ratio de contraste

14.63:1

Conformité WCAG

Réussi

Normal AA

Réussi

Normal AAA

Réussi

Grand AA

Réussi

Grand AAA

WCAG AATexte normal: 4.5:1, Texte grand (18px+ ou 14px gras): 3:1

WCAG AAATexte normal: 7:1, Texte grand (18px+ ou 14px gras): 4.5:1

Qu'est-ce que la vérification de contraste des couleurs ?

La vérification de contraste des couleurs mesure la différence de luminance entre une couleur de premier plan (généralement le texte) et une couleur de fond, puis exprime le résultat sous forme de ratio. Un ratio de 1:1 signifie que les couleurs sont identiques ; 21:1 est le maximum, représentant du noir sur blanc ou vice versa. Les Règles pour l'accessibilité des contenus Web (WCAG), publiées par le W3C, définissent les ratios de contraste minimaux que le texte doit atteindre pour que les personnes malvoyantes ou atteintes de déficiences chromatiques puissent le lire.

La formule du ratio de contraste est issue de WCAG 2.x et repose sur la luminance relative, une mesure de la brillance apparente d'une couleur pour l'œil humain. La luminance relative est calculée en linéarisant chaque canal sRGB (en supprimant le gamma) et en pondérant les canaux selon les coefficients ITU-R BT.709 : 0,2126 pour le rouge, 0,7152 pour le vert et 0,0722 pour le bleu. Le vert contribue le plus car l'œil humain y est le plus sensible. Le ratio est ensuite (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire.

WCAG définit deux niveaux de conformité. Le niveau AA exige un ratio de contraste d'au moins 4,5:1 pour le texte de taille normale et 3:1 pour le texte grand (18px ou plus, ou 14px en gras). Le niveau AAA relève la barre à 7:1 et 4,5:1 respectivement. WCAG 2.1 a également introduit le Critère de succès 1.4.11, qui exige un ratio de 3:1 pour les composants d'interface non textuels comme les bordures, les icônes et les indicateurs de focus.

Pourquoi utiliser ce vérificateur de contraste ?

Évaluer le contraste à l'œil nu est peu fiable. Des couleurs qui semblent bien distinctes sur votre écran calibré peuvent se fondre l'une dans l'autre sur un écran de piètre qualité, en plein soleil ou pour une personne atteinte de deutéranopie. Un ratio numérique supprime les approximations et vous donne un verdict réussi/échoué par rapport à la norme WCAG.

Calcul instantané du ratio
Choisissez ou saisissez deux couleurs et observez le ratio de contraste se mettre à jour en temps réel. Aucun formulaire à soumettre, aucun rechargement de page.
🔒
Traitement axé sur la confidentialité
Les calculs de luminance s'exécutent entièrement dans votre navigateur. Aucune valeur de couleur ne quitte votre machine, et aucun cookie ni outil d'analyse ne suit vos choix.
🎯
Verdicts AA et AAA
Les résultats affichent le statut réussi/échoué pour WCAG AA et AAA, pour les tailles de texte normal et grand, afin que vous sachiez exactement quels seuils vous atteignez.
📋
Aucun compte requis
Ouvrez la page et commencez les tests. Aucune inscription, aucune limite de requêtes. L'outil fonctionne hors ligne une fois la page chargée.

Cas d'usage du vérificateur de contraste

Développement frontend
Avant de livrer une modification d'interface, collez la couleur de texte et la couleur de fond de votre CSS dans le vérificateur pour confirmer que la paire respecte WCAG AA. Cela détecte les problèmes de contraste avant qu'ils n'atteignent la revue de code ou les audits automatisés.
Transfert de maquettes
Les designers peuvent vérifier que chaque paire de couleurs dans un fichier Figma respecte le niveau WCAG requis avant de transmettre les spécifications aux développeurs. Corriger le contraste à l'étape de conception coûte bien moins cher qu'après l'implémentation.
Audit d'accessibilité
Les ingénieurs QA effectuant un audit WCAG peuvent vérifier manuellement les combinaisons de couleurs signalées par des outils automatisés comme Lighthouse ou axe. Le vérificateur confirme le ratio exact et les niveaux qui passent ou échouent.
Tokens de système de design
Lors de la définition des tokens de couleur pour un système de design, testez chaque paire premier plan/fond pour vous assurer que la palette de tokens respecte au minimum AA. Documentez les ratios à côté des tokens afin que les équipes en aval fassent confiance aux choix.
Test de gabarits d'e-mail
Les clients e-mail suppriment les fonctionnalités CSS comme l'opacité et les modes de fusion, si bien que les couleurs rendues peuvent différer de votre source. Testez les valeurs finales de premier plan et de fond qui arrivent dans la boîte de réception pour vérifier la lisibilité.
Apprentissage des normes d'accessibilité
Les étudiants qui apprennent WCAG peuvent expérimenter différentes paires de couleurs et voir immédiatement comment le ratio évolue. Ajuster un canal à la fois construit une compréhension concrète de la relation entre luminance et contraste perçu.

Exigences de ratio de contraste WCAG

Le tableau ci-dessous résume les ratios de contraste minimaux requis par WCAG 2.1 pour différents types de contenu et niveaux de conformité. Le texte grand est défini comme 18px (24 pixels CSS) ou plus en graisse normale, ou 14px (18,66 pixels CSS) ou plus en gras.

NiveauRatio min.S'applique àNote
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminance, AA et AAA expliqués

Le calcul du ratio de contraste comporte trois étapes : calculer la luminance de chaque couleur, dériver le ratio, puis le comparer aux seuils WCAG.

Luminance relative
Un nombre unique de 0 (noir) à 1 (blanc) qui représente la brillance apparente d'une couleur. Il tient compte de la courbe gamma sRGB non linéaire et de la sensibilité inégale de l'œil humain au rouge, au vert et au bleu. Le vert pur (#00FF00) a une luminance de 0,7152, tandis que le bleu pur (#0000FF) n'a que 0,0722.
WCAG AA
Le niveau d'accessibilité de référence requis par la plupart des réglementations, notamment la Loi européenne sur l'accessibilité (EAA) et la Section 508 aux États-Unis. AA exige un ratio de 4,5:1 pour le texte normal et 3:1 pour le texte grand. La plupart des systèmes de design ciblent AA comme minimum pour tous les éléments textuels.
WCAG AAA
Le niveau renforcé destiné aux contenus qui doivent être lisibles par le public le plus large possible, y compris les utilisateurs ayant une déficience visuelle importante. AAA exige 7:1 pour le texte normal et 4,5:1 pour le texte grand. Peu de sites entiers atteignent AAA sur toutes leurs pages, mais les contenus critiques comme les mentions légales et les informations médicales le ciblent souvent.

Exemples de code

Calculez les ratios de contraste WCAG de façon programmatique. Chaque exemple implémente la formule de luminance relative issue de WCAG 2.x et le calcul du ratio de contraste. Les mêmes paires noir sur blanc et indigo sur blanc sont testées pour comparaison.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Questions fréquentes

Quel est un bon ratio de contraste pour le texte ?
Pour le corps de texte sur le web, visez au moins 4,5:1 (WCAG AA). Les ratios supérieurs à 7:1 respectent WCAG AAA et sont plus confortables pour la lecture prolongée. Du noir sur blanc donne le ratio maximum de 21:1, mais un gris très foncé (#1e293b) sur blanc offre encore environ 12,6:1, bien au-dessus d'AAA.
Qu'est-ce qui constitue du texte grand selon WCAG ?
WCAG définit le texte grand comme 18px (24 pixels CSS) en graisse normale, ou 14px (18,66 pixels CSS) en gras. Le texte grand bénéficie d'un seuil de contraste plus bas car les grandes formes de lettres sont plus faciles à percevoir. En CSS, 1px équivaut à 0,75pt, donc 18pt équivaut à 24px.
WCAG AA est-il légalement obligatoire ?
Dans de nombreuses juridictions, oui. La Loi européenne sur l'accessibilité (EAA), qui entre en vigueur en juin 2025, fait référence à WCAG 2.1 AA. La Section 508 de la Loi américaine sur la réhabilitation impose aux agences fédérales de respecter WCAG 2.0 AA. L'Americans with Disabilities Act (ADA) a été interprétée par les tribunaux américains comme exigeant des sites accessibles, avec WCAG AA comme référence. Le Canada, l'Australie et le Royaume-Uni ont des exigences similaires.
Comment la luminance relative est-elle calculée ?
Chaque valeur de canal sRGB (0-255) est divisée par 255, puis linéarisée : les valeurs inférieures ou égales à 0,04045 sont divisées par 12,92, et les valeurs supérieures sont transformées par ((c + 0,055) / 1,055) ^ 2.4. Les trois canaux linéarisés sont pondérés par les coefficients ITU-R BT.709 (0,2126 R, 0,7152 G, 0,0722 B) et additionnés. Le résultat est un nombre compris entre 0 et 1.
Pourquoi WCAG utilise-t-il un décalage de 0,05 dans la formule de contraste ?
Le décalage de 0,05 évite la division par zéro lorsque l'une des couleurs est du noir pur (luminance = 0). Il tient également compte de la lumière ambiante et des reflets d'écran qui élèvent légèrement la luminance perçue même des pixels les plus sombres. Sans ce décalage, le noir sur n'importe quelle couleur sombre produirait un ratio infini ou trompeusement élevé.
Deux couleurs peuvent-elles passer AA tout en étant difficiles à lire ?
Oui. Les ratios de contraste WCAG mesurent la différence de luminance, pas la différence de teinte. Un rouge saturé sur vert saturé peut techniquement dépasser le seuil de ratio tout en étant inconfortable à lire pour certains utilisateurs, notamment ceux présentant une déficience de vision rouge-vert. Associer des couleurs qui diffèrent à la fois en luminance et en teinte tend à produire des résultats plus confortables.
Quelle est la différence entre le contraste WCAG 2.x et APCA ?
WCAG 2.x utilise un simple ratio de luminance qui traite le premier plan et le fond de façon symétrique. APCA (Advanced Perceptual Contrast Algorithm), proposé pour WCAG 3.0, utilise un modèle de clarté perceptuelle qui tient compte de la polarité : du texte sombre sur fond clair a un contraste perçu différent du texte clair sur fond sombre à la même différence de luminance. APCA est encore un brouillon de travail et n'a remplacé la méthode WCAG 2.x dans aucune réglementation.