Contraste WCAG
Vérifiez le ratio de contraste entre deux couleurs selon les normes WCAG 2.1. Recommandations AA et AAA pour le texte normal et large.
Ratio de contraste
13.98:1
Texte large (24px gras)
Texte large (18.66px gras)
Texte normal (16px) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Texte petit (14px) — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Résultats WCAG 2.1
| Niveau | Type | Ratio minimum | Résultat |
|---|---|---|---|
| AA | Texte normal | 4.5:1 | Réussi |
| AA | Texte large | 3:1 | Réussi |
| AAA | Texte normal | 7:1 | Réussi |
| AAA | Texte large | 4.5:1 | Réussi |
Comment fonctionne le calcul ?
Le ratio de contraste est calculé selon la formule WCAG 2.1 : (L1 + 0.05) / (L2 + 0.05), où L1 et L2 sont les luminances relatives des deux couleurs. La luminance relative utilise les composantes sRGB linéarisées avec les coefficients 0.2126 (rouge), 0.7152 (vert) et 0.0722 (bleu). Le texte « large » correspond à 18pt normal ou 14pt gras.
Tout savoir sur le contraste WCAG et l'accessibilité des couleurs
Pourquoi vérifier le contraste des couleurs ?
Un contraste insuffisant rend le texte illisible pour les personnes malvoyantes, daltoniennes ou naviguant sur un écran en plein soleil. Vérifier le ratio de contraste garantit que votre contenu est accessible à tous.
Les normes WCAG 2.1 définissent des seuils précis (AA et AAA) que les sites web publics et les applications doivent respecter pour être conformes aux réglementations d'accessibilité en vigueur dans de nombreux pays.
Un bon contraste améliore aussi l'expérience utilisateur globale : la lisibilité réduit la fatigue visuelle et augmente le temps passé sur votre site, ce qui a un impact positif sur le référencement.
Cas d'utilisation courants
- Design de sites web
- Testez vos combinaisons de couleurs texte/fond lors de la création de maquettes ou de thèmes CSS pour vous assurer que chaque élément textuel respecte les critères WCAG AA ou AAA.
- Applications mobiles
- Validez les contrastes de vos interfaces iOS et Android, notamment pour les boutons, les labels et les messages d'erreur, qui doivent rester lisibles sur tous les appareils.
- Documents et présentations
- Assurez-vous que vos rapports PDF, diaporamas PowerPoint et documents imprimés utilisent des combinaisons de couleurs suffisamment contrastées pour être lisibles par tous.
- Audit d'accessibilité
- Lors d'un audit RGAA, WCAG ou Section 508, utilisez cet outil pour vérifier rapidement chaque paire de couleurs signalée et documenter les ratios obtenus.
Comment utiliser le vérificateur de contraste ?
Saisissez ou sélectionnez la couleur du texte et la couleur de fond à l'aide des champs hexadécimaux ou du sélecteur de couleur intégré.
Le ratio de contraste s'affiche instantanément avec un code couleur : vert pour un excellent contraste (≥ 7:1), jaune pour un contraste acceptable (≥ 4.5:1), orange pour un contraste limite (≥ 3:1), rouge pour un contraste insuffisant.
Consultez le tableau des résultats WCAG 2.1 pour savoir si votre combinaison passe les niveaux AA et AAA pour le texte normal et le texte large. Ajustez vos couleurs jusqu'à obtenir le niveau souhaité.
Questions fréquentes
- Quelle est la différence entre les niveaux WCAG AA et AAA ?
- Le niveau AA exige un ratio de contraste minimum de 4.5:1 pour le texte normal et 3:1 pour le texte large. Le niveau AAA est plus strict avec 7:1 pour le texte normal et 4.5:1 pour le texte large. Le niveau AA est le minimum recommandé pour la plupart des sites web.
- Mon site doit-il obligatoirement respecter les normes WCAG ?
- Dans de nombreux pays, les sites web publics et les services en ligne doivent respecter un certain niveau d'accessibilité. En France, le RGAA s'appuie sur les WCAG. Aux États-Unis, la Section 508 et l'ADA imposent des exigences similaires. Ne pas s'y conformer peut entraîner des sanctions légales.
- Le contraste s'applique-t-il aussi aux icônes et aux éléments graphiques ?
- Oui. Les WCAG 2.1 (critère 1.4.11) exigent un ratio de contraste minimum de 3:1 pour les composants d'interface utilisateur et les éléments graphiques porteurs d'information, comme les icônes, les bordures de champs de formulaire et les indicateurs de focus.
- Comment le ratio de contraste est-il calculé exactement ?
- Le ratio utilise la formule (L1 + 0.05) / (L2 + 0.05) où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre. La luminance relative est obtenue en linéarisant les composantes sRGB puis en appliquant les coefficients de pondération ITU-R BT.709.
- Mes données personnelles sont-elles protégées ?
- Entièrement. Le calcul est réalisé à 100 % côté client, directement dans votre navigateur web. Aucune donnée personnelle n'est envoyée vers un serveur distant ni stockée. Toutes les informations restent sur votre appareil.