Salut.
Dans la conférence d'aujourd'hui, nous allons parler de couleurs.
Avant de me lancer vraiment, je veux juste vous rappeler que je suis
un informaticien, et que l'art et le design ne sont pas nécessairement mon expérience de base.
En fait, je suis assez mauvais pour ça.
Donc ce dont je vais vous parler aujourd'hui quand je parle de couleurs
est la meilleure façon de coder les couleurs.
Au lieu de cela, quand vous êtes vraiment à la recherche de
conseils sur ce que les meilleurs jeux de couleurs vont être.
Je vais vous diriger vers différents endroits en ligne et
vous laisser utiliser votre propre expertise pour trouver ce qui se passe le mieux les uns avec les autres.
Mais commençons par la façon dont nous utilisons les couleurs sur votre page Web.
Nous parlons des trois conventions de couleur de base différentes,
les principales que les gens utilisent.
Conventions n'est qu'un autre mot pour les suggestions.
Ce n'est pas une règle.
Tu n'as pas à suivre les règles que je vais te donner.
C' est juste la façon dont la plupart des programmeurs programment pour
qu'ils puissent comprendre ce que vous essayez de faire, quand ils regardent votre code.
Une façon que vous cn ajouter de la couleur est simplement d'utiliser le mot anglais.
Bleu, rouge, jaune, etc.
Ces fonctionnent, et ils apparaîtront bien sur votre page.
Le problème est, c'est qu'il n'est pas cohérent à travers les pages.
Ce qui est jaune à un navigateur n'est pas exactement la même nuance
de jaune à un autre navigateur.
Donc, en général, nous évitons les noms de couleur lorsque votre projet final arrive.
Lorsque vous êtes juste codage et piratage,
vous voulez juste afficher quelque chose sur l'écran.
Pas de problème.
Utilisez le bleu ou le rouge ou le jaune, puis plus tard ce que vous allez vouloir faire.
Ça a changé quand ces deux autres conventions dont je vais parler.
Le premier est appelé hexadécimal.
Hexadécimal vous pouvez reconnaître la partie décimale,
c'est comme ça que nous comptons de zéro à neuf.
Hexadécimal signifie juste qu'ils ont seize chiffres au lieu de dix.
Donc, vous pouvez utiliser zéro à neuf, mais aussi A, B, C, D, E et F.
Et F est un peu comme le nombre le plus fort, le plus puissant que vous pouvez utiliser.
Lorsque vous faites hexadécimal, il est toujours configuré de la même façon,
où vous avez un signe de livre suivi de trois ou six chiffres.
Les exemples que j'ai ici pour vous sont à six chiffres.
Et la façon dont cela fonctionne est que vous avez une valeur rouge, verte et bleue, et
plus le nombre que vous mettez là est grand, plus vous verrez rouge, vert ou bleu.
Alors voici mon exemple.
J' ai un exemple de bleu, rouge, mais
aussi jaune parce que selon la quantité de ces différentes valeurs que vous mettez,
ça peut changer la couleur qui va apparaître sur votre écran.
Maintenant, hexadécimal est probablement la façon la plus courante de faire des couleurs quand vous
regardez beaucoup de pages de gens, mais une autre façon qui arrive beaucoup est le RVB.
Encore une fois, c'est la même idée que nous avons le rouge, le vert et le bleu,
mais au lieu d'utiliser ce genre de nombres hexadécimaux étranges, le zéro à F,
vous utilisez plutôt des nombres entre zéro et un.
Donc ici, j'ai fait la même chose, je viens de faire un, un, et un, un.
J' aurais pu tout aussi facilement mettre 0,5, 0,8, 0,6, et
cela changerait la force de la couleur.
Donc ici, j'ai rgb (0,0,1).
L' une des raisons pour lesquelles les gens sont passés à rgb est qu'il existe
une autre option appelée rgba.
Et pendant le plus long temps, j'ai vraiment dû réfléchir à ce que cela signifiait et
ce qu'il représente, c'est la transparence alpha.
Donc vous avez une quatrième valeur à la fin qui dit, vous savez quoi ?
Je veux utiliser cette couleur bleue, mais je veux le faire voir un peu.
Donc quand ça arrive,
si je devais vraiment le faire zéro, il serait complètement vu à travers.
Si je devais lui donner une valeur finale de un,
cela ressemblerait à la valeur RVB régulière.
Maintenant, l'une des choses intéressantes à noter est que, si vous regardez cette vidéo en ce
moment et qu'il y a quelqu'un à côté de vous qui regarde la vidéo sur leur écran.
Il est absolument possible que si vous regardez par-dessus, ça a l'air différent.
Vous devez vous rappeler que différents moniteurs peuvent afficher les couleurs de
différentes manières, d'accord ?
Donc, je veux vous montrer un exemple très rapide sur le web
de la façon dont vous pouvez voir certaines de ces différentes couleurs et comment elles fonctionnent.
Ce que j'ai évoqué ici, c'est ma page de cours et c'est bon si tu ne peux pas le voir.
Je sais que c'est un peu petit.
Ce que je veux vous montrer, c'est que j'utilise quelque chose appelé Inspect Element
pour vraiment regarder ma page, et regarder les couleurs,
et un moyen vraiment rapide pour moi de voir comment je peux le rendre différent.
Donc j'ai ma souris, juste là.
Je vais cliquer avec le bouton droit de la souris, et je vais descendre à Inspecter Element.
Maintenant, pour certains d'entre vous, cette partie peut apparaître sur le côté ou en dessous.
Vous pouvez le déplacer en cliquant sur ce bouton ici.
Mais comme vous pouvez le voir, je vais mettre en évidence mon h1 et descendre ici jusqu'à la travée.
Et tu peux être comme oh, il y a la couleur que j'utilise.
Je vais aller de l'avant et cliquer dessus, et comme vous pouvez le voir,
je peux en fait en temps réel, sorte de jouer avec quelles couleurs différentes je veux.
Je l'aime mieux que le bleu et
vous pouvez voir qu'il change la valeur hexadécimale pour moi là-bas.
Donc si je le voulais,
je pourrais trouver la couleur parfaite, ce vert n'est pas la couleur parfaite.
Je pouvais trouver la couleur parfaite, saisir cette valeur hexadécimale et
mettre dans ma feuille de style.
Ils vous donnent également l'option de la valeur RGBA ainsi
vous pouvez le faire comme vous le souhaitez.
J' aime utiliser l'élément attendu pour jouer avec les couleurs parce que c'est
tellement plus facile quand vous pouvez voir ce qui se passe comme vous le concevez.
Si vous voulez vérifier quelque chose d'autre, je peux même descendre ici, chaque chose que vous
mettez en évidence, vous pouvez ajouter des couleurs, faire des choses différentes le long de la même ligne.
Donc je ne suggérerais pas ça, mais je vais ajouter une couleur de fond.
Et comme vous pouvez le voir, ils ont les noms réels.
Parce qu'il est très peu probable que si vous deviez faire défiler les différentes
valeurs hexadécimales, vous ayez une idée de ce dont il parle.
Et au lieu d'utiliser réellement le mot beige, une fois de plus je peux cliquer sur cette case.
Il va apparaître la valeur hexadécimale pour moi.
Donc c'est là que ça peut devenir vraiment amusant et vraiment mauvais,
parce que tu peux juste commencer à tomber dans ce trou de lapin.
Et tu es comme, oh j'aime cette couleur.
Non, cette couleur est meilleure.
Vous commencez, vous commencez, choisissez une couleur, jouez avec elle, et
continuez avec elle.
Mais revenons en arrière.
Une des choses qui se passe quand les gens utilisent la couleur est qu'il y a cette
tendance vraiment naturelle à vouloir utiliser la couleur pour souligner quelque chose, ou
expliquer à quel point quelque chose est important.
Vous avez peut-être vu quand vous avez rempli des formulaires,
assurez-vous de remplir tout ce qui est en rouge.
Eh bien, cela peut être un vrai problème en matière d'accessibilité.
Et je veux que vous soyez sûr que vous essayez de penser à la
façon la plus appropriée d'utiliser votre couleur lorsque vous concevez votre page.
Et l'une des choses que vous devez penser est qu'il ne suffit pas de penser,
oh quelqu'un peut utiliser le lecteur d'écran.
Je vais utiliser des balises HTML pour vraiment m'assurer
qu'ils peuvent récupérer la sémantique de la page.
Non, il y a beaucoup de gens qui examinent votre site qui ne sont pas légalement aveugles.
Au lieu de cela, ils sont malvoyants ou simplement aveugles.
Ils sont, beaucoup plus de gens sont aveugles que vous n'auriez jamais eu.
Donc, vous voulez vous assurer que lorsque vous utilisez votre page,
vous pensez à savoir si les couleurs transmettent un sens ou simplement du style.
Alors pensez à votre contraste de couleur et quel contraste de couleur il que
lorsque vous regardez une page est le texte sur une bonne couleur pour l'arrière-plan ?
La plupart d'entre nous savent intuitivement quand quelque chose a vraiment un mauvais contraste de couleur.
On plissait dessus.
Mais pour être honnête,
très peu d'entre nous savent quel est le niveau exact de l'endroit où vous devez aller.
Vous pouvez donc utiliser différents outils
pour quantifier le contraste entre le texte et sa couleur d'arrière-plan.
J' ai mis deux liens ici.
Wave.waveaim.org et le vérificateur de contraste Wave.
Et je vais vous montrer juste un exemple rapide de la façon dont vous pouvez les utiliser
pour vérifier une page.
Donc, je vais par ici, et j'ai le wave.webbing.org.
Et vous pouvez aller de l'avant et vous pouvez taper n'importe quelle URL que vous voulez ici.
Je vais aller de l'avant et mettre ma propre page web personnelle d'UMIH,
qui pourrait changer au moment où ça arrive.
Et, comme vous pouvez le voir, vous pouvez aller ici et il va vérifier vos styles,
il va vérifier vos différents HTML.
Mais si vous vérifiez où est ma souris, vous pouvez également vérifier le contraste.
Et ça va entrer et ça dira, non, ça a l'air bien.
Aucun problème de contraste de couleur n'a été détecté.
Vous serez surpris de voir combien, cependant, vous obtiendrez des exemples.
Ils peuvent être extrêmement pointilleux et si c'est vraiment quelque chose que vous sentez fortement
que vous pouvez voir, absolument, rester avec elle.
Mais tu veux prendre leurs suggestions avec un grain de sel.
La seule chose dont je voulais vraiment vous parler à nouveau,
c'est juste cette idée de ne pas utiliser la couleur seule pour transmettre un sens.
C' est un type typique de graphique à barres pour les gens à utiliser les couleurs pour dire, hey c'est
combien part est Apple iPhone, le Pre Palm, différentes choses le long de cette ligne.
Alors regardons ce même graphique, mais en niveaux de gris.
Et soudain, vous pouvez voir que c'est à peu près inutile pour quelqu'un qui essaie vraiment de
choisir ces parties au milieu où les couleurs sont extrêmement similaires.
Au lieu de cela, si vous allez utiliser un graphique comme celui-ci,
je ne dis pas que vous ne pouvez pas, je dis assurez-vous que vous offrez des alternatives.
Assurez-vous que vous avez un autre texte ou que vous avez une légende ou un
autre endroit où les gens peuvent créer un lien pour obtenir ces informations.
Très bien, donc je sais que je n'ai pas beaucoup parlé des différentes couleurs que vous pouvez
utiliser, ou des différentes couleurs qui vont ensemble, encore une fois,
parce que ce n'est pas vraiment quelque chose dont je dois vous faire la leçon.
C' est quelque chose que vous pouvez partir seul et apprendre.
Ce que je voulais que vous compreniez, c'est comment fonctionnent ces différentes conventions de couleurs.
Comment vous savez que vous pouvez utiliser hexadécimal ou RGB, RGBA, ou
même les mots eux-mêmes, mais vous voulez en quelque sorte sortir.
Enfin, quand vous avez fini,
quand vous avez vos couleurs, ne vous y attachez pas trop.
Parce que vous serez surpris de voir combien de
fois, lorsque vous consultez votre site à l'aide d'un vérificateur de contraste, que ce que vous pensez être
vraiment génial n'est pas quelque chose qui est accessible à tout le monde.
Alors amusez-vous avec les couleurs.
Utilisez l'élément inspecter.
Tout le monde aime jouer avec ces différents éléments de conception de votre page.
Et j'espère que vous avez appris quelque chose ici qui est utile pendant que vous continuez à
programmer, et continuez à coiffer votre site.