Comment accorder les couleurs de mes pages Web ?

Les accords chromatiques des pages Web

5mai2008

Tandis que je cherchais à accorder les couleurs du site, je m’interrogeais sur l’effet que produirait telle ou telle couleur dans l’esprit du « visiteur ».
Je repensais aux peintres à la gouache ou à l’huile qui prenaient le temps d’y réfléchir, aux verriers qui, colorant la lumière, savaient créer une atmosphère propice à la méditation dans les cathédrales.

L’impact psychologique des couleurs, que nous en ayons conscience ou pas, est indéniable.
Devant des couleurs lumineuses et chaudes (rouge, rose, orange, jaune), l’être humain a tendance à être plus éveillé physiquement et à diriger son attention vers l’extérieur.
Les couleurs moins lumineuses et froides (vert, aqua, bleu) procurent davantage un effet relaxant et apaisant.

La couleur est donc une stimulation sensorielle naturelle qui peut contribuer à l’amélioration de l’humeur, de la mémoire et de l’orientation1.

L'harmonie des couleurs

L’ergonomie d’un site web se définit par sa capacité à répondre avec efficacité aux attentes des utilisateurs en matière d’informations et à leur fournir un confort de navigation et de lecture.
La vue chez les humains étant le sens le plus développé (la perception visuelle représente près de 50% de l'activité du cerveau) le choix de couleurs harmonieuses est une composante essentielle de la réussite d’un site.
Le designer doit alors se préoccuper de la perception et de la lisibilité du contenu qu’il expose.

L’accessibilité

Il n'est pas simple déjà d'assortir judicieusement les couleurs de fond et les textes des pages Web.
Un mauvais contraste de couleurs aboutit à un kaléidoscope illisible et fera fuir les visiteurs dotés d’une vision normale.
Mais la question du choix des couleurs et de leur perception par les visiteurs ayant une déficience visuelle, et en particulier les daltoniens, est tout aussi primordiale.
On trouve sur Internet de nombreuses ressources détaillant les techniques améliorant l’accessibilité des sites par des personnes souffrant d’handicaps2.
C’est d'ailleurs l’un des principaux objectifs du WCAG qui prodigue ses recommandations aux webmestres.

Pour la refonte du site je me suis donc préoccupé de cet aspect malheureusement trop délaissé par les designers.
Et j’ai trouvé quelques ressources pour m’aider.

Comment trouver une palette chromatique ?

Colorscheme offre à travers une palette "safe web" de décliner des couleurs harmonieuses.

Comment vérifier le contraste de mes pages web ?

Colour Contrast Analyser est une petite application portable (324 Ko) qui simule dans une fenêtre votre écran vu par des personnes souffrant d'handicaps visuels (dont la cataracte). Il analyse aussi des images mais au format Jpeg seul malheureusement.

Jonathan Snook a développé et mis en ligne un outil similaire à celui d'HP que j'avais préalablement cité et qui est maintenant retiré.
Son Color Contrast Analyser vous indique si les couleurs sont suffisamment lumineuses, si le contraste est correct et si elles répondent à la norme du W3C.

Juicy Studio offre une extension Firefox qui analyse votre feuille de style (ou celle de n'importe quel site) et produit un rapport complet sur son accessibilité.

Ressources

  • (1) Université de Laval, Québec : L'utilisation des couleurs vives ou du contraste noir/blanc : impact sur les activités de la vie quotidienne chez les adultes présentant une atteinte du champ visuel périphérique et central.
  • (2) Open Web : Un article de l'ami Tristan Nitot sur l'accessibilité.


Vous avez aimé cet article ?


Agence Web en Normandie

Ils ont dit :

1

Maxou le 07.05.2008 @ 22:16

Excellent article, comme toujours. je suis un smiley

En 2 mots
  • hiseo
    est le site d'un prestataire indépendant en stratégie et marketing Web BtoB.
    Concepteur Rédacteur Web, j'aide les entreprises dans leurs projets de communication et les accompagne dans la réalisation de leurs objectifs.
    Mais qui suis-je ? (...)
  • Adresse :
    27780 Garennes
    France
  • Courriel :

© Hiseo 2007 - 2014

Fil RSS

Articles du blog les plus lus

Écrire pour le Web Être lisible pour être visible. Voici les enjeux du référencement naturel (ou référencement organique)...

L'optimisation du contenu rédactionnel »

Savoir rédiger [1] À l’école vous étiez mauvais en dissertation ? Les difficultés de notre langue vous ont dégoûté d’écrire ? Rassurez-vous...

Écrire pour convaincre »

Choisir son CMS [2] Vous avez maintenant défini vos objectifs et constitué une équipe motivée. Nous l'avons vu, la création ou la refonte d’un site...

Avez-vous besoin d'un CMS ? »

HTML : un langage descriptif L'Histoire de l'écrit nous enseigne que le texte est découpé en éléments distincts (titre, sous-titre, paragraphe, note, etc.)...

Respecter la sémantique des balises »

Les origines de l'hypertexte et du Web L'histoire du Web en 3 parties : le panthéon du Web de Diderot à Berners Lee. Comment des rêveurs ont dessiné le Web...

L'Histoire du Web »