Verificateur de Contraste
Verifiez si vos couleurs de texte et d'arriere-plan respectent les normes d'accessibilite WCAG. Calcule le ratio de contraste pour les niveaux AA et AAA.
Fonctionnalites principales
- Calcul du ratio de contraste en temps réel
- Vérification de conformité WCAG 2.1 AA et AAA
- Prise en charge des standards texte normal et grand
- Échange de couleurs et aperçu en direct
Guide
L'accessibilité du contraste de couleur détermine si le texte sur votre site est lisible par tout le monde, y compris les personnes ayant des déficiences visuelles. Les Web Content Accessibility Guidelines (WCAG) définissent des ratios de contraste spécifiques que le texte doit respecter pour être considéré comme accessible. Ne pas respecter ces standards signifie que certains visiteurs ne peuvent pas lire votre contenu, et dans de nombreuses juridictions, cela signifie que votre site n'est pas conforme aux exigences légales d'accessibilité. Ce guide explique comment fonctionnent les ratios de contraste, ce que WCAG exige et comment corriger les problèmes de contraste sans compromettre votre design. Un ratio de contraste compare la luminance relative de deux couleurs sur une échelle de 1:1 (aucun contraste, les deux couleurs identiques) à 21:1 (contraste maximal, noir pur sur blanc pur). La luminance relative est une mesure de la luminosité perçue d'une couleur par l'œil humain, calculée à partir des valeurs RGB de la couleur avec une formule qui tient compte de la façon dont la vision humaine perçoit différentes longueurs d'onde. Le rouge, le vert et le bleu contribuent différemment à la luminosité perçue, le vert contribuant le plus et le bleu le moins. La formule est : L = 0,2126 * R + 0,7152 * G + 0,0722 * B, où R, G et B sont linéarisés depuis leurs valeurs sRGB. L'étape de linéarisation convertit les valeurs sRGB codées en gamma en valeurs de lumière linéaire en appliquant une fonction de transfert. Le ratio de contraste lui-même est calculé comme (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 la luminance relative de la couleur la plus foncée. La valeur 0,05 tient compte de la lumière ambiante. Cette formule produit le format de ratio familier. Par exemple, le blanc pur a une luminance de 1,0 et le noir pur a une luminance de 0,0, donnant un ratio de contraste de (1,0 + 0,05) / (0,0 + 0,05) = 21:1. WCAG définit deux niveaux de conformité pour le contraste. Le niveau AA est l'exigence de base pour la plupart des sites. Le niveau AAA est un standard plus strict qui offre une meilleure lisibilité. Pour le texte de taille normale (moins de 18pt ou moins de 14pt gras), le niveau AA exige un ratio de contraste d'au moins 4,5:1 et le niveau AAA exige 7:1. Pour le grand texte (18pt et plus, ou 14pt gras et plus), le niveau AA exige 3:1 et le niveau AAA exige 4,5:1. Ces seuils sont basés sur la recherche sur la lisibilité pour les personnes ayant une vision modérément basse, environ 20/40 d'acuité, qui est le seuil typique de perte de vision pour les adultes plus âgés. L'exception pour le grand texte existe parce que les lettres plus grandes sont intrinsèquement plus faciles à lire. À plus grande taille, les traits plus épais et les contreformes plus larges rendent les caractères plus distinguishables même à plus faible contraste. C'est pourquoi les titres, le texte hero et autre grand texte display peuvent utiliser un ratio 3:1 sous conformité AA tandis que le texte de corps exige 4,5:1. En termes CSS, 18pt équivaut à 24px aux réglages par défaut du navigateur, et 14pt gras équivaut à environ 18,66px gras. Si vous n'êtes pas sûr que votre texte se qualifie de grand, appliquez le ratio plus strict de 4,5:1 pour être en sécurité. Les éléments non textuels ont aussi des exigences de contraste sous WCAG 2.1 Critère de succès 1.4.11 (Contraste non textuel). Les composants d'interface utilisateur (boutons, entrées de formulaire, indicateurs de focus) et les objets graphiques (icônes, éléments de graphique) nécessaires à la compréhension du contenu doivent avoir un ratio de contraste d'au moins 3:1 par rapport aux couleurs adjacentes. Une bordure de bouton gris clair sur fond blanc qui tombe sous 3:1 rend le bouton difficile à identifier comme élément cliquable, en particulier pour les utilisateurs malvoyants. Les indicateurs de focus sont particulièrement importants : les utilisateurs au clavier dépendent des styles de focus visibles pour naviguer, et ces styles de focus doivent respecter le ratio 3:1 par rapport au contenu environnant. Le daltonisme affecte environ 8 % des hommes et 0,5 % des femmes d'ascendance nord-européenne, avec une prévalence variable selon les populations. La forme la plus courante est le daltonisme rouge-vert (deutéranopie et protanopie), où les rouges et les verts paraissent similaires. Le daltonisme bleu-jaune (tritanopie) est moins courant. Le daltonisme complet (achromatopsie) est rare. Les calculs de ratio de contraste basés sur la luminance fonctionnent indépendamment de la perception des couleurs parce qu'ils mesurent la différence de luminosité, pas la différence de teinte. Cependant, se fier uniquement à la couleur pour transmettre de l'information (rouge pour erreur, vert pour succès) crée des problèmes pour les utilisateurs daltoniens quel que soit le ratio de contraste. Fournissez toujours des repères visuels supplémentaires comme des icônes, des étiquettes textuelles ou des motifs à côté du codage couleur. Le mode sombre introduit des considérations de contraste supplémentaires. Beaucoup de designers créent des thèmes sombres en inversant simplement les couleurs, mais cela produit souvent de mauvais résultats. Le texte blanc pur (#FFFFFF) sur des arrière-plans noir pur (#000000) crée un contraste maximal (21:1), mais ce niveau de contraste peut causer de la fatigue visuelle et de la halation (un effet lumineux autour du texte clair sur fond sombre) pour certains utilisateurs. Un contraste légèrement réduit, comme #E0E0E0 sur #121212, est plus confortable tout en dépassant les exigences WCAG AAA. Les directives du thème sombre Material Design de Google recommandent d'utiliser #121212 comme couleur de surface et de réduire l'opacité du texte plutôt que d'utiliser du blanc pur. Le texte principal utilise 87 % d'opacité, le texte secondaire 60 % et le texte désactivé 38 %. Les couleurs semi-transparentes compliquent la vérification du contraste. Quand vous utilisez des couleurs rgba() ou hsla() avec des valeurs alpha inférieures à 1, la couleur réellement rendue dépend de ce qui se trouve derrière. Du texte blanc à 70 % d'opacité sur fond sombre a un contraste effectif différent du même texte sur fond clair. Lors de la vérification du contraste pour du texte semi-transparent, vous devez calculer la couleur composée (la couleur réelle que l'utilisateur voit après application de la transparence sur l'arrière-plan). La formule mélange le premier plan et l'arrière-plan selon la valeur alpha : composé = premier plan * alpha + arrière-plan * (1 - alpha), appliqué à chaque canal. Vérifiez toujours le résultat composé, pas la couleur transparente isolée. Les arrière-plans en dégradé créent un contraste variable à travers la zone de texte. Si le texte se trouve sur un dégradé qui passe du bleu foncé au bleu clair, le ratio de contraste diffère aux bords gauche et droit du texte. WCAG exige que le ratio de contraste soit respecté à chaque point où le texte apparaît. Vérifiez le contraste au point le plus faible, qui est l'endroit où l'arrière-plan est le plus proche en luminance de la couleur du texte. Si le dégradé va de #003366 à #6699CC et que votre texte est blanc, vérifiez le contraste contre #6699CC parce que c'est là qu'il sera le plus bas. Pour les dégradés radiaux, vérifiez plusieurs points à travers la zone de texte. Les arrière-plans d'image présentent le plus grand défi de contraste. Le texte sur des photographies ou des arrière-plans à motifs aura un contraste différent à chaque pixel. Les solutions sont : placer un overlay solide ou semi-transparent entre l'image et le texte, utiliser une ombre de texte ou un contour pour garantir la lisibilité, ou restreindre le texte aux zones de l'image à couleur uniforme. Un motif courant est un overlay en dégradé sombre en bas d'une image hero où le texte apparaît. Le dégradé assombrit l'image suffisamment pour créer un contraste suffisant avec le texte blanc. Pour les overlays, rgba(0, 0, 0, 0,5) amène généralement la plupart des images en conformité WCAG AA avec du texte blanc, mais vérifiez avec vos images spécifiques. Les espaces colorimétriques et les calculs de contraste sont plus complexes que la plupart des outils ne le reconnaissent. La formule de contraste WCAG standard utilise la luminance relative dans l'espace colorimétrique sRGB. Cette formule a des limitations connues. Elle peut surestimer le contraste des paires de couleurs très foncées et sous-estimer le contraste des paires claires. La recherche a montré qu'un texte bleu foncé (#00007E) sur fond noir passe techniquement WCAG AA mais est extrêmement difficile à lire en pratique. L'APCA (Advanced Perceptual Contrast Algorithm) est une approche plus récente développée pour WCAG 3.0 qui tient compte de la perception visuelle humaine plus précisément, incluant l'effet de polarité (le texte sombre sur fond clair est perçu différemment du texte clair sur fond sombre). Bien que WCAG 2.x et sa formule basée sur sRGB restent le standard légal actuel, APCA fournit une évaluation plus précise perceptuellement. Le modèle APCA assigne différentes exigences de contraste selon la taille et la graisse de police, créant une matrice de valeurs de contraste minimales plutôt que l'approche de seuil binaire de WCAG 2.x. Par exemple, un texte de 14px en graisse normale a besoin d'une valeur de contraste APCA plus élevée qu'un texte de 24px gras. APCA gère aussi le problème de polarité : le texte clair sur fond sombre exige des valeurs de contraste différentes du texte sombre sur fond clair. Bien qu'APCA ne soit pas encore le standard officiel, le comprendre vous aide à prendre de meilleures décisions de contraste, en particulier dans les cas limites où WCAG 2.x produit des résultats discutables. Corriger les échecs de contraste implique généralement l'une de trois approches : assombrir le texte, éclaircir l'arrière-plan, ou les deux. En ajustant les couleurs, restez dans votre palette de marque en modifiant la valeur de luminosité dans l'espace colorimétrique HSL plutôt qu'en changeant la teinte ou la saturation. Si le bleu de votre marque est hsl(210, 80 %, 55 %) et qu'il échoue au contraste contre le blanc, réduire la luminosité à hsl(210, 80 %, 40 %) peut passer tout en restant reconnaissablement votre bleu de marque. De petits ajustements de luminosité résolvent souvent les problèmes de contraste sans nécessiter un redesign complet. Dans l'espace colorimétrique OKLCH, ces ajustements produisent des résultats encore plus uniformes perceptuellement. Les propriétés personnalisées CSS rendent le thème sensible au contraste pratique. Définissez vos couleurs comme des valeurs HSL dans des propriétés personnalisées, puis créez des variantes de thème clair et sombre qui respectent les exigences de contraste. Par exemple : --brand-primary: hsl(210, 80 %, 40 %) pour le thème clair et --brand-primary: hsl(210, 80 %, 70 %) pour le thème sombre. Les deux utilisent la même teinte et saturation mais des valeurs de luminosité différentes optimisées pour leurs arrière-plans respectifs. Cette approche s'étend à des systèmes de design entiers avec des dizaines de jetons de couleur. Vous maintenez la cohérence de la marque tout en respectant les exigences d'accessibilité dans chaque thème. L'intégration au système de design est l'endroit où la vérification du contraste devient la plus précieuse. Plutôt que de vérifier des éléments individuels de page, définissez vos jetons de couleur et vérifiez que chaque combinaison texte sur arrière-plan dans votre système de jetons respecte les exigences WCAG. Documentez les combinaisons approuvées dans une matrice de contraste qui montre quelles couleurs de texte sont sûres sur quelles couleurs d'arrière-plan. Puis quand les développeurs construisent des composants, ils sélectionnent parmi des paires de couleurs pré-approuvées et la conformité au contraste est garantie par le système plutôt que vérifiée par instance. C'est ainsi que de grandes organisations comme Google, Microsoft et Adobe gèrent le contraste à grande échelle. Construire une matrice de contraste implique de lister toutes vos couleurs d'arrière-plan en haut et toutes vos couleurs de texte sur le côté, puis de calculer le ratio de contraste pour chaque intersection. Marquez chaque cellule comme AA réussite, AAA réussite ou échec. Cette matrice devient un document de référence pour toute votre équipe. Quand un designer spécifie une combinaison de couleurs, il peut vérifier la matrice instantanément. Quand un développeur implémente un composant, la matrice lui indique quels jetons de couleur vont ensemble en sécurité. Les tests automatisés détectent les problèmes de contraste tôt. Des outils comme axe-core, Lighthouse et Pa11y scannent les pages rendues et signalent les éléments qui échouent aux exigences de contraste WCAG. Intégrez-les à votre pipeline CI/CD pour que les régressions de contraste soient détectées avant le déploiement. La limitation des outils automatisés est qu'ils ne peuvent pas évaluer le texte sur des images, des dégradés ou des arrière-plans changeant dynamiquement. La vérification manuelle avec un outil de vérification de contraste reste nécessaire pour ces cas. Une approche complète utilise les tests automatisés pour la majorité des cas et la vérification manuelle pour les cas limites que l'automatisation ne peut pas gérer. La conformité légale motive une grande partie de l'urgence autour de l'accessibilité du contraste. L'Americans with Disabilities Act (ADA) aux États-Unis, l'European Accessibility Act dans l'UE, l'Accessibility for Ontarians with Disabilities Act au Canada et des lois similaires dans d'autres juridictions exigent soit directement la conformité WCAG soit ont été interprétées par les tribunaux comme l'exigeant. Les poursuites sur l'accessibilité web ont augmenté significativement d'année en année, les échecs de contraste étant l'un des problèmes les plus couramment cités. Respecter WCAG AA est le standard légal largement accepté. Les organisations dans les industries réglementées (gouvernement, santé, éducation, finance) font face à des exigences plus strictes et à une application plus active. Au-delà de la conformité légale, un bon contraste est un bon design. Le texte facile à lire convertit mieux, retient les visiteurs plus longtemps et réduit les taux de rebond. Les utilisateurs qui lisent sur téléphone en plein soleil, les utilisateurs plus âgés à la vision naturellement déclinante, les utilisateurs sur moniteurs de faible qualité à mauvaise reproduction des couleurs et les utilisateurs simplement fatigués bénéficient tous d'un contraste fort. Concevoir pour les extrêmes de la capacité humaine (basse vision, environnements difficiles) produit des designs qui fonctionnent mieux pour tout le monde au centre aussi. Des études ont montré qu'un texte à contraste plus élevé réduit le temps de lecture et améliore la compréhension chez tous les utilisateurs, pas seulement ceux ayant des déficiences visuelles. Tester vos choix de contraste dans des conditions réelles signifie vérifier sur plusieurs appareils, dans diverses conditions d'éclairage et avec du contenu réel plutôt que du texte de substitution. Une paire de couleurs qui passe le contrôle mathématique de contraste peut encore être difficile à lire si la police est fine, le texte petit ou l'interlettrage serré. Le ratio de contraste est un minimum nécessaire, pas une garantie de lisibilité. Associez un contraste adéquat à une taille de police appropriée (minimum 16px pour le texte de corps), une graisse (regular ou medium, pas light ou thin) et un espacement (interligne de 1,5 ou plus) pour les meilleurs résultats. Les pièges courants de contraste incluent le texte de substitution dans les entrées de formulaire (souvent gris clair sur blanc, échouant aux exigences de contraste), le texte de bouton désactivé (doit encore être distinguable, même s'il ne respecte pas les pleines exigences de contraste), le texte de lien qui ne s'appuie que sur la couleur pour se distinguer du texte environnant (WCAG exige un indicateur visuel supplémentaire comme le soulignement sauf si le contraste du lien par rapport au texte environnant est d'au moins 3:1), et le texte sur des arrière-plans décoratifs où le contraste varie selon la position. L'accessibilité des couleurs de marque est un défi fréquent. Les équipes marketing choisissent les couleurs de marque pour leur impact émotionnel et leur attrait visuel, pas pour la conformité WCAG. Une couleur de marque orange vif (hsl(30, 100 %, 50 %)) a un ratio de contraste de seulement 2,14:1 contre le blanc, loin sous l'exigence AA de 4,5:1 pour le texte normal. La solution est de créer des variantes accessibles des couleurs de marque. Gardez la teinte, ajustez la luminosité. hsl(30, 100 %, 35 %) est encore reconnaissablemenent orange mais passe AA contre blanc à 4,6:1. Créez une palette de couleurs de marque avec des couleurs primaires pour le grand texte et les éléments décoratifs (contraste plus faible acceptable) et des variantes ajustées pour le texte de corps, les liens et les composants d'interface (doivent passer AA). La visualisation de données et les graphiques présentent des défis de contraste uniques. Chaque série de données dans un graphique doit être distinguable des séries adjacentes et de l'arrière-plan. Avec cinq séries de données ou plus, trouver des couleurs qui contrastent toutes suffisamment entre elles et avec l'arrière-plan est difficile. Les palettes sûres pour le daltonisme (comme celles de ColorBrewer ou la palette Okabe-Ito) sont conçues spécifiquement pour cela. Au-delà de la couleur, utilisez des motifs, des textures ou des étiquettes directes pour distinguer les séries de données. Les graphiques linéaires peuvent utiliser différents motifs de tirets. Les graphiques à barres peuvent utiliser des hachures diagonales. Les nuages de points peuvent utiliser différentes formes. Le contraste dans différents environnements d'éclairage varie dramatiquement. Une paire de couleurs confortablement lisible dans un bureau tamisé devient à peine visible en plein soleil. Les utilisateurs mobiles rencontrent fréquemment des conditions extérieures lumineuses. Des ratios de contraste élevés fournissent une marge contre les facteurs environnementaux. Une paire à exactement 4,5:1 (le minimum AA) est lisible en conditions contrôlées mais peut échouer en plein soleil. Viser 5:1 ou 6:1 fournit une marge qui tient compte des conditions de visualisation réelles. Pour les éléments d'interface critiques (navigation, appels à l'action, messages d'erreur), penchez vers un contraste plus élevé. La gestion des couleurs et les différences d'appareil affectent la façon dont les utilisateurs perçoivent le contraste. Une couleur sRGB sur un écran à large gamut (P3 ou Adobe RGB) peut paraître légèrement différente de l'intention. Les moniteurs TN bon marché affichent les couleurs différemment des écrans IPS ou OLED. Les réglages de luminosité de l'écran changent le contraste perçu. Les filtres de lumière bleue et le mode nuit teintent l'écran en chaud, réduisant le contraste perçu des couleurs froides. Aucun de ces facteurs ne change le ratio WCAG calculé, mais ils affectent l'expérience visuelle réelle. Tester sur plusieurs appareils et dans plusieurs conditions détecte des problèmes que les calculs mathématiques manquent. Les exigences de contraste pour le texte intégré dans les images sont les mêmes que pour le texte en direct. Si votre image hero contient du texte cuit dans le fichier image (pas du texte HTML), ce texte doit encore respecter les exigences de contraste WCAG. La différence est que vous ne pouvez pas ajuster le texte d'image avec CSS, donc le contraste doit être vérifié dans l'outil d'édition d'image avant l'export. Les images d'aperçu de réseaux sociaux (og:image) contiennent souvent du texte qui devrait être lisible, bien que celles-ci ne soient pas formellement couvertes par WCAG puisqu'elles apparaissent sur des plateformes tierces. Le contraste en typographie va au-delà des simples couleurs de premier plan et d'arrière-plan. Le contraste perçu du texte dépend de la graisse, de la taille de police, de l'interlettrage et de l'interligne. Les polices fines (graisse 300 et moins) ont besoin de ratios de contraste plus élevés que le même texte en graisse regular ou bold parce que les traits plus fins sont plus difficiles à distinguer de l'arrière-plan. La spécification WCAG ne tient pas compte de la graisse dans ses seuils (seulement la taille), donc un ratio techniquement réussi peut encore produire du texte illisible si la police est trop fine. Pour le texte de corps, utilisez au minimum la graisse regular (400) ou medium (500). Réservez les graisses light et thin aux grands titres où la taille compense la visibilité réduite des traits. L'audit systématique du contraste sur un grand site web exige une combinaison d'outils automatisés et de revue manuelle. Lancez des scans automatisés (axe-core, Lighthouse) pour détecter les problèmes évidents : couleurs codées en dur qui échouent aux ratios. Puis revoyez manuellement le contenu dynamique, les zones de contenu généré par l'utilisateur, les états interactifs (survol, focus, actif, désactivé), les messages d'erreur et de succès, le texte d'info-bulle et toute zone où la couleur est déterminée à l'exécution. Créez un calendrier d'audit récurrent : trimestriel pour les grands sites, mensuel pendant le développement actif. Suivez le nombre de problèmes de contraste au fil du temps pour mesurer les progrès. L'outil de vérification de contraste vous permet de saisir deux couleurs quelconques et de voir instantanément le ratio de contraste, le statut de réussite/échec WCAG AA et AAA pour le texte normal et grand, et un aperçu visuel de la combinaison. Utilisez-le pendant la phase de design pour valider les choix de couleurs avant qu'ils n'atteignent le développement, pendant la revue de code pour vérifier que les couleurs implémentées correspondent au design, et pendant les audits d'accessibilité pour identifier et corriger les problèmes existants. L'outil accepte les valeurs de couleur hex, RGB et HSL et montre la luminance calculée pour chaque couleur à côté du ratio.
Questions frequentes
Quel ratio de contraste est requis pour WCAG AA ?
WCAG AA exige un ratio de contraste minimal de 4,5:1 pour le texte normal et de 3:1 pour le grand texte (18px+ ou 14px+ gras).
Quelle est la différence entre AA et AAA ?
AAA est plus strict : 7:1 pour le texte normal et 4,5:1 pour le grand texte. AA est le standard minimal recommandé.
