Vérificateur de Contraste

Vérificateur de Contraste - Outil d'Accessibilité WCAG

Un vérificateur de contraste complet qui évalue combinaisons de couleurs premier plan et arrière-plan selon directives WCAG 2.1. Teste niveaux de conformité AA et AAA pour texte normal (moins de 18pt ou 14pt gras) et texte grand (18pt et plus, ou 14pt gras et plus). Fonctionnalités incluent calcul ratio contraste temps réel, outils ajustement couleur, combinaisons préréglées et recommandations pour améliorer accessibilité. Essentiel pour designers, développeurs et tous créant contenu web accessible. Voir aussi notre Palette de Couleurs et notre Sélecteur Pro.

Pourquoi le ratio de contraste WCAG AA est-il important pour mon site ?

WCAG 2.1 AA est la référence d'accessibilité citée par la plupart des lois d'accessibilité dans le monde — l'ADA aux États-Unis, l'European Accessibility Act, l'Equality Act du Royaume-Uni, et la Section 508 pour les marchés fédéraux. Ne pas respecter le contraste AA (4.5:1 pour le texte courant, 3:1 pour le texte large) signifie que les lecteurs malvoyants, atteints de dégénérescence maculaire liée à l'âge, daltoniens ou simplement gênés par les reflets sur un écran de téléphone ne peuvent pas lire votre contenu de manière fiable. Cela vous coûte aussi de l'argent : environ 1 adulte sur 4 a une limitation visuelle fonctionnelle, les moteurs de recherche déclassent les pages peu accessibles selon les signaux de contenu utile, et les procès pour sites de commerce inaccessibles ont bondi année après année. Traiter AA comme le plancher (pas le plafond) vous donne sécurité juridique, portée plus large et meilleur SEO en même temps.

Quelle est la différence entre les niveaux WCAG AA et AAA ?

AA est le niveau minimum référencé légalement : contraste 4.5:1 pour le texte courant normal (moins de 18pt régulier ou 14pt gras) et 3:1 pour le texte large (18pt régulier et plus, ou 14pt gras et plus). AAA est le niveau renforcé : 7:1 pour le texte courant et 4.5:1 pour le texte large. AA est conçu pour être atteignable en préservant la plupart des choix de marque ; AAA est pour le contenu où l'accessibilité est critique — services gouvernementaux, santé, finance, éducation pour seniors. AAA est plus difficile à atteindre car les couleurs de marque vives ou pastel passent rarement 7:1 sur du blanc. La recette pragmatique que la plupart des équipes suivent : viser AA sur toute l'UI, pousser le corps de texte à AAA quand possible en utilisant du noir pur ou quasi-noir sur surfaces blanches pures, et ne jamais laisser un contrôle actif tomber sous AA.

Comment exactement le ratio de contraste est-il calculé ?

WCAG utilise la formule (L1 + 0.05) / (L2 + 0.05), où L1 est la luminance relative de la couleur la plus claire et L2 de la plus sombre. La luminance relative se calcule par pixel : convertissez chaque canal RGB de 0-255 en fraction 0-1, appliquez la correction gamma sRGB (canal / 12.92 si canal ≤ 0.03928, sinon ((canal + 0.055) / 1.055)^2.4), puis sommez L = 0.2126 R + 0.7152 G + 0.0722 B. Les poids correspondent à la façon dont les cellules en cône de l'œil répondent — le vert domine car il tombe dans la bande la plus sensible. La constante 0.05 empêche la division par zéro pour le noir pur. Le noir pur sur blanc pur donne le ratio maximum possible de 21:1 ; le blanc pur sur blanc donne 1:1. Tout en dessous de 3:1 échoue pour toute taille de texte.

Et si ma couleur de marque ne passe pas — dois-je changer la marque ?

Non — vous changez où vous utilisez la couleur de marque, pas la marque elle-même. Le schéma que la plupart des design systems suivent : verrouillez le HEX original de marque comme token "marketing" ou "décoratif", utilisé pour logos, fonds hero avec texte superposé et typographie display grande où 3:1 suffit. Puis générez des dérivés accessibles en assombrissant la couleur de marque jusqu'à dépasser 4.5:1 contre blanc (ou en l'éclaircissant pour thèmes sombres), et utilisez ces dérivés pour boutons, liens et corps de texte. Tailwind, Material et IBM Carbon livrent tous des gammes appariées exactement pour cette raison. Les boutons Éclaircir et Assombrir de cet outil trouvent la valeur passante la plus proche tout en gardant la même teinte, donc le dérivé reste fidèle à la marque.

Quand le seuil de contraste 3:1 s'applique-t-il à la place de 4.5:1 ?

