IPDynamic

Urgencyclopédie, l'encyclopédie en ligne de Secourisme.info

Utilisation des couleurs dans un document

Un article de Urgencyclopedie, l'encyclopéde libre.

Les couleurs permettent de faire des contrastes, et donc de mettre en valeur un document. Mais leur mauvaise utilisation peut au contraire nuire à la lisibilité.

Par ailleurs, il faut penser que certains lecteurs ou spectateurs peuvent être daltoniens ; il ne faut pas baser toute l'information sur la couleur.

Voici quelques considérations qui ne doivent pas être vues comme des directives à suivre, mais plutôt comme des pistes de réflexion et une invitation à l'expérimentation.


Note : pour désigner les couleurs sur support informatique, nous utilisons la convention RVB (rouge-vert-bleu), les couleurs sont désignées par un nombre hexadécimal #RRVVBB, cf. Aide:Couleur.


Sommaire

Couleur ou noir et blanc

De manière générale, des couleurs bien choisies permettent de mettre en relief certaines informations, ou de faciliter la classification des informations, par exemple par l'association couleur↔domaine ; la couleur présente donc un intérêt indéniable sur le noir et blanc. L'abus, au contraire, peut provoquer une saturation de l'esprit (« mosaïque »).

Il faut distinguer deux cas : le cas du support imprimé (livret, plaquette, affiche, transparent à projetter), et le cas du support vidéo-projetté (par exemple présentation PowerPoint® ou StarImpress) ou affiché sur écran (par exemple page web), dit « support électronique ». Les avantages et inconvénients sont différents.

Support imprimé

