What are semantic colours?
Listen to this article 👆
What are semantic colours and how should we use them?
Semantic colours are basically colours from your brand and they are part of your design system that then do certain jobs and certain things. The way you can think about this is 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, 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.
“when that translates into code, into development, that colour should be consistent”
So colours really define this and what you see a lot of the time with colours, when they defined by brand, you might have a primary, secondary tertiary things like that, don't get me wrong, but, what you need to do in the world of design and 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 on 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 , you've got your big call to action shouty buttons are all in bright orange, and, your softer buttons don't even have a background colour, they just have your base font colour and then other things. Then instantly gives your users confidence that they know clicking on something will automatically do a certain action and define that for them. So where you can think about. So yeah. Where I've done design systems in the past, we've named our colours very literally to what they do.
Ronseal TV advert “Does what it says on the tin”.
So, I talk about the Ronseal approach, and if you don't remember Ronseal, but back in the nineties they had adverts and , it does what it says on the tin and exactly the same colours. They should do exactly what they say. And then this, then if you will then pass on your design system to another person or somebody else, everybody knows exactly what each colour does.
So for example, 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, it was ring-fenced to just be an actual and not to do anything else that might be shades of it, where we used illustrations and things like that.
“Don’t make me think”
But in terms of the user interface, action did one thing and it did that one thing really well then . You've more popular, semantic colours would be positive, negative error states. And , then you'd have maybe your greens, reds, yellows, oranges, whatever, depending on where you are in the world as well, because colours mean different things in different parts of the world. So bear that in mind, when you're doing something and , why red is a negative colour in the Western world, but actually it's a positive colour in, Eastern continents and South Africa, things like that. That red is quite a positive colour reds, 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 thing. If your mobile phone when you end the call because it's a red handset down and instantly you can just scan that screen to know exactly what something does and something in exactly the same place. So just bear that in mind and then you start creating these patterns that then, as the famous Steve Krug says, "Don't make me think" When you create colour patterns you'll make him the same thing, the look around where the world and take inspiration from there, exit signs in cinemas, and things like that, the green because that visible and pass to show you where to go on, what to do, and things like that, how do you want to, tell your users, your customers, what they're doing on your website or on your app so Apple go into this and they talk about in their human interface guides that colours are a very important part to provide visual continuity and communicate status information and give feedback to customers and a lot of time.
A layer-cake eyetracking heatmap obtained from 9 study participants shows that they fixated mostly on the subheadings (and buttons) on a page on bacnyc.org.
If you think about screens, like not many people read every single word on a screen anymore. Those colours can really help people to visualize what they're going to do and what it can take them to do next look for the colour and that colour scheme and it in part sets without any words, without any logos, that colour becomes part of your brand, part of your identity to just keep on doing that, and use it for communication and the colour is really powerful – then you can call attention to things. You can make things can really important by doing things that are strongly contrasting against each other. So for example, one of the strongest contrast on the opposite end of the spectrum are 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, I'm going to take a hundred pounds out of your bank account when you press this button – those kinds of things, and they are really important. Another mistake people, get into is, they use a vast range of colours and you have too many colours and then you get into this confusion, not only as a designer or a UX person, what colour should be used, where, and if there's confusion in your design system or your screens and you're thinking like, oh, should I use this colour here? I should have used that colour there and if you've got too many colours, you can sometimes fall into the trap of, creating a confused and Ling's Cars – a prime example website where you're not quite sure what things do, what things are where, so maybe even consider a, a limited colour palette. Build those colours up every time you might want to start with like four or five colours and think about your buttons are in this, your text, your backgrounds there's three. Warnings, errors positive interactions things like that.
So you might want to start with a very subset part of colours. And then you can add to those on time and then you can those those visual excitement and open it up to a wider range of colours as your system grows, as your service grows add to those colours and when you need to, but 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, if you're using something like Tailwind or if you're using other colours you may want to define those shades, but eventually you mean never need those. You may just want to define, you want to use the colour weight of 500, so with Tailwind colours come in, different weights you can apply the lower end of the scale is zero you have a lighter colour at the darker and 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, which, if you question yourself, what colour shall I use here and what colour shall I use for this interaction probably – you've got too many colours in your palette and start to be ruthless and trim some of those things out.
Semantic colours in action, using a simple pallet of colours to define their use.
What, what it does, if you've got an app bar at the bottom with some of your navigations, what are the colour highlights? What the colour that really can brings out your visual identity? But also that confirmation, that comfort for your users to know what they're doing try and think about, colour accessibility as well. The contrast of colours, there's loads of great tools out there. Check out Web Aim – I use a little app on my Mac called Contrast, Mac only, sorry Windows people, you can just eye-drop your screen anywhere and choose the background colour and the foreground colour and it will instantly give you a rating of what that colour contrast is and make sure those contrasts are strong enough. For people to discern, to determine what is strong enough so that you can see it easily – do the squint test as well.
Think about, those colours, how they work together, if you squint at a screen are they still visible to each other? Do they still look the same? Maybe, if you can do some user testing and find some users who have colourblindness and, I've worked with a couple of developers and they were colour blind and every time I went to add a new colour, check it with them first, and I'm checking, "oh, does this make sense?" Does this make sense to you? 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? So and a lot of people as well, colour contrast , it's not just text against the background it's other elements like buttons against the background. Illustrations, your brand identity, some logos, if that's against, if they're very similar colours Then people aren't going to be able to read that, going to be able to see it, exactly the same as texts on the background as well – so consider other things as well, not just text on a background, how that works. If you've got focus states for buttons, can you see those focus states? , if you're using yellow and then start putting your buttons on a yellow, or a cream background, then the focus state isn't as visible to loads of people, on those backgrounds – so think about those colour combinations and how you work, and you might want to have colour combo kits. So get a kit and say this, the colour combo on this background, this is the colour combo on this background, and just have 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. We don't have to worry about those particular things, and stress over those. And then our users, then, they get comfortable. They, know exactly what to do and exactly how to do.
Think about, if you want some visual decoration and structure, maybe want less colour contrast on those as well. So think about, the structural things, the scaffolding on your webpage, 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 stop the flow of that page. We mentioned it in a previous episode, of Faster Horses Podcast, Scrolly-telling. Think about visuals and colours as if you're writing a novel or 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 and new chapter. If you're put in more softer thingsto breakup the page, is that a full stop, a new line, or does it break up a few sentences? Things like that, or, are you telling somebody it's a totally different section? And you want somebody to really, take note, this is different, this is an interaction you need to be aware of – so what does that do when thinking about those, and think globally as well, if you've got one colour doing one thing here imagine if you changed 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? , could you change it quite quickly? Would those colours, then have a knock-on effect. If you've got six months dev time to kinda like go like, oh, got this colour here, that colour there, you've probably got too many colours.
“And don’t just think like, oh, this colour looks nice, test it out in scenarios, take a page, take a screen and apply those colours”
Think about system thinking and thinking about, how those colours are intertwined in between everything. And don't just think like, oh, this colour looks nice, test it out in scenarios, test it out – take a page, take a screen and apply those colours to that screen then you know, quite quickly, that those colours are going to work. If you abstract it out, like anything, if you abstract colours out ofwhere you're going to use them, then, you can't guarantee that those colours will be used in the right way by everybody else and quite often I hear, "oh, 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, it's not a good indication 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 indicate that and take that through to the next thing. So think about all those things.
There's some great resources out there; a Lyft have a colour app, you can choose, the base colour and the end colour and it gives you instantly all the ranges in that colour. There's other things out there as well. Adobe Color – you can choose, your palette and how that works and how that interacts. And then there's loads and loads of people who 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 all the colours in between, so do check out all those resources i'll put some in the chat below here, also ,share your colours, let's have a look at them, put them out on the web, what are your colours? Let's get a bit of a community.
So that's it on colours, what do you think? What are your colours? Share, let's get them out there, let's think about what colours we're doing, what colours are you using and let's think accessibly as well. That's one of the easiest accessibility things you can put in, 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.
