Contraste de couleur WCAG pour les designers
La règle 4.5:1, le calcul du rapport de contraste et des outils gratuits pour vérifier n'importe quelle paire de couleurs.
Si votre texte ne respecte pas le contraste WCAG AA, environ 285 millions de personnes malvoyantes ne peuvent pas le lire. De plus, vous êtes sur un terrain juridique de plus en plus instable dans l'UE et aux États-Unis. La bonne nouvelle : la règle est simple.
La règle 4.5:1
Le texte du corps doit avoir un rapport de contraste d'au moins 4.5:1 par rapport à son arrière-plan pour passer le WCAG AA. Les grands textes (24 px+ normal ou 18 px+ gras) ont un seuil inférieur de 3:1.
Pour la conformité AAA : 7:1 pour le corps, 4.5:1 pour les grands textes.
Comment le rapport de contraste est calculé
WCAG utilise la luminance relative — convertissez chaque couleur en une valeur de luminance (0 = noir, 1 = blanc) à l'aide d'une formule spécifique, puis calculez (L1 + 0.05) / (L2 + 0.05), où L1 est la couleur la plus claire.
Vous n'avez pas besoin de faire le calcul — utilisez notre vérificateur de contraste gratuit pour insérer deux couleurs et voir le rapport.
Cas d'échec courants
- Gris clair sur blanc — #999 sur #fff = 2.85 (échec). #767676 sur #fff = 4.54 (réussite).
- Blanc sur jaune — échoue presque toujours. Utilisez du texte foncé sur jaune.
- Liens colorés dans le texte du corps — la plupart des liens bleus réussissent sur blanc mais échouent sur gris clair. Testez l'arrière-plan réel environnant.
- Couleurs de marque qui ont l'air super — elles échouent souvent. Ajoutez un fond blanc cassé ou assombrissez le texte.
Choisir des paires de couleurs accessibles
Trois modèles fiables :
- Foncé sur clair — #1f2937 sur #fff = 14:1 (parfait).
- Blanc sur foncé — #fff sur #1f2937 = 14:1 (parfait).
- Foncé sur accent — #1f2937 sur #fbbf24 = 9:1 (parfait pour les boutons).
Au-delà du texte
WCAG 2.1 exige également 3:1 pour les éléments non textuels (boutons, anneaux de focus, bordures de formulaires). Le vérificateur gère les deux.
Wallpapers qui ne se battront pas avec vos widgets
Si vous êtes un designer qui définit des fonds d'écran derrière des widgets d'horloge et des notifications, choisissez des fonds d'écran avec un contraste inférieur à 5:1 dans les zones de widgets. Notre outil Gaussian blur peut adoucir les zones chargées de tout fond d'écran pour une meilleure lisibilité des widgets.
Essayez nos outils gratuits
La plupart de ces guides sont associés à un outil pratique que vous pouvez utiliser tout de suite — aucune inscription requise pour la première utilisation :
- Redimensionneur d'image — réduction et agrandissement pixel parfait.
- Convertir en WebP — fichiers 30 à 50 % plus petits que JPG.
- Suppresseur d'arrière-plan — découpage en un clic, PNG transparent.
- Générateur de favicon — toutes les tailles de navigateur à partir d'une seule source.
- Redimensionneur pour réseaux sociaux — dimensions exactes de chaque plateforme.
- Traitement par lots — appliquez n'importe quel outil à jusqu'à 200 images à la fois.
Parcourez le catalogue complet d'outils.
