Vérificateur de contraste des couleurs
Entrez les couleurs de premier plan et d’arrière-plan et le vérificateur renvoie le rapport de contraste WCAG (1:1 à 21:1) ainsi que les verdicts de réussite/échec par rapport aux seuils WCAG 2.1 AA et AAA pour le texte normal, le texte de grande taille et les éléments non textuels. En coulisses, il utilise la formule de luminance WCAG, des mathématiques simples, mais critiques pour l’accessibilité. Corrigez les échecs en ajustant la luminosité jusqu’à ce que le rapport dépasse le seuil dont vous avez besoin.
Comment le rapport de contraste est calculé
-
1
Entrez deux couleurs
Hex, à 3 ou 6 chiffres, pour les deux couleurs. Des sélecteurs de couleurs sont disponibles pour chacune.
-
2
Luminance relative calculée pour chaque
L = 0.2126·R + 0.7152·G + 0.0722·B où chaque canal est linéarisé à partir de sRGB.
-
3
Rapport de contraste
(L_plus_clair + 0.05) / (L_plus_sombre + 0.05). Rapports entre 1:1 et 21:1.
-
4
Badges de réussite / échec
AA (4.5:1 pour normal, 3:1 pour large/UI), AAA (7:1 pour normal, 4.5:1 pour large). Texte de grande taille = ≥18pt régulier ou ≥14pt gras.
Seuils de contraste WCAG
| Type de contenu | Seuil AA | Seuil AAA |
|---|---|---|
| Texte normal | 4.5:1 | 7:1 |
| Texte de grande taille (≥18pt régulier ou ≥14pt gras) | 3:1 | 4.5:1 |
| Non-texte (composants UI, anneaux de focus) | 3:1 | - |
| Texte accessoire (décoratif, désactivé, logos) | exempt | exempt |
“Texte de grande taille” signifie 18pt+ poids régulier (~24px en CSS) ou 14pt+ gras (~19px gras).
Contrastes d’exemple
| Paire | Rapport | AA normal | AA grand | AAA normal |
|---|---|---|---|---|
| Noir sur blanc | 21:1 | Réussite | Réussite | Réussite |
| #333 sur blanc | 12.6:1 | Réussite | Réussite | Réussite |
| #666 sur blanc | 5.7:1 | Réussite | Réussite | Échec |
| #888 sur blanc | 3.5:1 | Échec | Réussite | Échec |
| #AAA sur blanc | 2.3:1 | Échec | Échec | Échec |
| Blanc sur #1976D2 (bleu Material 700) | 4.6:1 | Échec | Réussite | Échec |
| Blanc sur #2196F3 (bleu Material 500) | 3.1:1 | Échec (normal) | Réussite | Échec |
Pièges courants en matière d’accessibilité
- Texte courant gris sur blanc à #999 ou plus clair, échoue AA. Utilisez #767676 ou plus foncé pour le texte courant sur blanc.
- Lien bleu sur gris : échoue souvent car les deux couleurs sont de luminance moyenne.
- Texte blanc sur couleur de marque : réussite sur les teintes plus foncées (≥ 4.5:1), échec sur les couleurs de marque de ton moyen. Utilisez un texte plus grand ou une marque plus foncée.
- Texte indicatif (placeholder) : souvent à faible contraste pour rester discret, la WCAG s’applique tout de même si les utilisateurs doivent lire ce texte indicatif.
- État désactivé : la WCAG 2.2 exige 3:1 pour le texte désactivé par rapport à l’arrière-plan du contrôle à moins que l’état lui-même ne soit communiqué par un autre moyen.
Ce que la WCAG ne vous dit pas
- La WCAG 2.x utilise une formule de 1988. L’APCA moderne (algorithme de contraste perceptuel avancé) reflète mieux la lisibilité perçue, mais n’est pas encore la référence légale. Augmentez légèrement les chiffres au-delà des minima WCAG pour gérer l’APCA et les cas limites.
- Le contraste n’est pas la seule dimension d’accessibilité. Un rapport de 21:1 ne signifie rien si la police fait 9px, si l’interligne est trop serré, ou si l’information repose sur un contraste rouge-vert.
Améliorer une paire échouée
- Premier plan plus clair sur un arrière-plan sombre, ou premier plan plus sombre sur clair.
- Augmenter la taille ou le poids de la police, le seuil de texte de grande taille est plus bas.
- Ajouter un arrière-plan derrière le texte sur des images (superposition, dégradé).
- Ne jamais corriger le contraste en s’estompant vers un gris qui échoue toujours, poussez jusqu’à atteindre AA.
Re-vérifiez après chaque ajustement, l’outil recalcule le rapport en direct et un petit changement de luminosité peut vite faire basculer le verdict.
Questions fréquentes
AA est la référence légale dans la plupart des juridictions (Section 508 US, EN 301 549 EU) et ce que la plupart des outils d’audit signalent. AAA est un idéal à viser, requis uniquement pour des contextes d’accessibilité spécifiques (contenu éducatif pour les utilisateurs malvoyants). Visez AA et considérez AAA comme un bonus.
Non, il n’accepte que des couleurs hex opaques, à 3 ou 6 chiffres. Convertissez d’abord le RGB ou le HSL en hex, ou utilisez le sélecteur de couleurs, qui sort toujours du hex.
La WCAG 2.1 SC 1.4.11 exige un contraste de 3:1 pour les composants UI non textuels et les objets graphiques. Cela s’applique aux indicateurs de focus, aux bordures d’entrée, aux boutons uniquement icône, et aux états (survol, actif). Vérifiez les états par défaut et de focus.
Testez chaque mode séparément, les rapports de contraste dans les thèmes clairs et sombres sont indépendants. De nombreuses palettes passantes en mode clair échouent en mode sombre à la même luminosité relative.
Outils similaires
Référence de la table ASCII
Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.
Référence des caractères HTML
Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.
Référence des raccourcis clavier
Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.
Générateur de lettres aléatoires
Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.
Générateur d’accordéon CSS
Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.
Générateur de palettes de couleurs aléatoires
Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.