Typographie et couleur
Outre le côté subjectif d'une couleur et du choix de cette dernière dans un contexte de communication visuelle (par rapport au sujet, au ton, à la cible...), il faut veiller à une bonne utilisation de celle-ci du point de vue de la lisibilité.
Un équilibre entre teinte, valeur et saturation
- Eviter trop de couleurs différentes et / ou trop vives (à moins que ce choix soit cohérent par rapport au sujet). Cela fatigue et disperse l'œil de l'utilisateur.
A gauche, la lisibilité est impossible car toutes les couleurs sont totalement saturées et proches en terme de valeur. A droite, même combinaison de couleurs voisines de bleu, rouge et magenta, mais avec des valeurs et des saturations différentes. Cet exemple est plus lisible.
- Privilégier :
- une ou deux couleurs dominantes
- une couleur complémentaire qui donne de la consistance au design et peut faire ressortir certains éléments clés (navigation, titres, liens…)
- le blanc et le noir qui se marient avec toutes les couleurs et assurent un certain contraste et une bonne lisibilité
- Difficulté : on ne connait pas les paramètres de la machine de l'utilisateur.
Les couleurs vont être perçues différemment en fonction de la machine de l'utilisateur (réglage de la luminosté et du contraste, calibrage des couleurs...).
Le contraste couleur du texte / couleur du fond
La lisibilité du texte ne dépend pas seulement de la police et du corps, mais également du contraste entre le texte et le fond, à manier avec précaution.
- Pas assez de contraste = le texte est difficile à lire
En passant une image en niveaux de gris, on peut s'entraîner à considérer les couleurs en termes de valeurs, et vérifier ainsi l'équilibre des contrastes.
Page en couleur - Trop de contraste = effet de scintillement
La blancheur de l'écran est plus lumineuse que le papier car elle est constituée de lumière. Cela signifie qu'une police est toujours un peu obscurcie par rayonnement, ce qui la rend plus fine qu'elle n'est. L'effet d'une police doit donc toujours être testé en fonction du fond, car l'effet réel dépend de la combinaison des couleurs.
EXEMPLES : texte coloré sur fond coloré
EXEMPLES : noir / blanc
Page en noir et blanc
Le contraste couleur du texte / image de fond
Maniez avec précaution la disposition d'un intitulé ou d'un texte sur un fond "image", au graphisme plus ou moins complexe. Si le texte couvre l'image, il doit y avoir un contraste évident entre texte et image.
Couleur des liens
Il faut également choisir les couleurs des différents états de liens avec précaution :
- lien inactif
- lien survolé (roll-over)
- lien actif (au clic)
- lien en cours (dans le cas où il reste visible lorsque la page, l'image ou le texte à laquelle il renvoie sont affichés)
- lien visité
Tous ces états ne sont pas obligatoires. Par défaut, les éditeurs HTML comme Dreamweaver proposent le bleu comme couleur de liens et le violet pour les liens visités.
www.google.fr
En résumé
- Eviter une trop grande diversité de couleur qui rendrait la lecture confuse
- Eviter l'utilisation des couleurs complémentaires pour le rapport "texte/fond" (texte vert sur fond rouge, par exemple) qui rendrait le texte difficile à lire
- Privilégier les aplats colorés pour les fonds de page ou d'encarts
- Soigner le contraste texte/arrière-plan
- S'assurer que la couleur du fond ne sera pas en conflit avec les différents états des liens
*Illustrations de Lynda Weinman