Le contraste en webdesign, c’est la vie !

Contraste webdesign

Pour le Petit Robert, le contraste est « l’opposition de deux choses dont l’une fait ressortir l’autre ». Une notion anodine, mais d’une grande importance en web design.

Cet article est un guest-post rédigé par Maxime Siméon. Plus d’infos sur l’auteur à la fin de l’article.

Aaron Walter, dans son livre “Design émotionnel”, définit le contraste comme étant la « rupture d’un motif » permettant de reconnaitre le bon du mauvais (ce n’est pas rien). Il en distingue deux types :

  • le contraste visuel
  • le contraste cognitif

Dans cet article, le terme “contraste” fera référence au contraste visuel.

Le contraste ne se résume pas seulement à un caractère de répartition lumineuse dans une image. C’est un fondamental et Andy Rutledge, dans son article “Contraste et sens”, nous explique très bien les bases.

Nous allons voir qu’il intervient à plusieurs niveaux dans le processus de création d’un web design:

  • la mise en page (structure du document web)
  • la lisibilité (accessibilité du contenu)
  • l’interactivité de l’utilisateur

Le contraste au Cœur de la mise en page

Notre rôle, en tant que web designer, est de présenter de l’information sur Internet. Tout être humain appréhende mieux une information bien structurée et accessible (logique).

Andy Rutledge démontre que le contraste est utilisé pour ciseler efficacement une hiérarchie de l’information.

Dans une page web, une structure conventionnelle nous aide à distinguer :

  • les éléments de navigation
  • le contenu
  • les différents types de contenu (titre, chapeau, paragraphe, aside,…).

contraste webdesign

Voici une partie de la page d’accueil de Nest (un choix totalement arbitraire).

La structure du document est claire. Le contenu est segmenté en sections différenciées entre elles par une couleur ou une photographie en arrière-plan. Avec un jeu typographique (taille et couleur) on distingue aisément les titres.

Le contraste est naturellement un outil de mise en page. Il sert à établir un ordre de lecture et mettre en avant certains contenus grâce à des stimulations visuelles (couleur attrayante, grande typographie, photographie,…). Ces stimulations peuvent aussi entraîner une interaction de l’internaute.

Action, interaction!

Dans un site vitrine, une application web ou un site e-commerce, l’utilisateur doit vite comprendre comment il va pouvoir interagir avec l’interface sous ses yeux.

« À quoi sert ce site ? Comment est-il organisé ? En quoi va-t’il m’aider ? Comment dois-je m’en servir ? »

Ces questions que nous nous posons tous inconsciemment doivent trouver des réponses immédiatement. Cela doit être intuitif surtout pour un service web.

Dans un web design, on va mettre en exergue graphiquement :

  • les liens
  • les boutons
  • les champs de recherche
  • les menus

Bref tout ce qui peut ou doit susciter une action chez l’utilisateur.

Contraste webdesign

Sur un fond blanc, notre attention est plus facilement retenue par un gros bouton rouge clignotant (oui le clignotement ce n’est pas top ;-)). La taille et la couleur attrayante du bouton favorise une action. A côté de lui, le lien hyper-texte perd toute chance de voir le curseur le survoler.

Le bouton ne sera pas toujours plus contrasté que le lien. Le contexte à son importance (comme me l’a fait remarqué Geoffrey Crofte).

Face à trois boutons identiques et un seul lien, il y a une rupture de motif. Dans ce cas, le lien contraste les boutons à cause du principe de similarité. Ce qui n’aide pas à distinguer les boutons entre eux.

Un internaute va visuellement filtrer les éléments contrastés, et donc discerner du reste de l’interface ceux qui sont interactifs.

Pour favoriser une action précise, on peut aller plus loin en supprimant complètement cette étape de “filtrage”. En éliminant le contenu superflu on peut, par exemple, mettre en avant un formulaire et augmenter ainsi son utilisation.

Tumblr applique cette stratégie depuis longtemps : sa page d’accueil présente uniquement un formulaire d’inscription.

Même si la photographie en plein écran éparpille un peu notre regard, le formulaire a davantage d’importance comparativement à WordPress.com.

Être ou ne pas être lisible ?

Pour accéder à un contenu il faut pouvoir le lire. Un texte est lisible lorsqu’il contraste suffisamment avec l’arrière-plan. Simple comme bonjour ! Pourtant cette notion est encore négligée. Le site Contrast Rebellion est là pour le rappeler.

