Vérificateur de Contraste WCAG

Obtenez une analyse complète du contraste WCAG pour les textes, les liens et les images.

Vérificateur de contraste des liens

Assurez-vous que vos liens sont visibles et facilement identifiables. Testez les couleurs, les styles et les soulignements pour garantir l’accessibilité.

Couleur du texte

Couleur de fond

Style de contenu

Souligner le lien

Lien en gras

Texte plus grand

Couleur du lien

WCAG

AA: Conforme AAA: Conforme

Ratio de contraste

Lien par rapport au texte

8.42 Excellent

Lien par rapport au fond

8.42 Very good

Texte par rapport au fond

8.42 Very good

Naviguer sur un site web doit être simple. Garantir que les liens importants se démarquent permet aux utilisateurs de trouver plus facilement ce dont ils ont besoin.

Un contraste insuffisant peut rendre les informations essentielles difficiles à repérer, ce qui peut entraîner de la frustration. Les liens doivent toujours être visibles, qu’ils soient intégrés dans un paragraphe ou isolés.

Besoin de conseils ? Consultez nos bonnes pratiques pour le contraste des liens afin d’améliorer la lisibilité et l’accessibilité.

Contraste excellent, recommandé par les experts en accessibilité.

Contraste des liens et conformité WCAG

Garantir un contraste suffisant pour les liens est essentiel pour l’accessibilité. Cela implique un bon contraste avec le fond et une distinction claire par rapport au texte environnant.

Exigences en matière de contraste

Liens seuls – 4,5:1 par rapport au fond

Links that appear on their own (e.g., navigation menus, buttons, or isolated links) must have at least a 4.5:1 contrast ratio against the background.
This ensures they are clearly visible even without additional styling like underlines or bold formatting.

Liens intégrés – 3:1 par rapport au texte environnant (si seul le changement de couleur est utilisé)

When links appear within a block of text and are only differentiated by color, the contrast ratio must be at least 3:1 against surrounding text to ensure readability for users with color vision deficiencies.
If links use bold styling in addition to color, the contrast requirement applies between the link and the background, not the surrounding text.
If links are underlined, they only need to be a different color from the surrounding text, without a specific contrast ratio requirement, as long as the text and background contrast requirements are met.

Analyse gratuite de l’accessibilité de votre site

Ne vous limitez pas au contraste : analysez votre site pour tous les critères de conformité WCAG.

Scanning icon on bright purple

Lancer l’analyse gratuite

Erreurs fréquentes liées au contraste des liens

Même si un lien paraît visible, un faible contraste peut le rendre difficile à identifier pour les personnes malvoyantes. Le contraste minimum avec le fond est de 4,5:1. Si seule la couleur différencie le lien, il doit aussi avoir un contraste d’au moins 3:1 avec le texte autour.
Le texte en gras améliore la lisibilité, mais ne remplace pas les exigences de contraste. Il faut aussi respecter les ratios WCAG entre le lien et le texte environnant.
La soulignement aide, mais si le lien est différencié uniquement par la couleur, un contraste minimum de 4,5:1 est requis. Combinez couleur et style pour garantir la lisibilité.
Les effets visuels doivent conserver un bon contraste. Si la couleur change au survol ou en focus, elle doit rester conforme aux critères d’accessibilité.
Ce qui est lisible en pleine lumière peut ne pas l’être dans l’obscurité. Testez toujours vos designs dans différents contextes lumineux.

Merci pour votre retour 😊

L’équipe tabnav prend vos retours au sérieux pour améliorer constamment ses services.