Outil

Contraste WCAG

Vérifiez le ratio de contraste WCAG AA/AAA entre deux couleurs. Visualisez le rendu en temps réel et trouvez des alternatives accessibles.

Couleur 1 (Texte / Élément)
#3B82F6
#
Couleur 2 (Fond)
#FFFFFF
#
3.68:1
Ratio de contraste
Titre principal
Voici un exemple de texte courant pour visualiser le rendu de cette combinaison de couleurs en conditions réelles. La lisibilité dépend du ratio de contraste entre le texte et le fond.
Texte secondaire plus petit (12px) — souvent utilisé pour les légendes et métadonnées.
Alternatives accessibles (AA ≥ 4.5)
Combinaisons courantes
Noir / Blanc
#000000 / #FFFFFF
21:1 AA ✓
Marine / Blanc
#1E3A8A / #FFFFFF
10.36:1 AA ✓
Vert / Blanc
#15803D / #FFFFFF
5.02:1 AA ✓
Rouge / Blanc
#DC2626 / #FFFFFF
4.83:1 AA ✓
Texte sombre / Crème
#1C1B18 / #F7F5F0
15.81:1 AA ✓
Violet / Blanc
#7C3AED / #FFFFFF
5.7:1 AA ✓
Orange / Noir
#F97316 / #1C1B18
6.14:1 AA ✓
Cyan / Noir
#06B6D4 / #1C1B18
7.09:1 AA ✓

Le contraste WCAG, pourquoi c'est crucial

Les WCAG (Web Content Accessibility Guidelines) définissent des ratios minimaux de contraste entre texte et fond. Le niveau AA exige un ratio ≥ 4.5:1 pour le texte courant (≥ 3:1 pour les grands titres ≥ 18px ou 14px gras). Le niveau AAA, plus strict, demande ≥ 7:1. Un contraste insuffisant pénalise les utilisateurs malvoyants, nuit au SEO et peut enfreindre des obligations légales d'accessibilité (RGAA en France, ADA aux États-Unis). Testez toujours vos paires texte/fond avant publication.

Interpréter le ratio de contraste

Un ratio de 21:1 est le maximum (noir sur blanc). Un ratio de 1:1 signifie aucun contraste (couleurs identiques). Pour le texte courant, visez minimum 4.5:1. Pour les interfaces, les couleurs d'interface non-textuelles (icônes, bordures, composants) doivent atteindre 3:1 (critère WCAG 1.4.11). Notre outil calcule le ratio selon la formule WCAG officielle basée sur la luminance relative, propose des alternatives accessibles et visualise le rendu réel de la combinaison.

Comment vérifier le contraste

1
Choisir deux couleurs
Saisissez un code HEX ou cliquez la case colorée pour ouvrir le sélecteur natif.
2
Lire le ratio
Le ratio WCAG est calculé instantanément. Un score ≥ 4.5:1 valide le niveau AA pour le texte courant.
3
Interpréter les niveaux
AA (4.5:1) = standard recommandé. AAA (7:1) = niveau optimal. AA Large (3:1) = texte ≥18px gras.
4
Trouver des alternatives
Les suggestions ci-dessous proposent des variantes qui passent le seuil AA avec votre fond actuel.