 Mae'n ddweud o bwysig oherwydd ein bod yn eich gweithio'r sefydliadau. Ond efallai rydyn ni wedi'u gweld. Fel y gallwn i'r gweithio, sy'n fydd ei fod yn ddod o'r hyn o'n ddod o'r gwheithio. Yn rwy'n ddod o'r gweithio, gallwn i'n ddod i'n ddod o'r gwheithio ymlaen. Mae'n ddod o'r gweithio'n ddod o ddod o'r gwheithio. One we go to the supermarket we were able to identify varies in fruit immediately because of the colour. Also when we our ancestors were out in the field foraging, it was extremely useful to be able to identify poisonous fruits from animal ones. So very useful. Also of course we can build complex navigational systems thanks to colour. Alun and underground map is a very important case in HAN because we immediately identify lines by colour. Not always a good thing to rely solely on colour, as we also see. In this case we also see position, shape, there's other things that can't be used as well as name. Colour also in nature provides a warning, you can scream out, don't eat me, or make love to me, or don't dare touch me because you will die, even though I look very beautiful. So keep on. Also in the case of traffic lights, please go right me if I'm wrong, but as far as I know, I think this is a case where it's a completely globally this means, these colours mean the same thing. Reddy's stop in your tracks straight away. Pamâr is you may begin to start moving with caution and really all systems are going. As far as I know this is the one case where colour means the same internationally everywhere on a global level, Caerdydd yn y lluniau a'r ffordd i gyfnodd yn ychydigol, yn y lluniau, y lluniau a'r ffordd i'r gwasanaeth. Ac mae'r lluniau yn helpu hynny i fynd i'r gwasanaeth. Fe yna yn mynd i'n gwneud y pethau cyfnodd, mae'r lluniau yn y lluniau yn y gwasanaeth. Mae'r lluniau yn y gwasanaeth yn y gwasanaeth. Mae'n eu gwasanaeth yn lluniau, ac mae'n gallu angen y gwasanaeth, both on the web and in real life, but things are very different because even though it might seem obvious to us these days that colour is light because we're web professionals and we work with monitors and we know that colour on our monitors is made with light, the first to associate colour in light was Eislad Newton in the 1660s when he was carrying out experiments on optics, not on colour, it was experiments on optics, and he had this glass prism in the shape of an upside down pyramid and a rail of light coming in from the window and going through the prism and being projected on the opposite wall and fragmented in this rainbow. Now, this is the first time that colour is actually seen as something that resides in light rather than on things. This was truly revolutionary at the time for a number of reasons. First of all, colour is now a continuous gradient, there's no clear demarcation, therefore that means that it could be many more colours than was thought possible until then. And it also metaphysically, you sort of, you fragment matter in a way, and so what was white now becomes full of colour. Also another really important mental shift is that this sort of rainbow colour, which is ethereal, it's not made of pigments, doesn't have black or white in it. So for the first time, a list of colour doesn't have black or white. White is pure light, and black is absence of light, but they're not within this list of colours. So a huge, really revolutionary way of looking at colour. So this is what happens, this, what we see is the visible, what is called the visible light spectrum. So the electromagnetic spectrum, as far as I understand it because I am no scientist at all, but as far as I understand it is basically the energy that comes from the sun is what keeps us alive. And it's made of, there are a lot of rays and parts of electromagnetic spectrum that we don't see at all. That's why it's called spectrum, which in Latin means ghost, so something that you can't see. The only visible part is the visible light spectrum and that's what colour is light, and it's tiny and it goes from red to violet, but there's no white and no black. So colour does not exist without light. No light means no colour. That is, you could argue the same on and off the web. So fast forward from Newton's experiment to the web, and this is exactly, we're basically on the web, we're using a Newtonian colour model, where white is the sum of all colours and black is the absence of light. So we use the RGB colour model where red, green and blue are the primaries and it's called additive colour because when the three rays overlap you get white, and when there's no light then you get black. It's as simple as that exactly in Newton's colour model. Now in the real life things are very different, and colour is called subtractive because when all colours overlap, and now it depends this various models, we won't get into the complications of how many colours, but when colours overlap they form black. And in the real world the colour that we see depends on a number of factors. It's colour bouncing off the surface, it's being reflected, it's being scattered. It also depends on obviously on lighting conditions and on other environmental factors. So it's very different, but it still depends on light because it's only thanks to light that we can see colour. Now this is the red, yellow and blue colour model which is what's used in art theory and when the colours overlap you can see very clearly that black is the result and the primaries are red, yellow and blue. Again additive colour, red, green and blue and when they overlap the result is very different. Now the RGB gamut comprises nearly 17 million colours and actually it's almost, we're spoiled for choice literally because the human eye can only identify about 7 million of them and some of us don't even get that. So it's almost wasted on us that we've got these amazing monitors that can show the four range. Now back again to Newton, he was also the first one that thought of taking these rainbow colours and flattening it and turning it into a wheel. He also realised that in order to get more colours you needed to overlap various prisms because otherwise Christmas and Magenta doesn't come out straight away. But the important thing about creating a wheel after the colours was that you would finally be able to see relationships between colours and create, start reasoning about it so it was sort of the beginning of colour theory. However something really important really needed to happen, still needed to happen which is Johann Goethe who's a German, my apologies to any German in the room because I don't know how to pronounce his name correctly but apart from that. So he was a romantic writer who started writing about colours and he wrote two very important treaties and sort of ended out completely voting his life to it. He kind of took the opposite stance to Newton because he argued that Newton's vision didn't really apply to real life because apart from when light goes through a prism that's not how we see colour. There's no practical application, you need to fast forward to monitors and screens and the internet to have a practical application in real life. So he also argued that Newton didn't take into consideration how other factors influenced the way humans see colour. And that was quite revolutionary as well, there wasn't anything that people had thought about yet. He also argued that whites and black are not simply for light or no light, he argued that colours don't stop existing in darkness. So he also created a colour wheel as well but he was the first to actually create relationships between colours and for instance say that opposite colours attract which is the complementary colours and so on. And this we're getting closer to colour theory as we know it and to colour science as well although he wasn't quite a scientist because he was a romantic. But this is a contemporary painter called Otto Runge who built his spheres and colour models that did take shade and light into consideration to reiterate the fact that actually colours don't cease to exist in darkness or in light. This doesn't take brightness for instance or saturation into consideration but it's a step forward to considering colour as a phenomenon rather than just a physical light spectrum. So fast forward a few centuries, a couple of centuries at least to the colour wheel as we know it and you'll find it you see the 12 colours wheel that's come to us. Some of the other artists and theorists have developed different versions of the colour wheel like Chris has written, Alvis and others and however I am not going to suggest that you use the colour wheel to create your palates, why? Because the colour wheel and colour harmony are actually incredibly complex unless you are an expert of colour or aspire to be it's not really the ideal thing to do if you want to create a good UI for your websites. Why? Because there's no guarantee that the hues will help you because if you look at the colour wheel these are simply colours. It doesn't take anything else into consideration and most forms of colour blindness actually have to do with hue that is to say colour and we'll see how that works. Now the really important thing to know about the colour wheel, the one thing that we need to remember is that it's about complementary colours. So complementary colours sit opposite one another on the wheel and while they're very pleasing to the eye because opposite they attract but they also repel because there's one situation where you should never use complementary colours and that's in text colour combinations. Text colour schemes just don't use, I mean they vibrate to me, I also have am astigmatic and I have another small vision aiming that means to me that vibrates like how it's kind of low. And this is the worst one of all, this is terrible because also one of the most common colour blindness issues means that sufferers can't really have problems telling red and green apart so this wouldn't be eligible. And also in this particular combination something that happens a lot so if you stare at this now stare at it and then look somewhere lighter look there. You see a phantom image of that but you see it very strongly because it's an image that vibrates so much. Well that's obvious to us now but it wasn't at the time of Goethe. He observed, was the first to observe this phenomenon when he was in a cafe and saw this woman with this really strong red dress and with a really strong colour contrast and he looked at the wall next to her and he saw this sort of phantom image. And it was the first time that this was noticed and it's incredibly important because he was the first to observe that actually the mind produces colours that don't necessarily exist in real life and this was also a revolutionary observation. This is called posthumous colour and if you look at complementary and posthumous colours will you see that the posthumous colour is kind of a paler version of the complementary colour so with red you have this sort of pale green and so on. But the most important thing that Goethe also did other experiments like for instance a candle in the sunset saying that the shadow looks blue even if effectively it isn't blue. So the important point was that the mind can make up colours that are not there and that we interpret colour in a different way according to a number of almost unpredictable factors. They're physiological, they're physical, they're environmental, they're cultural as well so basically colour is an opinion. That's it and how because we can't predict about it. Now is this blue or gold? I'm asking. Who's for blue? See he's actually quite shocking to me that there are so many people who are actually for gold. Can I see their hands up for gold? They're quite a few. I mean to me that is so blue. There's no question but the point is that if you don't see it as blue then you don't see it as blue. Then another one is this one. What colour is that? I mean to me that's black and brown. Black and brown. Blue? That's extraordinary. Anyone see it as white? I've had a lot of whites before. People have seen that over in blue. So to me that's extraordinary. I don't actually know. I know for instance for the blue dress I know for a fact that that dress is blue. That's a fact. We know that. In the case of this jacket I don't know but that's a fact because there is a blue dress and that's the one that was photographed. I know we live in a post fact arrow. This is true. In this case I don't know. In this case I do know. What is it? Is this pink or grey? Who's the pink? Yes. And grey? The rest are grey. There's quite a lot of grey. To me this is without a doubt it's pink and white. What I know is that because I'm also a photographer I play with colour for my life. I know that my mind is equipped to filter out the bad lighting, the rubbish lens so I can see the pink because I filter everything out. But in spite of that because in fact we know again that in real life this is a true thing. But I was challenged to go by the grey brigade to go into Photoshop and check with the colour picker. It's grey. It's absolutely grey. That was a golf match. I was like you mean I'm wrong. So this is grey but basically this confirms that my colour vision is as valuable as yours is as valuable as mine. There's no right or wrong. If you see gold that can't tell you no. You must see blue because you see gold. That's it. Even in a case that what's really interesting to me that even we are seeing it in exactly the same conditions. We're seeing the same thing. It's not as if we're in a different room or it's exactly the same conditions and yet we can't agree on what colour is. We don't need to agree. I have to accept that you see gold and I see blue and you see greyness and pink. That's fine. Absolutely fine. But that's because there is no absolute colour truth then colour can't be chosen on and with and we must make sure that colours are accessible and that's why you cannot rely on hue. Because as we were saying colour blindness depends on you and hue and not other factors. So many people don't even know actually that they're suffering from a form of colour blindness. In my family we found out that my brother he was going to a wedding and he was desperate to wear a tie that looked horrendous with his suit because he was convinced that that was a red tie. So a lot of people don't even know and 8% of men is at very high percentage. It's not to be ignored. And 0-5% of women because usually women carry the gene but don't suffer from it. It's quite rare that they carry it and suffer from it. So there's no need to remember or know what the different types of colour blindness do because luckily these days in the world we have loads of different tools that we can use that really help with that. So there are techniques that you can follow and use to create a safe colour palette for your UI. And that's why you should rely on colour harmony on the group because that is based completely on hue. So if we look at the HSB system which means hue, saturation and brightness this is where we can find the way. So hue is simply another name for colour. Hue is the colour of the rainbow. Pink is a hue and exactly the same as colour. Saturation is the intensity of that colour. Sometimes it's called purity but I don't like that so much because if you say that a colour is impure you're kind of implying something to make it impure. Whereas it just means that it's less rich and brightness is the amount of light that is in a colour. To me that's the most important and most interesting quality of colour that we must look at. So hue as we were saying is colour of the rainbow. It's simply the position of the colour on the wheel because the wheel is a circle. So you can position colours on the wheel and that's really really helpful because if you sort of keep a picture of that you're always going to know that 0 is red and 90 is yellow and 180 is green and so on. So I won't go too deep into the system because it's actually a three-dimensional system but here we're seeing it flattened out. So for instance again I'm going to say it again that there are a hue just so that we're clear that that's the most important thing to bear in mind. Now in the colour picker this is a green colour. Well I see it as green. God knows what you see it as but to me that's a teal colour. And it works if you look at the position of the hue that's at 176 degrees so it works with what we just saw. And it's 100% saturation and 50% brightness. This is a photoshop colour picker but any colour picker will do. And we're ignoring what happens on the right because those lab and CMAC are relevant to us. We're interested on the left. And as I'm sure you all know our RGB is the representation of the strength of the rays and hexadecimal 008078 is exactly the same colour expressed in a different way. Now how can we build a palette based on this? Now if we take the saturation down it's already a palette of sorts but it's not a very differentiated one and it can be quite bland and monotone so basically 100% is the colour, a fully rich colour and 10% is very close to grey. Now this is saturation palette and you can use that and you would know that people can tell the difference between the colours but it's a bit bland and a bit boring. If you look at brightness on the other hand this starts to be something that you know you can really tell the difference quite strongly. And brightness is interesting because in zero brightness is always black. That's in the presence or absence of any hue, any saturation that's always the same result. But if you do have a colour then 100% brightness is a very bright version of that colour. But there's no hue, no saturation and 100% brightness is pure light. To me that's a really two dimensional way of looking at it and I really like it. So that's why also you should always, if you're a designer you hear it said many times that you should always design in a grey scale first and this is why. So for instance if you wanted to create a valid UI from that green colour that we saw this is it. You can have a really bright version at 80% and the original one and then a much darker version. And you can really stand rest assured that this is going to be visible to everyone. If a client comes to you with a really wild colour palette this is an argument that you can make to that. And say look it's really risky to do that because there's no guarantee that your visitors who use this will be able to see that. Not only that but also you can remind them that if you look at really big websites or really big brands or Facebook, LinkedIn or really big brands they really only ever use one colour because that's a safe way to go about it. You can vary the hue a little bit but you don't really need to because look at the difference. The hue hasn't shifted in degree and yet we perceive them as very different colours but in fact it's exactly the same hue. These are various tools that you can use to help with colour blindness. And Chroma.com is simply their website that sells colour correction glasses but it has a test. So if you've never tested yourself, go and test yourself. It's fun and it might give you surprise. You'll never know. And then Coolers.co is a wonderful tool to create palettes that does a little bit of everything. I don't know whether you've used it or know it but I absolutely love it because you're able to create palettes, lock them and then save them. I have so many saved over there and then it has all the tools that you need to check everything and to create new palettes. For instance here you can play just by clicking a button you can play with tints and shades which is a little bit different than just playing with brightness because when you tint in the real world a tint is a colour when you add white to it let's say in art and a shade is when you add black to it. Now I wonder why it's a little bit different because these colours as you see them the hue doesn't change. What changes is the brightness but also a little bit of a saturation because otherwise you wouldn't be able to sort of replicate. But you could already have a valid palette from this. And then you can also use the tool, if you want to do it manually you can use the tool within Coolers. And also a really good value point to make about colour of the web is also that you should always take the saturation down a little bit because very saturated colours like the ones that we saw earlier when we were looking at the text combinations of complementary colours they tend to vibrate a lot on monitors so it's always safe to go a little bit down with saturation. So you get everything there and you can test for the various types of colour blindness if you don't need to actually know what each one does because you can. Topdol.com you can just put in your web page and test it with a filter. So again super helpful it doesn't have everything but it's very helpful. And then there's a chrome extension that's called Colourblind Dalton and you can use that and you can check any web page for colour blindness issues. And Colourable as well which is a very very very important point that we haven't had time to quite go over but it's testing your text background colours for accessibility. There's many websites that do this. This is at the moment is my favourite one I might change my mind in the future but it's very easy to use and it takes everything into consideration. It tells you what scale of web standards it is and for instance you can also hear often that you shouldn't really have bright text against a dark background but that's a full, I'm not a full blown accessibility expert I'm sure there's people in the room that know much more about it than me but while white and black is bad for certain types of people for others it's better. So it's a little bit of a minefield but these tools are very very helpful to work out whether you're being at least safe and within reason. So an accessible web is a better web do your best at least follow these sort of basic best practice rules so that your colours are accessible. Questions from the floor? I would be delighted. Okay any questions please? Somebody recently said that yellow and black are not good to use because dyslexic people can't see it or is that true? Yes it's true to the point. It's interesting enough that work and language was a really great tool for accessibility by a lady who was using black and yellow but her black was a dark grey and her yellow was a little bit desaturated yellow. We had a long conversation at the end about it and I corrected all my colours according to her. So yes it's true but it depends because I had a very full black and almost acid yellow and that's bad for dyslexic. But she said that it would be alright if it was toned down in the way that she did it. So yes it's as far as I know. Presentations thank you very much. I'm a cartographer so math making is very much to do with utilisation of colour. I've got a couple of comments and another tid if I may or the question. Just on that point about yellow and black it is said to be the highest contrast in terms of perception even more so than whites and black. This is why you see it in places like Heathrow and Edward all the signages in the version of yellow and black. You can gather the soul to a rival company. They had to find alternative schemes although it was inverted. So it was back in yellow rather than yellow and black. The second one was on RGB colour gamins. You said 16.7 million colours and you're right. Most people can't conceive that number of colours. However we can see beyond RGB so that if you knew that CMYK used the print model for colour goes beyond RGB, particularly in greens. So there are greens that you can print that you can't do on the web or on the screen. OK. This is really interesting because I thought that CMYK was actually only like a million colours. That seems for me to be better. It's an infinite colour space but if you look at the green load that comes out of CMYK it's much bigger than the gamut for RGB. It's a good picture on the web to the rest of Australia. Yeah, yeah, yeah. So that was I had wrong information. Thank you. No great because I didn't know that. I mean obviously I know that, I know how many clients have come to us saying oh this looks like nothing, what it looks like in speed. So obviously I know that, that is very different but I didn't know that and of course you can't, there can never be a real equivalent but I didn't know that it was many, I thought it was the other way around. OK. So the next one was on is in chroma glasses. They don't correct colour of the blind. That's all colour of the blind. All they do is they shift things around so the things like reds and greens are above the bar. OK. So it doesn't correct. Why see? So they are a bit sneaky because they... It's how they mark it unfortunately. Yeah, and that's also a solid one. Having a revelation moment, that's not quite true. How long did you see the revelation moment video? I thought it is. Yeah, there's two years, there's everything. We've had a very good marketing thought. Sorry for my rambling but the two... There's another one on a website called colouroracle. That's colour without a U. It's colouroracle.org. And it's... Unlike the tools you mentioned we've worked with in browsers, this one works on a Mac and on a PC. I use a Windows one, it's on assistant tray. It allows you to change your entire screen momentarily to what it would look like to someone with full crotonopia, so that's the full redling or blue efficiency. And to a work with any programme, no matter what you're using, whether you're in Photoshop or on a web browser, you can see what it would look like. So it's a good tool. Great. Thank you so much. Thank you. Do we have any more questions or comments for Peter? How much do you argue with your clients if they stick to a certain colour scheme and you say this will not work, but accessibility? Yeah, I agree the argue, I can't, I won't do it. Cos also, there's so much more to choosing a colour, which is why... I mean, this talk was thought... Cos I know so many developers that say that they have such huge issues creating a colour pattern. I will no wonder that you do, because a client should come to you with brand colours. So a designer should have created the brand colours. If they haven't, you can't just put orange and blue together because you like it. It's not about you first and what it is about your users. So I would say, no, you just can't do that. It hasn't happened yet that they totally don't listen, cos I tend to be the one that creates the palette. So it's very useful to know, because then you can really go in and say, look, you are effectively cutting out a huge portion of the population. If you hit them in the wallet and they say, well, your website is not going to work and it's not going to make the sales that you want, then usually that helps. So that's why it's so important, I think, to just stick to the one colour that you know will work and maybe use an accent colour, but really don't go crazy. And I'm saying that as I work rainbow necklace. I love colour, but there needs to be, it can't be just a whim or what you like. So yes, I would insist with a client, definitely. Good for you. Thank you very much, teacher. Thank you.