Comme en photographie, ce contraste est quantifiable. On peut l’apprécier rapidement en niveau de gris. Dans Photoshop c’est facilement réalisable, et de manière réversible, grâce un calque de forme (sans tracé) gris neutre (#808080) en mode de fusion “couleur”.

photoshop

On peut aussi le calculer précisément grâce à des services en lignes comme Contrast-A et Colour Contrast Check.

Tout bon web designer devrait faire attention à ce genre de considérations. Il est capital qu’un contenu soit lisible par tous.

En pratique, notre créativité nous amène parfois dans des petits pièges. Reprenons l’exemple de Nest avec une visualisation en niveau de gris.

contraste

On se rend compte rapidement qu’il y a un souci avec la lisibilité du texte sur la photographie (cf encadré vert). Il existe plusieurs techniques pour palier à ce problème.

1. Apposer un filtre coloré pour unifier la teinte de la photographie.

Pavel Huza

2.Flouter la photographie pour tendre vers un fond uni.

Metaport

Ces méthodes ne s’appliquent pas dans le cas d’une photographie d’illustration. Le flou et le filtre coloré réduisent l’image à un banal arrière-plan. Ce n’est pas l’objectif.

Dans le domaine vidéographique, les sous-titres posent le même problème de lecture. La solution utilisée est un aplat plus ou moins transparent s’interposant entre l’image et le texte. De même en web design.

Team sort

L’aplat a pour objectif de contraster le texte quelque soit son arrière-plan. Le détail réside dans l’ajustement de la transparence. Ce n’est pas si aisé car la couleur absolue de l’aplat change en fonction des couleurs de la photographie.

contraste

Ici, une accroche accompagne la photographie de Simon Kern (merci Simon). Elle repose sur un bloc de couleur rouge (#b51600 pour les intimes). Pour l’instant, cet aplat a une opacité de 50% – ou une transparence de 50%.

Mettons la main à la pâte et trouvons comment obtenir la bonne opacité pour utiliser cet aplat avec toutes les images.

Contraste

En niveau de gris, nous avons le rendu sur une seule photographie provisoire. Ce n’est pas représentatif, il faut donc tester le rendu sur du blanc (combinaison de toutes les couleurs) et sur du noir (absence de couleurs).

Contraste webdesign

Sans problème visuel, le texte semble lisible. Pourtant le site Contrast-A nous prouve, dans le cas d’une image trop claire (super-exposé voir blanche), que l’opacité de notre aplat ne contraste pas assez le texte.

Le principe est simple : plus l’opacité est forte, moins il y a de risque. Par tâtonnement, on arrive à obtenir une opacité qui ne présente aucun risque selon la norme WCAG 2 AA : 80% pour ce cas.

Contraste webdesign

Avec l’habitude cette tâche devient moins lourde qu’elle n’y parait. Évidement, l’utilisation de dégrader complique un peu la démarche.

L’abus de contraste est dangereux pour la santé !

Il se peut que cet article soit d’une banalité pour un grand nombre de confrère web designer (je m’en réjouis dans ce cas). Il n’en reste pas moins que l’impact du contraste est énorme sur la compréhension et l’interaction d’un site web.

Un oeil averti permet de dompter le contraste. De bonnes pratiques nous évitent des pièges. Certains aspects du contraste sont mesurables, comme l’accessibilité d’un texte en regard des normes actuelles.

Attention, le contraste est à double tranchant. Si un bon contraste oriente correctement, un mauvais contraste désoriente.

Lorsque trop d’éléments visuels incitent l’attention, cela n’entraine qu’une action de l’internaute : la fermeture de l’onglet.

À utiliser avec précaution.

À propos de l’auteur :

Maxime SimeonMaxime Siméon

Graphiste à tendance webdesigner, un peu perfectionniste sur les bords, je suis autodidacte, curieux, passionné et un peu «fou-fou».

maximesimeon.com / @maximesimeon

Photo d’illustration de l’article : Teban32 sous licence Creative Commons

Vous aimerez aussi :

Cette entrée a été publiée dans Webdesign, avec comme mot(s)-clef(s) , , , , , . Vous pouvez la mettre en favoris avec ce permalien.

17 commentaires sur Le contraste en webdesign, c’est la vie !

  1. Kévin HOHLER dit :

    Article très intéressant, merci Maxime ! ;)

  2. Ping : Le contraste en webdesign, c’est la vie !...

  3. Thibault dit :

    Super article, vraiment complet. Merci bien ! ;)

  4. Chapitre Onze dit :

    Vraiment très intéressant. Merci !

  5. Gio dit :

    Merci de l’article !!

  6. Cet article m’a interessé, il est toujours bon de se remémorer les principes de base, merci!

  7. Mais de rien c’est un plaisir.

  8. Anthony dit :

    Merci pour cette article très intéressant :)

  9. Ping : El contraste en el diseño web, as&iacute...

  10. Pour moi qui ne suis pas designer, cet article est très intéressant. Merci beaucoup :-)

    Alexandre

  11. Sonia dit :

    Même si, en tant que designer web, nous sommes au courant du principe de base du contraste, l’article apporte des exemples concrets et surtout, des méthodes permettant d’obtenir les meilleures pratiques. Excellent article!

  12. Benoît dit :

    Article intéressant et les exemples sont bien choisis, ça permet de visualiser facilement.

    Merci !

  13. Ping : Des pixels et du code #91 - Stéphanie Walter, Graphiste - Designer web et mobile

  14. Nico dit :

    Chouette et intéressant article merci !

  15. Steve Vicente dit :

    Le Contraste est tellement évident que l’on a tendance à oublier l’importance capitale qu’il a dans notre vie . Le Contraste ,c’est la vie ! Et c’est valable à tout les niveaux . Merci Maxime de le mettre en évidence au niveau artistique et principalement en Webdesign . C’est un thème qui me passionne car pour moi c’est la base de tout . Le Contraste est l’opposition de deux choses et en même temps,l’une ne peut se séparer de l’autre .J’aime cette idée qui ouvre pleins d’horizons divers et variés.

  16. Ping : Le contraste en webdesign || blog || PortFolio Geoffrey Leroy

  17. Ping : Veille | Pearltrees

Laissez votre impression, réagissez à l'article !

L'adresse de contact ne sera pas publiée.

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>