What are semantic colours and how should we use them?

In this short, Paul Wilshaw takes on the subject of colours, their use and accessibility.

The way you can think about this in every single colour in your design system should have a definition. What does it do? Exactly the same as a button or an icon or some other piece of design colours should do exactly that same thing. And why do we do this? Because colours are used, and with accessibility and colours, they shouldn't be used on their own to define things, but colours do have the impact – the same things as tone of voice or repeatable and functional things that help users to navigate your app, your website, your service, or whatever you're doing.

Colours shouldn't just be abstract, they need a purpose and need to have their own use and place.

Check out the full article:

https://www.paulwilshaw.co.uk/research-articles/what-are-semantic-colours

Transcript

SPEAKER_00: 0:00

Are semantic colours and how should we use them? So semantic colours are basically colours from your brand that are part of your design system that then do certain jobs and certain things. The way you can think about this is you know, every single colour in your design system should have a definition. What does it do? Exactly the same as like a button or an icon or some other piece of design. Colours should do exactly that same thing. And why do we do this? Because colours are used, you know, and I say this kind of like accessibility and colours shouldn't be used on their own to define things, but colours do have the impact of the same things as kind of voice or kind of repeatable functional things that help users to navigate your app, your website, your service, or whatever you're doing. So colours really define this, and kind of what you see a lot of the time are colours when they're kind of defined by brand, you might have primary, secondary, tertiary, things like that. Don't get me wrong, but what you need to do in the world of design, and then when that translates into code, into development, is that colour then should be consistent. So what colours are used for backgrounds, what colours are used for fonts, what colours are used when you're filling out forms, what colours are buttons, and things like that. And once you define those colours, then it becomes easy for your users to navigate your website because they all know, kind of like you know, you've got your big call-to-action shouty buttons are all in bright orange. Um your softer buttons don't even have a background colour, they just have kind of like your base font color, and then kind of other things, and then that then instantly gives your users confidence that they know clicking on something will automatically do a certain action and define that for them. So, kind of where you can think about this. So, you know, where I've done design systems in the past, we've kind of named our colours very literally to what they do. So I talk about the Ron Seal approach, and if you don't remember Ron Seal, but back in the 90s, they had adverts and kind of it does what it says on the tin. And exactly the same with colours, they should do exactly what they say, and then this then if you then pass on your design system to another person or somebody else, everybody knows exactly what each colour does. So, for example, uh in one of my previous roles, we had a colour called action, and that colour was used for buttons, links, anything clickable, and that was a really easy way to then communicate our design system to anybody else, anybody new coming into it, and it's an action. So that colour uh was ring-fenced to just be an action and not to do anything else. There might be kind of shades of it where we used illustrations and things like that, but in terms of the user interface, action did one thing, and it did that one thing really well. Then kind of like your more popular semantic colours would be positive, negative error states, you know, kind of like then you'd have kind of like maybe your greens, reds, yellows, oranges, whatever, you know, depending on where you are in the world as well, because colours mean different things in parts of different parts of the world. So, you know, bear that in mind, you know, kind of when you're doing something in you know, kind of like red is a negative colour in the western world, but actually it's a positive colour in kind of like eastern and south africa and things like that. That red is quite a positive colour, and you know, kind of red's quite a nice colour. So when I press stop recording, I know the red will stop and change, and that that gives me confidence that I know what this UI is doing, and the same kind of thing for your mobile phone, you know, when you know you'll end a call because it's a a red handset down, and instantly you can kind of just scan that screen to know exactly what something does in something in exactly the same place. So just bear that in mind, you know, and then you start creating these patterns that then, you know, as the famous Don Norman says, don't make me think. When you create colour patterns, you're making the same thing. The look around kind of like the weather world, you know, take uh inspiration from there, exit signs and cinemas and things like that, you know, the green, because they're kind of like visible and past to show you where to go and what to do, you know, and things like that. You know, how do you want to, you know, tell your users, your customers, what they're doing, the website and kind of your app. So Apple go into this and and they talk about in their human interface guides that you know colours are very important part to provide visual continuity and communicate status information and give feedback to customers. And a lot of time, you know, if you think about screens, like not many people read every single word on a screen anymore, you know. So those colours kind of really help people to visualize what they're gonna do and what they're gonna uh take them to do next. Look for the colour, you know, and kind of that colour scheme and it part sets, you know, without any words, without any logos, that colour becomes kind of part of your brand, part of your identity to just keep on doing that, you know, and use it for communication. And the colour is really powerful, and you can call attention to things, you can make things kind of really important by doing things that are strongly contrast against each other. So, for example, you know, one of the strongest on the opposite end of the spectrum, white and black. If you want to really shout at something, use that really strong colour contrast to say, this is really important, you've got to follow these steps, you know. Kind of like I'm gonna take, you know, uh£100 out of your bank account when you press this button, those kind of things, you know, and they are really important. Another kind of like mistake people get into is you know, they use a vast range of colours, and you have too many colours, and then kind of you get into this confusion, not only as a designer and a UX person, what colour should be used where, you know, and if there's confusion in your design system or your screens, and you're thinking, like, oh, shall I use this colour here? Should I use that colour there? And if you've got too many colours, you can sometimes fall into the trap of you know creating a confused and links cars prime example website where you're not quite sure what things do and what things are where. So maybe even consider kind of like a limited colour palette, and you know, build those colours up over time. You might want to start with like four or five colours and think about you know your buttons are in this, your text, your backgrounds, you know, there's three warnings, errors, positive interactions, things like that. So you might want to start with you know very subset of colours, and then you can add to those on time, and then you can add those visual excitement and kind of like open it up to a wider range of colours as your system grows, as your you know, service grows, add to add to those colours and when you need to, but you know, don't get into the trap of thinking like you've got to define 300 colours, you've got to define every single shade of this because you may never use it, you know. If you're using something like tailwind, or if you're using other colours, you may want to define those shades, but actually you may never need those, you may just want to define you want to use the colour weight of 500. So, you know, with tailwind, colours come in different weights, kind of like the lower end of the scale, zero, you have a lighter colour at the darker end, heavy end, like 900, you have the darkest version of that colour. So you may want to have those, but again, if you've got more of those, you get into confusion on which, if you question yourselves, what colour shall I use here, and what colour should I use for this interaction, then probably you've got too many colours to kind of in your palette and start be ruthless and trim some of those things out. What it does, you know, if you've got an app bar at the bottom with some of your navigations, you know, what are the colour highlights, what are the colour that really kind of like bring you know your visual identity, but also that confirmation and that kind of comfort for your users to know what they're doing, you know, kind of think about you know, colour accessibility as well, the contrast of colours. There's loads of great tools out there. Check out WebAim. I use a little app on my Mac called Contrast Mac only, sorry, Windows Peoples. If you can just eye drop your screen anywhere and choose the background colour and the foreground colour, and it'll instantly give you a rating of what that colour contrast is, and make sure you know those contrasts are strong enough for people to determine what is strong enough so that you can kind of see it, you know. Do the squint test as well. Think about kind of like you know, those colours, how they work together. If you squint at a screen, are they still you know visible to each other? Do they still look the same? You know, maybe if you can do some user test and find some users who have colour blindness, and you know, I've worked with a couple of developers and they were colourblind. And uh every time kind of I went to uh do kind of like add a new colour, I'd check it with them first, and I'd check in kind of like, oh, does this make sense? Does this make sense to you? Kind of like I wanted to add that new thing in, or this is the new colour I want to add in here. What do you think? Does it go with this? And a lot of people as well, colour contrast, they you know, it's not just text against the background, it's all elements like buttons against the background, illustrations, your brand identity, some logos, you know, if that's against you know, if they're very similar colours, then people aren't going to be able to read that and going to be able to see it exactly the same as text on the background as well. So consider other things as well, not just text on a background, how that works, you know. If you've got focus states for buttons, can you see those focus states? You know, if you're using yellow and then start putting your buttons on a yellow kind of or a kind of cream background, then the focus state isn't as visible to loads of people, you know, on those backgrounds to think about those colour combinations and how you work. And you might want to have colour combo kits, so kind of get a kit and kind of say, This is the colour combo on this background, this is the colour combo on this background, you know, and just have kind of three or four colours that just sit on that, and then you create this really nice consistency as designers and as UX people, we don't have to think about, we don't have to worry about those particular things, you know, and kind of stress over those. And then our users then they get comfortable, they know exactly what to do and exactly how to do it. You know, think about you know, if you want some visual decoration and structure, maybe you want less colour contrast on those as well. So think about you know the structural things, the scaffolding on your web page. How do you break up sections and how do you break up areas? Are you using white space that could be dark space, could it be shapes, could it be lines? And you probably don't want those as super colour contrasty as other things, because you probably don't want to have like big full stops with those structure things that really kind of like stop the flow of that page. We mentioned it in a previous episode, scrolly telling, you know, kind of think about kind of like visual and colours as if you're writing a novel or uh you know a short story, and how you put those things together. If you're putting big colour blocks in between, that's kind of like a new paragraph, a new chapter. If you're putting kind of more softer things to break up the page, you know, is that a full stop, uh uh a new kind of line, or uh does it break up a few uh sentences, things like that, or you know, are you telling somebody it's a totally different section and you want somebody to really kind of like, you know, this is this is different, this is an interaction you need to be aware of. So, what does that do? And think about those, you know, and kind of think globally as well, you know, kind of if you've got colour doing one thing here, imagine if you change the brand tomorrow. How would that affect your website, your app, or however you're going to do it? Would it be easy to change? You know, could you change it quite quickly? Would those colours then have a knock-in effect? If you've got a six-month dev time to kind of like go like, oh, I've got this colour here, that colour there, you've probably got too many colours. Think about system thinking and thinking about you know how those colours are intertwined in between everything, and and don't just think like, oh, this colour looks nice, this colour looks nice. Test it out in scenarios, test it out, you know, kind of like change, kind of like take take a page, take a screen, and kind of apply those colours to that screen, and you know, kind of like quite quickly that those colours are gonna work, you know. If you abstract it out, you know, kind of like anything you if you abstract colours out of kind of where you're gonna use them, then you know, you can't guarantee that those colours will be used in the right way by everybody else, and you know, kind of like I uh quite often hear kind of like, oh, I I know the the rules for using the colours. Well, that's cool, but if you've got to explain those rules to every single person you meet, not only is it super tiresome for yourself, but then you know, it's not a good uh indication of kind of how you can then communicate those to anybody else who doesn't have the luxury of sitting with you or having a Teams call or Zoom chat with you to kind of indicate that and take that through to the next thing. So think about all those things, you know. There's some great resources out. There's uh lift have a colour, and you can choose kind of like the base colour and the end colour, and it gives you instantly all the ranges in that. There's there's other things out there as well, like Adobe colours spelt differently, and you can choose your palette and how that works and how that interacts. And then there's loads and loads of if you use Figma like me, there's loads and loads of great plugins that can instantly just a few clicks of a button define your whole styles of colours and the all the colours in between them. So do check out all those resources. I'll put some in uh the chat below here. Also, kind of like you know, share your colours, let's have a look at them, you know, put them out on the web or your colours, you know, let's get a bit of a community. So that's it on colours. You know, what do you think? What are your colours? You know, share, let's get them out there, let's think about what colours we're doing, what colours we're using, and let's think accessibly as well. That's one of the easiest accessibility things you can put in, you know, it's just checking the colour contrast. So let's all do that, let's all go and get our colours super accessible, and that's it. Peace.