Pourquoi le contraste des couleurs est-il important pour l’accessibilité web
Découvrez comment votre choix de couleurs peut empêcher les personnes malvoyantes de lire ou de naviguer facilement sur votre site web.
Auteur: Missy Jensen, Senior SEO Copywriter
Publié: 13/10/2023
)
De nombreux éléments de conception entrent en jeu dans l’accessibilité d’un site web — de la mise en page des contenus à l’utilisation des images et de la typographie.
Cependant, votre choix de couleurs est l’une des premières choses que les visiteurs remarquent lorsqu’ils arrivent sur votre site. Et si vous vous trompez, cela peut impacter l’expérience utilisateur de tous les visiteurs — pas seulement celle des personnes malvoyantes.
En réalité, vos choix de couleurs — et les relations entre ces teintes — peuvent avoir un impact considérable sur l’expérience utilisateur. Si vous choisissez des couleurs qui n’offrent pas suffisamment de contraste, certaines parties de votre site peuvent être difficiles à lire et à parcourir pour les personnes malvoyantes.
)
Qu’est-ce que le contraste des couleurs ?
Techniquement, le contraste des couleurs est la relation entre la luminance de deux couleurs. Plus simplement, vous pouvez considérer la luminance comme la luminosité d’une couleur : le blanc pur a la luminance la plus élevée, et le noir pur la plus faible.
Le contraste s’exprime généralement sous forme de ratio, un chiffre plus élevé indiquant un contraste plus important entre deux couleurs. Par exemple, le blanc et le noir ont un ratio de contraste de 21:1 (le maximum possible), tandis que le blanc et le jaune n’ont qu’un ratio de 1.07:1.
Lorsque deux couleurs se superposent — par exemple, du texte d’une couleur sur un fond d’une autre teinte — les avantages d’un ratio de contraste élevé deviennent évidents. Lire du texte blanc sur fond noir est bien plus facile que de lire du texte blanc sur fond jaune.
Vérifiez le contraste de vos couleurs
)
Utilisez un vérificateur de contraste des couleurs pour vérifier si vos couleurs respectent les exigences des Web Content Accessibility Guidelines (WCAG).
)
Pourquoi le contraste des couleurs est-il important ?
Pour de nombreuses personnes malvoyantes, le contraste des couleurs peut faire la différence entre un site facile à lire et à naviguer, et un site totalement illisible. De nombreux types de déficiences visuelles — de la myopie et l’hypermétropie à la rétinopathie diabétique et la dégénérescence maculaire — peuvent rendre la lecture difficile lorsque le contraste des couleurs est faible.
Un faible contraste peut aussi poser problème aux personnes daltoniennes, même si leur acuité visuelle est par ailleurs parfaite. Si deux couleurs très différentes ont une luminance presque identique, il peut être presque impossible de les distinguer.
)
Le contraste des couleurs joue également un rôle important dans l’expérience utilisateur des personnes âgées. L’acuité visuelle commence généralement à diminuer à partir de 70 ans(opens in a new tab), même si leurs yeux ont toujours été en bonne santé.
Parmi les problèmes visuels les plus courants chez les personnes âgées figure la faible sensibilité au contraste(opens in a new tab). Si votre site web n’est pas conçu avec un contraste de couleurs accessible, vous risquez d’exclure une grande partie de vos visiteurs de l’utilisation de vos services ou produits en ligne.
)
Contraste des couleurs et lois sur l’accessibilité
L’ Americans with Disabilities Act(opens in a new tab) (ADA) est l’une des principales lois qui interdit la discrimination fondée sur le handicap. Comme l’ADA a été promulguée en 1990, elle ne comporte pas de dispositions spécifiques concernant Internet — ni de critères juridiques précis pour la mise en œuvre de l’accessibilité numérique.
En revanche, les tribunaux et le Department of Justice (DOJ) s’appuient sur les Web Content Accessibility Guidelines(opens in a new tab) (WCAG), la norme internationale de facto pour l’accessibilité numérique.
Dans le cadre de l’ADA, les WCAG sont presque toujours citées dans les procès et accords — et la jurisprudence montre que le respect des WCAG est essentiel pour la conformité à l’ADA.
En plus de l’ADA, l’ European Accessibility Act(opens in a new tab) (EAA) et la Loi sur l’accessibilité pour les personnes handicapées de l’Ontario(opens in a new tab) (AODA) s’appuient également sur les normes WCAG pour l’accessibilité.
)
Que disent les WCAG sur le contraste des couleurs ?
Selon le critère de succès WCAG (SC) 1.4.3 : Contraste (minimum)(opens in a new tab), la présentation visuelle du texte et des images de texte doit avoir un ratio de contraste d’au moins 4.5:1.
Il existe trois exceptions à l’exigence de contraste de 4.5:1 : le texte de grande taille, le texte accessoire et les logotypes.
Texte de grande taille : Le texte de grande taille est plus facile à lire, donc l’exigence de contraste est réduite à 3:1. Les WCAG définissent le texte de grande taille comme étant de 18 pt ou plus, ou de 14 pt ou plus s’il est en gras.
Accessoire : Le texte ou les images de texte qui font partie d’un composant d’interface utilisateur inactif, qui sont purement décoratifs, qui ne sont visibles par personne, ou qui font partie d’une image contenant d’autres contenus visuels significatifs, ne sont pas soumis à l’exigence de contraste.
Logotypes : Le texte faisant partie d’un logo ou d’un nom de marque n’est pas soumis à l’exigence de contraste.
Il est important de tester activement vos ratios de contraste, car il n’est pas toujours évident de savoir quelles combinaisons de couleurs offrent un faible contraste. Par exemple, du texte blanc sur un fond rouge uni (utilisé par de nombreuses marques sur de nombreux sites) a un ratio de contraste de seulement 3.99:1. Cela signifie qu’il n’est conforme aux WCAG que s’il est utilisé avec des polices grandes ou en gras.
)
Comment rendre mon site web plus accessible ?
Voici deux conseils rapides pour vous aider à garantir l’accessibilité de vos couleurs :
N’utilisez pas la couleur comme seul moyen de transmettre une information : Les sites web utilisent souvent du texte vert ou rouge pour indiquer des messages de réussite ou d’échec. Cependant, le daltonisme rouge-vert est la forme la plus courante de déficience de la vision des couleurs. Et n’oubliez pas : toute personne aveugle est aussi daltonienne, il est donc important que tout message de validation/erreur (comme un champ de formulaire manquant) soit également communiqué de façon programmatique.
Soulignez les liens dans le texte : Le style de vos liens dans le texte doit comporter un soulignement — la couleur seule ne suffit pas. La plupart des utilisateurs s’attendent à voir les liens soulignés, et le soulignement aide les personnes malvoyantes à les identifier.
Vous souhaitez vérifier l’accessibilité de vos couleurs ? Testez toutes les combinaisons de couleurs de votre site avec l’outil gratuit Color Contrast Checker d’AudioEye.
Ou effectuez un scan gratuit de n’importe quelle URL pour identifier les problèmes d’accessibilité sur votre site web.
Partager l'article
)
)
)