Trois situations se qualifient pour le seuil inférieur 3:1 sous WCAG 2.1. Premièrement, le texte large — défini comme au moins 18pt régulier (environ 24px) ou 14pt gras (environ 18.5px) — car les formes de lettre plus grandes sont plus faciles à discriminer. Deuxièmement, les composants UI non textuels comme bordures de champs de formulaire, contours de focus, icônes et objets graphiques (sous SC 1.4.11) : ils doivent atteindre 3:1 contre les couleurs adjacentes, pas 4.5:1. Troisièmement, le texte incident dans les logos ou la pure décoration. Pièges importants : les étiquettes de boutons sont du texte normal et nécessitent 4.5:1 même si le bouton lui-même est grand ; le texte placeholder nécessite 4.5:1 car il transmet des instructions ; l'UI désactivée n'est exemptée que si on ne peut pas du tout interagir avec. En cas de doute, visez 4.5:1 — cela couvre la plupart des cas sans audits séparés.

Comment améliorer le contraste sans casser la mise en page ?

Cinq leviers à faible risque. (1) Assombrissez le premier plan en HSL de 10-20% de luminosité — la teinte reste la même, la marque paraît inchangée. (2) Mettez le texte en gras : 14pt gras passe à 3:1 au lieu de 4.5:1, donc le poids fait une partie du travail. (3) Augmentez la taille de police pour franchir le seuil du texte large (18pt régulier ou 14pt gras) et le ratio requis baisse. (4) Ajoutez un fond plein subtil sous le texte plutôt que de le placer sur un dégradé ou une image chargée — les couches de superposition (un voile rgba(0,0,0,0.55)) restaurent un contraste cohérent sur des sections entières. (5) Utilisez une paire de couleurs complètement différente pour l'appariement qui échoue, même si le reste de la palette garde les couleurs de marque — par exemple, utilisez le teal de marque pour les fonds mais une ardoise quasi-noire pour tout texte sur une carte blanche.

Comment gérer le contraste sur des dégradés, photos ou fonds vidéo ?

Les fonds image et dégradé changent de contraste pixel par pixel, donc le vérificateur ne peut pas évaluer automatiquement chaque position — vous devez identifier le pire endroit. Trois corrections standard : (1) Superposez une couleur plate semi-transparente entre le fond et le texte (background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url("hero.jpg");) pour que le premier plan voie un fond uniforme ; échantillonnez cette couleur de fond combinée dans le vérificateur. (2) Encadrez le texte dans une carte opaque avec son propre fond plein pour qu'il ne touche jamais le média sous-jacent. (3) Ajoutez une ombre de texte douce (text-shadow: 0 1px 4px rgba(0,0,0,0.65)) pour détacher les formes de lettres des zones chargées ; les ombres ne remplacent pas le contraste mais augmentent le ratio effectif sur la plupart des moniteurs. WCAG 2.1 SC 1.4.3 s'applique toujours à la combinaison texte-sur-fond rendue, donc testez dans un vrai navigateur, pas seulement le fichier de design.

APCA (l'algorithme de contraste proposé pour WCAG 3) rend-il ces résultats obsolètes ?

Pas pour la conformité actuelle. APCA (Accessible Perceptual Contrast Algorithm) est un modèle perceptuel sensible à la polarité exploré pour WCAG 3, qui est encore en brouillon et pas encore référencé légalement nulle part. WCAG 2.1 et 2.2 — toutes deux utilisent la formule simple de ratio de luminance que cet outil implémente — restent la norme activement citée dans les lois, affaires judiciaires et directives de marchés publics jusqu'en 2026 et presque certainement au-delà. APCA corrige des limitations réelles : la formule 2.x sous-pondère les contrastes de tons gris moyens et traite clair-sur-sombre de manière identique à sombre-sur-clair même si l'œil les perçoit différemment. La recette pragmatique aujourd'hui : utilisez les ratios WCAG 2.1 pour la conformité (cet outil), prévisualisez aussi le corps de texte avec une valeur APCA si votre design system le supporte (Sass-WCAG ou APCA online), et revérifiez une fois que WCAG 3 atteint le statut de Candidate Recommendation.

Fonctionnalités Clés

• Calcul ratio contraste temps réel
• Vérification conformité WCAG 2.1 AA
• Vérification conformité WCAG 2.1 AAA
• Contraste texte normal (4,5:1, 7:1)
• Contraste texte grand (3:1, 4,5:1)
• Aperçu en direct des combinaisons couleur
• Exemple texte taille normale
• Exemple texte taille grande
• Indicateurs Conforme/Non Conforme pour chaque niveau
• Sélecteur couleur pour premier plan
• Sélecteur couleur pour arrière-plan
• Saisie manuelle couleur hex
• Échanger couleurs premier plan/arrière-plan
• Ajustement couleur Éclaircir/Assombrir
• Suggérer couleurs similaires conformes
• Combinaisons contraste élevé préréglées
• Affichage informations couleur (HEX, RGB, HSL)
• Calcul luminance relative
• Explications WCAG détaillées
• Design mobile responsive
• Support mode sombre
• Traitement 100% côté client
• Aucune donnée envoyée aux serveurs
• Copier codes couleur dans presse-papiers
• Design axé accessibilité