Ce qu'il faut savoir
- Utilisez le tableau de cet article pour déterminer les meilleures combinaisons de couleurs d'arrière-plan et de premier plan pour la conception de pages Web.
- Utilisez un outil en ligne comme CheckMyColors.com pour tester les couleurs de votre site et rapporter le rapport de contraste entre les éléments de la page.
- Utilisez un outil comme ContrastChecker.com pour tester vos choix par rapport aux Directives d'accessibilité du contenu Web.
Cet article explique comment créer efficacement un contraste entre les couleurs d'arrière-plan et de premier plan dans la conception Web.
Comment créer un contraste fort
Certaines couleurs peuvent être vives et apparaître de manière éclatante sur une couleur d'arrière-plan particulière, comme le bleu sur le noir, mais ce sont des choix de contraste médiocres. Si vous deviez créer une page tout en texte bleu sur fond noir, par exemple, vos lecteurs ressentiraient très rapidement une fatigue oculaire.
Étudiez le tableau ci-dessous pour avoir une idée des meilleures combinaisons arrière-plan/premier plan.
Il existe des règles et des bonnes pratiques pour le contraste, mais en tant que concepteur, vous devez toujours évaluer ces règles pour vous assurer qu'elles fonctionnent dans votre cas particulier.
Utiliser les outils de vérification de contraste en ligne
En plus de votre propre sens du design, essayez quelques outils en ligne pour tester le choix des couleurs de votre site. CheckMyColors.com testera toutes les couleurs de votre site et rendra compte du rapport de contraste entre les éléments de la page.
De plus, lorsque vous réfléchissez au choix des couleurs, vous devez également tenir compte de l'accessibilité du site Web et des personnes atteintes de daltonisme. WebAIM.org peut vous aider, tout comme ContrastChecker.com, qui testera vos choix par rapport Directives d'accessibilité du contenu Web.
Pourquoi le contraste est-il important?
Un fort contraste joue un rôle important dans le succès de la conception de tout site Web. Un contraste adéquat garantit une expérience utilisateur de qualité et une lisibilité plus facile qui contribueront au succès à long terme d'un site. Cependant, les sites Web dont le contraste est trop faible peuvent être difficiles à lire et à utiliser, ce qui aura un effet négatif sur l'efficacité de tout site.
Bien qu'il puisse être facile de déterminer quelles couleurs ne fonctionnent pas bien ensemble, c'est une question plus difficile pour décider quelles couleurs se marient efficacement, à la fois par rapport aux autres et dans la conception d'un site Internet.
Normes de marque et choix de couleurs contrastées
Le contraste n'est qu'un des facteurs à prendre en compte lorsque vous choisissez les couleurs pour la conception de votre site Web. Lors de la sélection des couleurs, vous devrez probablement également tenir compte des normes de marque pour le client, qu'il s'agisse d'une entreprise, d'une autre organisation ou même d'un individu. Bien que les palettes de couleurs puissent être cohérentes avec les directives de marque d'une organisation, elles peuvent ne pas bien se traduire pour une présentation en ligne.
Par exemple, les verts jaunes et brillants sont terriblement difficiles à utiliser efficacement sur les sites Web. Si ces couleurs figurent dans les directives de la marque d'une entreprise, elles devront probablement être utilisées uniquement comme couleurs d'accent, car il est difficile de trouver des couleurs qui contrastent bien avec l'une ou l'autre.
De même, si les couleurs de votre marque sont le noir et le blanc, cela signifie un grand contraste, mais si vous avez un site avec de longues quantités de texte, un noir fond avec du texte blanc va faire de la lecture une expérience très fatigante pour les yeux malgré la force inhérente du contraste entre le noir et blanc. Dans ce cas, il est conseillé d'inverser les couleurs, en utilisant du texte noir sur fond blanc. Ce n'est peut-être pas aussi intéressant visuellement, mais c'est un bien meilleur choix de contraste et de lisibilité.