Problématique de gestion des couleurs pour la conception de sites web : les choses se compliquent !
Par davidm le dimanche, mars 25 2007, 12:46 - Webdesign - Lien permanent
On ne répètera jamais assez que la réalisation de site web est un domaine bien plus complexe qu'il n'y paraît du point de vue du non-spécialiste. Parmi les éléments qui entrent en ligne de compte dans la réalisation, la gestion des couleurs est un élément qui est bien moins simple qu'il n'y paraît... je peux le confirmer après plusieurs heures de recherche et d'expérimentation ce week-end (mon forum de prédilection n'ayant donné aucune réponse, et le seul autre post sur le même thème non plus, il a fallu creuser...), qui a été riche en enseignement concernant la gestion de la colorimétrie pour le web !
Je n'avais pas encore rencontré ce problème car jusqu'ici :
- j'ai toujours assuré la création graphique en plus de celle de l'intégration XHTML/CSS
- j'utilise un logiciel de graphisme dédié au web (MacroMedia FireWorks) et non polyvalent (comme PhotoShop qui fait à la fois "print" et web)
- je n'ai pas travaillé sur différentes plate-formes sur un même projet (PC -> Mac, et Mac -> PC)
Ce problème se résume en fait à celui de la gestion avancée des couleurs dans un workflow de production web, et en particulier lorsque les fichiers avec lesquels vous travaillez sont crées avec des applications de graphisme sur d'autres systèmes d'exploitation et/ou qui ne sont pas dédiées au web : Photoshop en est l'exemple même, puisqu'il s'adresse tout aussi bien aux créations pour le "print" que pour le web.
Cela suppose - nous verrons ça en détail - de prendre un certain nombre de précautions pour s'assurer que le rendu d'un site web est bien homogène d'une plateforme à une autre. Mais avant d'entrer dans le comment, retournons un peu au "pourquoi" et faisons un petit historique de la problématique de la gestion des couleurs pour la conception web, et essayons d'analyser comment l'évolution des plateformes a fait évolué la problématique pour nous, concepteur - réalisateur de sites web.
Sans rentrer trop dans la technique, il existe deux systèmes de représentation des couleurs. Le RVB avec 3 composantes : Rouge, Vert, Bleu et le CMJN avec 4 composantes : Cyan, Magenta, Jaune, Noir. Le CMJN est essentiellement utilisé en imprimerie alors que le RVB est utilisé pour les écrans, les scanners et les appareils photos.
En RVB (RGB en anglais), les couleurs sont codées sur 3 octets, fréquemment notées en héxadécimal sous la forme: #RRGGBB. RR représente la valeur héxadécimale de l'octet codant la primaire rouge, GG représente valeur héxadécimale de l'octet codant la primaire verte et BB la valeur héxadécimale de l'octet codant la primaire bleue. En principe, ce codage permet de définir 16 millions de couleurs : plus que l'oeil humain ne peut discerner.
En réalité, les choses sont (comme toujours), plus compliquées et le principe retenu a été de se limiter aux couleurs qui peuvent être représentées sur n'importe quel écran et n'importe quel système. Rappelons qu'il n'y a pas si longtemps il existait encore une disparité importante entre les plateformes (Mac/PC) et les cartes graphiques (16 couleurs, puis 256, puis 16 millions et maintenant plus de 4 milliards de couleurs).
La première approche de la problématique de gestion des couleurs pour le web : la palette "web safe"
Au milieu des années 90, lorsque les premiers navigateurs web sont apparus, il a donc fallu trouver un compromis entre les palettes Mac (plus riches) et PC (plus restreintes). On a ainsi abouti à la fameuse palette "web safe" composée des couleurs communes aux deux systèmes, soit 216. Aujourd'hui, les systèmes ont évolués et les limitations liées au cartes graphiques a virtuellement disparu (seul une minorité infime ne dispose pas des 16 millions de couleurs), ce qui ne veut pas dire que la problématique de gestion des couleurs ai disparu... Pour commencer, en dehors des professionnels, bien peu de personnes ont un écran correctement étalonné. Comment, alors, s'assurer qu'au moins on dispose d'un référentiel de couleur correct pour que l'affichage soit aussi homogène que possible suivant les plateformes / écrans de l'utilisateur ?
De la palette "web safe" à la colorimétrie : les choses se compliquent !
... c'est le moins qu'on puisse dire. Si l'on est théoriquement sorti de la restriction creative de la palette web safe grâce à la démocratisation des cartes graphiques capables d'afficher 16 millions de couleurs, on se heurte - dans la pratique - à une nouvelle problématique : les combinaisons de systèmes d'exploitation (OS X, Windows) - écran (LCD, CRT) - navigateur (IE, FireFox, Opera, Safari...) ne permettent pas d'aboutir à un rendu homogène des éléments graphiques. Obtenir un rendu homogène quelque soit le périphérique d'édition ou de visualisation, c'est précisémment le but de ce qu'on appelle les profils ICC, qui sont "des fichiers décrivant la manière dont un périphérique rend compte des couleurs".
Garry Ballard explique bien sur son site dans deux articles (en anglais) titrés www Target ColorSpace: sRGB 2.2 Gamma
et Color Shifts on the World Wide Web
quels sont les aspects principaux de la problématique de la colorimétrie pour le web.
Précautions à prendre pour s'assurer que le rendu d'un site web est bien homogène d'un point de vue colorimétrique
Après avoir lu ces deux articles de Garry Ballard, mais aussi l'excellent billet de Cédric Girard concernant les profils ICC j'en identifie 3 :
- hors d'une palette web safe, la prise en compte de l'espace colorimétrique est indispensable pour un rendu homogène des couleurs : Si les professionnels du "print", les astronomes ou les photographes sont familiers des problèmes de colorimétrie, c'est moins vrai des concepteurs web.
- les PC et Mac ayant des moniteurs étalonnés sur des gammas différents (1.8 pour Mac, 2.2 pour PC, TV...) le rendu colorimétrique d'une image conçue sur un PC sera "délavée" lorsque visualisée sur un Mac et inversemment une image conçue sur Mac sera sombre sur un PC. Cela signifie qu'un concepteur sur Mac (c'est mon cas) doit passer en gamma 2.2 pour s'aligner sur le standard de facto pour le web.
- seuls quelques navigateurs sont capables de prendre en compte un profil ICC : cela veut dire que si ces navigateurs afficheront correctement les images quelques soient l'espace colorimétrique dans lequel elles ont été conçues, la vaste majorité se repliera sur le profil par défaut (sRGB IEC61966-2.1, ou plus simplement sRGB) ce qui si le concepteur n'a pas prévu ce cas de figure conduira à des écarts de rendu significatifs (voir la page de test publiée par Garry Ballard)
Conclusion : en attendant que les navigateurs progressent, le couple sRGB / Gamma 2.2 est incontournable
Le domaine du "print" (presse, impression offset) maîtrise depuis longtemps la gestion de la colorimétrie. Force est de constater que les concepteurs de site web le sont beaucoup moins peut-être parcequ'ils se sont formés à une époque ou la palette "web safe" leur épargnait l'apprentissage des aspects de colorimétrie.
Peut-être aussi parceque très peu de navigateurs web interprètent ces données pourtant essentielles étant donné la diversité des plateformes permettant de consulter un site web (encore une fois, nous devons composer avec les limitations de l'environnement de développement actuel :P).
Aujourd'hui seuls Safari, Omniweb (même moteur WebCore) et Internet Explorer pour Mac supportent les profils ICC. Le reste des navigateur interprète toute image comme appartenant à l'espace sRGB (donc une image traitée sur Mac avec un profil Adobe 1998 est complètement délavée dans un navigateur sur PC). Il va donc falloir en tenir compte en se basant sur un profil sRGB et en vérifiant que nos moniteurs sont correctement étalonnés et sur une gamma de 2.2.