Support imprimé en couleur
Avantages/inconvénients Couleur Noir et blanc
coût cher
(cartouche d'encre, quadrichromie)
bon marché
photocopie N&B du document rendu incertain rendu identique
durée de vie du document imprimante couleur :
mauvais vieillissement des couleurs
photocopie : bonne conservation

On voit que le noir et blanc est intéressant pour la publication en masse à bon marché (photocopies) de documents qui peuvent se conserver. La couleur ne serait alors plutôt utilisée pour des documents à usage restreint (document de travail, présentation à usage unique ou limité) ou pour des documents de « prestige » (plaquette, affiche).

Support électronique

Dans le cas d'un support électronique, le coût et la durée de vie ne change absolument pas. Les principaux problèmes sont

  • sortie du document : impression en noir et blanc, rendu des couleur en impression couleur ;
  • du rendu sur un écran noir et blanc ou avec une carte graphique ayant peu de couleurs1

On a deux types de rendus noir et blanc :

  • soit le logiciel sépare le texte du fond, et met d'office le texte en noir et le fond en blanc ; on a en général une bonne lisibilité et des économies d'encre, mais une perte de l'information portée par la couleur ;
  • soit le logiciel transforme les couleurs en niveaux de gris (cas notamment des images et photographies) ; le rendu est alors incertain.

Lisibilité

Si l'utilisation judicieuse de couleurs permet de faire ressortir des information, l'abus nuit à la lisibilité.

D'une manière générale :

  • il faut éviter d'utiliser plus de cinq couleurs différentes sur une même page
    au-delà, l'association couleur-information est moins efficace2 ;
  • pour qu'un texte soit lisible, il faut un bon contraste ; contraste clair/sombre bien sûr, mais aussi contraste sur la teinte des couleurs (par exemple le jaune et le vert ont un moins bon contraste que le jaune et le rouge) ;
  • un trop fort contraste est désagréable et fatiguant, et doit donc être réservé à de faibles portions de texte ;
  • les couleurs complémentaires, si elle fournissent un excellent contraste, provoquent un phénomène de vibration désagréable et doivent donc être utilisées avec parcimonie.

Les couleurs complémentaires sont celles dont la somme fait le blanc, par exemple

  #FF0000 rouge      #00FF00 vert         #0000FF bleu
+ #00FFFF cyan     + #FF00FF magenta    + #FFFF00 jaune
---------          ---------            ---------
  #FFFFFF blanc      #FFFFFF blanc        #FFFFFF blanc
  • rouge et jaunes sont complémentaires
  • vert et magenta (rose) sont complémentaires
  • cyan (bleu) et jaune sont complémentaires

Le tableau suivant illustre le désagrément causé.

cyan sur fond rouge rouge sur fond cyan
magenta sur fond vert vert sur fond magenta
jaune sur fond bleu bleu sur fond jaune

Les couleurs les mieux visibles sur un fond blanc ou noir sont celle pour lesquelle la composant rouge et/ou verte et/ou bleue vaut FF, qui sont les couleurs primaires et fondamentales :

couleurs primaires couleurs fondamentales
rouge #FF0000 #FF0000 jaune #FFFF00 #FFFF00
vert #00FF00 #00FF00 magenta #FF00FF #FF00FF
bleu #0000FF #0000FF cyan #00FFFF #00FFFF

Vous pouvez regarder la lisibilité d'une écriture en noir et en blanc sur diverses couleurs sur l'article Aide:Couleur > Exemples.

Notons que le contraste dû aux teintes peut très bien être très lisible en couleurs, mais totalement illisible une fois passé à la photocopieuse. L'image ci-contre illustre un contraste rouge-vert (dégradé en 256 couleurs) bien visible en couleurs (image du haut) ; une fois transformée en image noir et blanc (256 niveaux de gris), on n'a plus qu'un gris uniforme.


Conseil : toujours tester l'impression noir et blanc ou la photocopie noir et blanc, que ce soit pour un document couleur (disparition des teintes) ou noir et blanc (dégradation des gris).


Harmonie

Selon certaines sources, si l'on dispose les couleurs en cercle, alors on a des couleur harmonieuses si on choisit les couleurs aux sommets d'un triangle équilatéral ou d'un carré [1] (http://www.angelfire.com/az3/colors/pages/sm23.htm) [2] (http://ma.rine.free.fr/couleurs/guide_page4.htm). Pour une répartition triangulaire, cela revient à permuter les valeurs des groupes RR, VV et BB

Exemple d'associations harmonieuses en carré
Exemple 1
#84FF00 #FF0000 #8400FF #00FFFF
Exemple 2
#FF8400 #FF00FF #0084FF #00FF00
Exemple d'associations harmonieuses en triangle
Exemple 1
#84FF00 #FF0084 #0084FF
Exemple 2
#FF8400 #8400FF #00FF84
Exemple 3
#FF8400 #FF00BD #00BDFF

Dans cette roue des couleurs, les couleurs dont l'associaiton est désagréable sont celles qui sont diamétralement opposées.

Symbolique des couleurs

Les couleurs ont une symbolique, ou bien sont fortement associées à certains contextes. Cela ne signifie pas qu'il faille nécessairement utiliser telle couleur pour telle contexte (par exemple uniquement du rouge en ce qui concerne les sapeurs-pompiers), mais il faut se poser la question : la couleur que j'utilise sert-elle ou desserre-t-elle mon propos ?

Notons que ces notions sont essentiellement culturelles ; à titre d'illustration :

  • le blanc est la couleur du mariage en France (symbole de la virginité), c'est la couleur du deuil en Chine et au Viêt-Nam (sans doute une évocation de la lividité cadavérique) ;
  • on parle des sept couleurs de l'arc-en-ciel, mais qui utilise le terme « indigo » ? Culturellement, il n'y a que six couleur dans l'arc-en-ciel…
  • les viêtnamiens n'ont qu'un seul mot pour désigner le vert et le bleu ; pour eux, le vert est une nuance du bleu, ou vice-versa.

Enfin, la couleur peut avoir une forte connotation dans un domaine très restreint, pour une partie seulement de la population d'un pays ; par exemple la trilogie bleu-blanc-rouge des secteurs du plan rouge n'est connue que des personnes impliquées dans la sécurité civile en France, et pour ces personnes, l'association de ces couleurs rappellera ce contexte.

Voici quelques exemples de symboles portés par les couleurs :

  • rouge, couleur du sang (blessure mais aussi sang menstruel), des muqueuses, du métal chauffé, des camions de pompiers français, signal d'arrêt (feu rouge) : danger, sexualité, interdiction, chose importante ;
  • rose, couleur des muqueuses, de la peau blanche : amour, sensualité ;
  • vert, couleur des feuilles, de l'herbe, signal de passage (feu vert), des vêtements militaires (kaki) : sécurité, nature, autorisation ;
  • bleu, couleur du ciel, de la mer, uniformes de la police : calme ;
  • orange, couleur du feu, visible dans un contexte naturel ou urbain (vêtements à haute visibilité), signal d'avertissement (feu orange) , couleur des camions de pompier en Belgique et en Allemagne ;
  • gris, couleur des nuages, de la poussière, des tentures de deuil, des bandeaux de faire-part de décès : saleté ;
  • blanc, couleur de la lumière du Soleil, des vêtements hospitaliers : pureté, virginité, propreté ;
  • jaune, couleur attribuée au Soleil, couleur du beurre, de l'huile, des urines, cheuveux blonds, couleur visible en milieu urbain (vêtements à haute-visibilité)
  • noir, couleur de la nuit, des souterrains, du deuil.

Bien sûr, les évocations ne sont pas les mêmes pour tout le monde, et dépendent du contexte : contexte dans le document (texte accompagnateur, thème général), mais aussi contexte de la lecture (événement récents vécus par le lecteur).


Note : toutes les couleurs moyennement foncées sortent en gris à la photocopieuse noir et blanc…


À-plats et dégradés

Exemple de dégradés en 256 couleurs (haut) lorsqu'on les réduit en 16 couleurs (milieu, effet de bandes) ou en 256 niveaux de gris (bas, plus de différenciation des teintes)

Les à-plats peuvent permettre une mise en relief du texte (fond) ; c'est le principe du surligneur (type Stabylo Boss). Toutefois, à la photocopieuse, ils sortent de manière variable :

  • s'ils sont clairs, ils sortent en blanc (autre principe du surligneur) ;
  • s'il sont foncés, ils sortent en gris, mais le contraste est très variable.

Le problème est le même avec les dégradés, mais se rajoute en plus le problème du nombre de couleurs : si le système de restitution a moins de couleurs que le système de conception, on va avoir un effet de bandes désagréable. L'illustration ci-contre montre une image contenant trois dégradés de couleurs différentes (haut) en 256 couleurs, que l'on réduit à 16 couleurs (milieu, effet de bandes) et à 256 niveaux de gris (bas, plus de différentiation des teintes).

Notons également que pour une impression sur une imprimante à jet d'encre, les à-plats et dégradés sont très gourmands en encre.

Chartes graphiques

Une charte graphique (corporate design) est un ensemble de règles à respecter pour les documents, imposée par une organisation à ses membres. Ainsi, de nombreuses sociétés imposent les couleurs à utiliser et le type de caractères, renforçant ainsi l'image de la société, sa reconnaissance, et évitant les initiatives de « mauvais goût » qui pourraient nuir à l'image de la marque.

Si une association veut définir une charte graphique, il est conseillé qu'elle prenne en compte les remarques faites ci-dessus.

Mais l'association peut aussi être confrontée à la charte graphique lorsqu'elle veut reproduire le logo d'un parrain (sponsor). Dans un cas pareil, il faut impérativement se rapprocher du service communication de la société pour savoir s'il y a une charte graphique, et pour lui présenter le document avant de le reproduire en masse.

Voir même, si une société propose de prendre en charge la reproduction d'un document pour l'association, il faut prendre en compte la charte graphique dès la conception du document pour être sûr du rendu final.

Par exemple, le logo de la République française est soumis à une charte graphique définissant précisément les nuances du bleu et du rouge.

Notes

1. se pose alors le problème de la disponibilité du document ; si les machines neuves ont toutes un affichage d'au moins 65 000 couleurs, il ne faut pas pour autant exclure les personnes ayant un matériel plus ancien et envisager un affichage en 256 couleur, voire même en 16 couleurs, ce qui est en général largement suffisant

2. des études ont montrées que l'Homme n'intègre que 5 ± 2 éléments simultanément (donc entre 3 et 7 selon l'état de fatigue, les préoccupations…)
par ailleurs, on montre en mathématiques qu'il suffit de quatre couleurs pour colorier une carte sans que deux territoires ayant une frontière commune aient la même couleur donc quatre couleurs sont suffisantes, voir Théorème des quatre couleurs (http://fr.wikipedia.org/wiki/Th%C3%A9or%C3%A8me_des_quatre_couleurs) et Four color theorem (http://mathworld.wolfram.com/Four-ColorTheorem.html)

Voir aussi

  • Aide:Couleur
  • Test des couleurs (http://www.chez.com/deuns/pedago/test_couleurs.pdf), un fichier PDF de deux pages (25 Ko) reprenant les tableaux ci-dessus, et permettant de tester l'affichage et l'impression des couleurs
    si vous n'arrivez pas à afficher le document, cliquez ici (http://www.chez.com/deuns/pedago/pedago.html) puis cliquez sur le lien Tester les couleurs
Rechercher :  
  • Pages spéciales
  • Licence Urgencyclopédie
  • Avertissements