Comment calibrer les couleurs pour le Web
Quand l'orange ressemble-t-elle plus au rouge? Les concepteurs Web, même les plus difficiles, ignorent parfois le changement de couleur entre les écrans.
Comment un concepteur Web gère-t-il les couleurs lorsque les écrans de leurs utilisateurs peuvent avoir n'importe quelle taille ou couleur ou être visualisés dans n'importe quelles conditions d'éclairage?
Contrairement à la correction des erreurs HTML, qui affectent les navigateurs au fur et à mesure du chargement de la page, l'obtention de couleurs précises fait partie du processus de travail du concepteur.
Le maintien des couleurs à travers les projets est possible une fois que les problèmes sont compris. Lisez la suite pour les défis et les solutions pour obtenir des couleurs homogènes sur le Web.
Pouvez-vous repérer la différence entre les photos ci-dessous?
L'une des images est légèrement plus bleue que l'autre. Ce "changement de couleur", ou teinte globale d'une teinte particulière, pourrait passer inaperçu par l'observateur occasionnel. Après tout, un léger changement de teinte n’en fait pas moins une fleur ou n’enlève rien aux détails de la goutte de rosée. C'est un changement cumulatif.
Au fil du temps, les images JPEG de qualité maximale et les icônes PNG à 256 couleurs consomment de la bande passante précieuse. La complexité en HTML augmente la charge de travail du navigateur à chaque chargement de page. Contrairement à ces problèmes, qui s’ajoutent lorsque les visiteurs naviguent sur le site Web, la gestion des couleurs pose problème lors du processus de conception . Les images créées sur un moniteur non étalonné deviennent incohérentes au fil du temps.
Le changement de couleur pourrait prendre un autre nom: inattention.
Quand peut-on dire que la couleur d'un graphique correspond suffisamment à la page? À quel point la couleur d'une photo est-elle trop inexacte? Quels détails n'ont pas d' importance pour le projet dans son ensemble? Chacun peut avoir des réponses différentes, mais quiconque prend au sérieux les images numériques peut ignorer le calibrage des couleurs.
L'industrie de l'imprimerie a du mal à obtenir des couleurs précises pendant des décennies. S'assurer que les mêmes couleurs apparaissent à tous les stades de la production, y compris sur divers moniteurs, imprimantes de bureau et presses haut de gamme, a donné naissance à son propre secteur des appareils d'étalonnage, des solutions logicielles et même des normes ISO.
La communauté de la conception Web ne se préoccupe généralement pas des contrôles de presse. Mais peut-être que ça devrait.
Le Web a eu des problèmes de couleur depuis qu'il est de couleur
Dans les années 1990, obtenir des couleurs précises sur le Web signifiait utiliser une palette de 216 couleurs «Web-safe». Ces teintes et nuances étaient (principalement) garanties pour ne pas jaser lorsque affichées sur des moniteurs ne pouvant pas gérer plus de 8 bits de couleur.
Ci-dessus, un dégradé avec et sans tramage. Aujourd'hui, la grande majorité des ordinateurs peuvent afficher des couleurs 24 bits ou mieux (selon ces statistiques d'affichage du navigateur et le suivi Google Analytics des sites Web, y compris Webdesigner Depot). Autrement dit, chaque pixel peut afficher des millions de couleurs, ce qui rend le calibrage à la fois compliqué et plus critique.
Le Web a longtemps utilisé des codes hexadécimaux, tels que # F35C23, pour définir les couleurs. Ces chaînes de six caractères peuvent afficher une grande variété de teintes et de valeurs avec une grande précision. Une image qui a # F35C23 et un arrière-plan CSS dans # F35C23 correspondra parfaitement.
Le problème est que le code définit une combinaison de rouge, de vert et de bleu mais ne produit pas toujours des couleurs cohérentes. Les écrans d'affichage expliquent la différence.
Le blanc est blanc, sauf quand il ne l'est pas
De nombreux facteurs affectent la précision des couleurs lors de la création et de la modification d'images numériques. Comme pour l'impression, la couleur sur le Web dépend de l'environnement dans lequel l'image est créée. Contrairement à l'impression, les images Web peuvent changer à chaque fois qu'elles sont affichées, car les moniteurs varient, et aucune vérification de la presse ne permet de détecter les problèmes.
Bien que de nombreux navigateurs Web modernes puissent afficher
Mais tous les moniteurs ne sont pas construits de la même manière, et une nuance particulière d’orange peut donc être incohérente sur différents écrans. Voici quelques causes du changement de couleur:
- De légères modifications entre les fabricants et les modèles expliquent les légères inexactitudes concernant la teinte et la teinte.
- De nombreux écrans (en particulier les moniteurs CRT ) changent de couleur au fil des années et même s’ils se réchauffent au cours d’une journée.
- Jusqu'à récemment, Mac OS X et Windows utilisaient deux «gammas» différents, ce qui signifiait que les images sur Mac semblaient plus lumineuses que celles sur PC. Mac OS X 10.6 (Snow Leopard) utilise le gamma le plus courant de 2.2 , qui est le même que Windows et de nombreux téléviseurs et caméscopes.
- Les gens naviguent sur le Web à partir de différents endroits et dans différentes conditions d'éclairage. L'effet des plafonniers et la quantité et la couleur de la lumière naturelle affectent tous l'apparence de la couleur sur l'écran.
Au-dessus, un étalonnage différent montre que "blanc" est souvent une couleur supposée:
- L'image originale, prise sous un éclairage fluorescent avec un appareil photo à prise de vue.
- Changement de couleur approximatif sur un Mac avant Snow Leopard.
- Décalage de couleur approximatif sur un moniteur CRT vieillissant.
- Proche de la vraie couleur, comme on le voit sur l'ordinateur portable sur lequel la photo a été traitée.
Un moniteur légèrement rouge peut montrer un bleu parfait comme légèrement violet, ou montrer un vert avec une teinte jaune. Les moniteurs trop lumineux effaceront les ombres et les reflets; Les écrans trop sombres risquent de créer des ombres et d'augmenter les risques de changement de couleur dans les hautes lumières. Pour les concepteurs soucieux de ces détails, le contrôle de la qualité est définitivement un défi.
Changement de couleur PNG
En termes simples, la valeur gamma modifie la luminance d'une image affichée. Conçu pour l'affichage numérique, le format d'image PNG permet aux concepteurs d'ajouter une correction gamma à chaque image. Mais sans connaître la luminosité du périphérique de sortie (c'est-à-dire sans connaître le type de moniteur sur lequel l'image apparaîtra), les concepteurs ont du mal à ajouter une correction gamma précise.
Cette caractéristique est devenue le problème le plus notoire de PNG. Sur le Web, une image correspond parfois aux couleurs hexadécimales spécifiées dans le CSS et d'autres fois, elle ne le sera pas, même si elle a été créée avec la couleur correcte.
Des programmes tels que PNGCrush (Windows) et PNGenie (Mac) peut supprimer les informations excédentaires des fichiers PNG, y compris le paramètre gamma, ce qui rend la couleur plus fiable.
Autres issues
Prévenir le changement de couleur peut exiger des changements dans la façon dont les concepteurs travaillent. Le mauvais étalonnage des couleurs se démarquera avec le temps. C'est l'un de ces détails de conception dont on ne parle pas et qui ne devrait pas être remarqué.
Solutions industrielles
Diverses solutions ont permis de mieux gérer les couleurs et d'éviter les changements de couleur.
le International Color Consortium (
Les profils ICC sont des fichiers contenant des informations sur la couleur d'affichage des différents périphériques. Les imprimantes et la plupart des ordinateurs sont livrés avec des profils ICC intégrés, car leurs fabricants savent exactement comment ils fonctionnent. Mais les profils ICC personnalisés peuvent adapter un dispositif particulier à certaines conditions, par exemple lorsqu'un moniteur est utilisé sous des lampes fluorescentes, par opposition à une grande fenêtre.
En plus de faire correspondre les couleurs sur tous les écrans (et dans l’impression), Adobe Flash Player 10 prend en charge les profils ICC , permettant la gestion des couleurs entre Flash et les imprimantes (en supposant que l’imprimante de l’utilisateur final utilise un profil ICC).
En 1996, Hewlett-Packard et Microsoft ont défini le standard rouge, vert et bleu (
Ces solutions techniques sont des réponses de la part des organisations professionnelles. Mais les concepteurs peuvent également prendre des mesures pour que leur travail reste constant au fil du temps.
Conseils pour préparer une pièce pour le travail de couleur
Quel type de lumière utilisez-vous maintenant? Si vous lisez ceci dans votre espace de travail principal, et si la couleur exacte est importante pour vous, alors vous pouvez prendre des mesures pour améliorer votre espace de travail dès maintenant.
- Dix secondes par demi-heure
Faites une pause rapide et regardez une carte grise à 18% . Regarder la même carte dans les mêmes conditions d'éclairage est un bon moyen de "réinitialiser" vos yeux. (Remarque: les puristes recommandent des cartes grises à 12%. Elles conviennent également, aussi longtemps que vous utilisez la même carte à chaque fois. Le but est de regarder quelque chose de cohérent et de neutre.) - Dix minutes
Déplacez votre moniteur de la lumière directe. Ne laissez jamais une source de lumière frapper directement l'écran. - Quinze minutes
Supprimez les accessoires de bureau colorés (calendriers, marqueurs, photos, dossiers, tout ce qui n’est pas gris) de votre ligne de mire. Si votre moniteur est réfléchissant, ne gardez pas les objets colorés directement derrière vous. - Dix minutes par jour
Laissez vos yeux s'adapter à l'environnement avant de commencer le travail. Donnez à vos yeux le temps de s’adapter à l’espace de travail, surtout si vous venez juste de sortir du soleil ou de l’éclairage extérieur de la nuit. Si nécessaire, utilisez une minuterie. - Dix minutes par semaine
Nettoyez votre moniteur. Utiliser un chiffon non pelucheux pour enlever délicatement les taches de poussière et d’empreintes digitales, ou consultez le manuel de votre propriétaire pour les instructions de nettoyage. Faites la même chose avec vos lunettes si vous les portez. - Un jour ou deux
Couvrir les fenêtres à proximité avec des écrans épais ou des rideaux. Les principaux avantages de la lumière naturelle sont la précision - il est difficile d’être plus naturel que la lumière du soleil et la disponibilité. Mais la lumière naturelle varie. Il change tout au long de la journée, avec la météo et les saisons. - Un weekend
Entourez votre espace de travail de gris neutre. Peignez les murs et remplacez les meubles sombres par quelque chose de fade. Idéalement, votre bureau ne devrait refléter que 60% de la lumière qui le frappe. GTI Munsell Peinture Gris Neutre est populaire parmi les photographes pour créer des arrière-plans neutres. - Un week-end ou un temps d'expédition
Si vous n'êtes pas en mesure d'ajuster l'éclairage de votre bureau, acheter ou assembler une hotte de moniteur pour éviter l'éblouissement et les conditions changeantes.
Conseils pour calibrer votre moniteur
Le but de l'étalonnage est d'éliminer les changements de couleur et d'optimiser la plage tonale de votre moniteur. Les ombres doivent être riches mais présenter des détails. Les points forts les plus brillants ne doivent être ni trop chauds ni trop froids. À long terme, cela permet d'obtenir des couleurs précises et cohérentes.
Voici les étapes générales:
- Réchauffez votre moniteur pendant au moins 30 minutes.
- Sélectionnez gamma (5000-9500 ° K, gamma 1.8-2.2).
- Trouvez les meilleurs points blancs et noirs.
- Équilibrez le rouge, le vert et le bleu pour empêcher les couleurs de couler.
- Répétez ce processus tous les mois.
De nombreux programmes vous guideront à travers ce processus. Adobe Gamma est une solution rapide populaire pour l'étalonnage des écrans CRT. En plus d'être facile à utiliser, l'achat est gratuit avec Photoshop ou Photoshop Elements. D'autres solutions sont QuickGamma (Windows) et Le Spyder de Datacolor calibrateur matériel.
Couleur moi Picky
Une couleur précise et cohérente est l’un des détails mineurs que la plupart des gens, y compris les concepteurs de sites Web, choisissent d’ignorer face aux erreurs d’analyse, aux normes Web, aux informations erronées des clients et à la pression exercée sur les délais.
Mais c'est également l'un de ces éléments qui permet une meilleure expérience globale. Une fois que les concepteurs commencent à remarquer des écarts de teinte et des ombres boueuses, ne pas vouloir faire un meilleur travail deviendra inhabituel.
Écrit exclusivement pour Webdesigner Depot par Ben Gremillion. Ben est un freelance concepteur web qui résout les problèmes de communication avec une meilleure conception.