Documentation sur la couleur

Quelques conseils et notre choix d'outils pour gérer efficacement et joliment la palette colorée de votre site.

L'ambiance colorée de votre site est un élément indispensable pour lui donner un certain style, et en rendre la lecture agréable. Pour Web1901, nous avons par exemple choisi une ambiance rafraîchissante de sorbet menthe/mandarine, qui lui confère un " look " assez inimitable, que nous aimons bien.

Quelques recommandations

Si vous n'êtes pas un as du graphisme, ne choisissez que deux teintes qui se marient bien, ici un vert et un orange, puis trouvez des déclinaisons de ces teintes qui vous permettent, sans virer au perroquet, d'écrire des titres qui sortent correctement sur fond blanc (ici, un vert plus sombre et un marron), pour vos titres de page, par exemple.

Vous utiliserez cette palette restreinte pour choisir les couleurs de liens (à cliquer, actifs, visités). Au début du web (et ce sont encore les couleurs proposées dans les éditeurs HTML par défaut), les liens visités étaient en bleu clair, et les liens visités en violet. Notre pratique du web demande donc, si vous choisissez d'autres couleurs, que les liens non encore visités, pour attirer l'œil, soient plus clairs, plus lumineux, que les liens visités (plus sombres, moins voyants).

Les cartes graphiques anciennes, ou peu performantes, n'affichent que 256 couleurs (j'ai observé le phénomène chez des détenteurs de portables qui n'avaient jamais changé les paramètres par défaut, également) : or ces 256 couleurs ne sont pas les mêmes sur les Macs et sur les PCs sous Windows. Il existe donc une palette commune de 216 couleurs, dont vous êtes sûrs qu'elles apparaîtront telles quelles sur tous les écrans (voir dans la liste de sites recommandés, pour en savoir plus). Ce sont ces couleurs que les logiciels éditeurs de photo (comme Photoshop) ou de HTML appellent les " couleurs Web ".

Lorsque vous chercherez votre gamme de couleurs, soignez donc surtout le contraste entre elles, tant au niveau de la luminosité (clair vs. sombre) que des teintes (rouge ou vert ou bleu). Vous serez, par la même occasion, accessibles aux personnes atteintes de troubles de la vision des couleurs.

Les couleurs sur le web ne sont pas rendues de manière aussi fidèle que sur le papier : elles dépendent largement de la machine de votre lecteur : sa carte graphique, la qualité et les réglages de l'écran, voire de son système d'exploitation (les couleurs des Macs sont plus claires que celles des PC sous Windows).

Pour le texte, on n'a encore rien inventé de mieux que le noir sur fond blanc. Mais vous pouvez utiliser de la couleur pour vos titres, sous-titres, etc.

Certains sites utilisent la couleur pour différencier leurs rubriques : à manier avec précaution, on lasse vite le lecteur, avec une débauche de technicolor… Et comme la gamme colorée fait partie des repères qu'il utilise pour apprendre rapidement à se diriger dans votre site (où sont les liens, où se trouve la navigation), vous devez conserver, pour chaque couleur, le même rapport entre toutes ses variantes, ce qui n'est pas simple.

Effectuez donc ces quelques tests sur vos gabarits, avant de vous lancer dans la réalisation de vos pages :
vérifiez que tout s'imprime bien,
testez l'apparence sur les deux types de machine, PC sous Mac et sous Windows,
passez votre écran en 256 couleurs (certains propriétaires de portables n'ont aucune idée de comment tirer parti de leur carte graphique),
passez votre écran en noir et blanc : une combinaison de couleur propice à la lecture doit offrir un contraste clair/obscur suffisant, quelles que soient les teintes utilisées.

Les outils que nous apprécions

Chromoweb, le site de la couleur pour le web

http://www.smartpixel.net/chromoweb/ (en français)

En particulier Chromoflash, pour trouver sa palette et simuler l'équilibre des couleurs dans son interface web.

L'excellent nColor de YoYo Design est un sélecteur de couleurs avec corrections d'anomalies visuelles. En plus, vous pouvez en télécharger une version que vous pourrez faire fonctionner hors ligne.

http://www.yoyodesign.org/outils/ncolor/ncolor.html.fr (en français)

Chroma, dictionnaire alphabétique et chromatique des couleurs (vous allez enrichir votre vocabulaire, et en plus, en passant le curseur sur une couleur, vous avez ses références hexadécimales…) :

http://www.pourpre.com/chroma/ (en français)

La palette web de 216 couleurs, ainsi que des explications sur son utilité et son utilisation, est accessible sur le site de Linda Weinmann, une graphiste très pédagogue dont vous lirez avec profit les livres :

http://www.lynda.com/hex.html (en anglais)

ou sur le site "Big Nose Bird" (en anglais) :

http://bignosebird.com/safecol.shtml (en anglais)

Une jolie page pesant moins de 5 ko vous propose une visualisation de cette palette, sous la forme de textes ou d'un pavé de couleur, ou même comme couleur de fond :

http://www.the5k.org/entries/171/visualizer.html (en anglais)

Auteur(s) : Eve, Eve
Date : 28 mars 2002