Hier, il faisait beau et 85 degrés. Aujourd'hui, il fait froid, venteux et pluvieux à 54 degrés.

C'est le contraste.

Les designers ont la possibilité de garder les choses homogènes ; les polices, les éléments, les mises en page et les dimensions pourraient tous rester cohérents et le monde ne s'effondrerait pas.

Mais ce n'est pas ainsi que fonctionne le design – nous essayons de rendre les choses différentes, de se démarquer et de dire « regardez-moi ! » Alors, nous apprenons le jumelage de polices, nous utilisons plusieurs éléments, retravaillons nos mises en page, redimensionnons et réalignons notre contenu pour rendre les choses plus intéressantes et accessibles pour les spectateurs.

Le contraste des couleurs est un autre élément avec lequel les designers jouent non seulement pour l'effet esthétique mais aussi pour l'accessibilité globale.

Contraste des couleurs dans le design

Le mot « contraste » signifie simplement « différence ».

Par exemple, le rouge-orange et l'orange sont des couleurs qui ont un faible contraste ; le rouge et le vert sont des couleurs qui ont un fort contraste.

Bien que de nombreux schémas de couleurs contrastés soient intéressants et parfois même esthétiquement agréables à regarder, les couleurs contrastées ont un but supplémentaire : l'accessibilité des utilisateurs.

Contraste des couleurs pour l'esthétique

Pour le moins, choisir des couleurs à fort contraste pour un design est un choix audacieux. Voici des exemples de couleurs à fort contraste. Ces paires sont directement opposées l'une à l'autre sur le cercle chromatique. 

 

Elles sont certainement beaucoup à regarder. Mais parfois, l'audace paie. Ces couleurs ne vous semblent-elles pas un peu familières ?  

Source : Gerard Malanga, Andy Warhol

L'art et le design qui utilisent des couleurs à fort contraste « ressortent » vraiment. Regarder des designs comme ceux-ci crée une expérience unique, mais a tendance à devenir un peu douloureux.

En raison de cette responsabilité, un fort contraste de couleurs n'est pas toujours la meilleure idée à utiliser dans le design. En même temps, un faible contraste de couleurs peut également être une mauvaise idée ; utiliser ces schémas rend difficile la différenciation entre les éléments.

Bien que les designs à faible contraste aient une esthétique qui leur est propre, ils ne sont pas toujours le meilleur choix pour les supports marketing ou le design d'emballage.

Utiliser le contraste des couleurs dans les produits physiques consiste à trouver un équilibre entre les hauts et les bas. Dans le design de base, il n'y a pas de formule pour un bon contraste ; cela nécessite un bon œil et beaucoup de pratique.

Contraste des couleurs pour l'accessibilité

Le contraste des couleurs est plus qu'une simple esthétique ; c'est aussi une nécessité, surtout sur le web. La chose la plus importante à retenir ici est que si vous construisez un site web, rédigez une présentation ou concevez une infographie, il est crucial que les informations fournies soient accessibles à tous les participants.

Une des meilleures façons de le faire est de s'assurer que les couleurs que vous utilisez dans votre design – graphique ou web – ont un fort contraste.

Contraste sur le web

WCAG (Web Content Accessibility Guide) 2.0 fournit des directives spécifiques pour s'assurer que le contraste des couleurs entre le premier plan (texte, images, etc.) et l'arrière-plan est approprié en utilisant un ratio. Ce ratio varie également en fonction de la taille et du poids du texte utilisé.

WCAG 2.0 exprime que le contraste est une mesure de la différence de luminosité perçue entre deux couleurs. Cette différence est indiquée par un ratio entre 1:1 (le contraste le plus bas possible ; texte blanc sur fond blanc) et 21:1 (le contraste le plus élevé possible ; texte noir sur fond blanc ou vice versa).

Le minimum de contraste listé par le WCAG est un ratio de 4.5:1 à l'exception des grands textes, des logos ou des contrastes intentionnellement faibles sur le web. Les valeurs hexadécimales des couleurs utilisées sont nécessaires pour mesurer le contraste.

C'est un peu déroutant. Mettons cela en pratique.

 

Bien que certains des textes ci-dessus puissent être lisibles pour vous, il peut être difficile ou impossible pour d'autres personnes ayant des déficiences visuelles de les lire. Même la dernière option avec un ratio de 4.57:1 est difficile à regarder. Rappelez-vous que 4.5:1 est le minimum.

Inclure un contraste approprié est juste l'un des nombreux éléments de design web nécessaires pour un excellent site web. Vous n'êtes pas sûr de le faire suffisamment bien ? Un logiciel de vérification du contraste des couleurs peut vous aider à vous assurer que la palette de couleurs que vous utilisez est optimisée pour offrir la meilleure expérience utilisateur possible. 

Pouvez-vous me lire maintenant ?

Non ! Regardez ça, un parfait exemple de comment l'en-tête de cette conclusion est 1. laid et 2. impossible à lire.

Vous pouvez lire des études sur le contraste des couleurs, le daltonisme et l'accessibilité, mais rien ne vaut l'expérience directe de cette frustration. Ce n'est pas agréable, alors faites votre devoir pour vous assurer que vos utilisateurs et spectateurs ne l'expérimentent pas non plus.

Le contraste apparaît différemment, selon que votre projet est imprimé ou numérique. En savoir plus sur la différence entre RVB vs CMJN.