Comment accorder les couleurs de mes pages Web ?

par Philippe | Publié dans Optimisations |  | 

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’orientation¹.

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’handicaps².
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é.

Ils ont dit :

Les champs signalés par le signe doivent être remplis.

Nom :

Site Web :

Commentaire:

Merci de recopier ci-dessous le code de sécurité :
Si vous n'arrivez pas à distinguer les lettres, cliquez sur la boîte pour obtenir une autre combinaison.
Merci de votre compréhension.