Colour

Concluding my look at the decisions I made while designing this website, this article looks at the issues surrounding colour.

The purpose of colours

Colour hasn’t always been my strong point, but I feel like I am getting better and better at it. I am quite proud of the use of colour in this design.

Using colour correctly requires a lot of discipline. I have set clear rules about what each colour means. Similar to my ‘less is more’ approach, I don’t give an element a different colour unless there is a purpose to that colour.

For a number of years, I have used the teal colour #0080a4. As it is not neutral, I cannot use it as a primary colour, but it works well as a colour for links.

At one point during the design process, I chose this shade for something other than a link. Then I realised that just by using that colour, users could be confused into believing that it is a link when it is not. I came to see using #0080a4 for anything other than a link as an offence similar to using underlined text.

That’s not strictly true. The teal colour has come to mean any interactive element. That covers links, form fields and buttons — anything the user can interact with.

I use complementary teal shades — one lighter #00bcf0 and one darker #004e64 — for other elements of the design.

I have chosen a strong complementary orange colour (#f07500) for active and hover elements. This is the opposite on the colour wheel to the light teal. (The opposite of my main teal shade is a rather unappealing brown. The orange is much more attractive.)

I used Adobe Kuler to help me arrive at these colours.

Using colour for accessibility

When working with the default WordPress theme Twenty Ten, I was struck by just how clearly the user could navigate through the design using their keyboard only.

Often navigating a page using the tab key is possible, but it can be a frustrating experience as it is easy to lose where the focus is. But in Twenty Ten, there is no such doubt. Clever use of contrasting colours makes it a joy to navigate around the page using the keyboard.

I wanted to take a similar approach with this website design, and hopefully I have achieved that.

Avoiding black and white

I have often tried to use off-white and not-quite-black shades in my designs. But it never seemed to work quite as well as I had hoped.

As I was starting work on this design, I read an article from Ian Storm Taylor — Design tip: Never use black. It was hugely influential on how I thought about colour on this website.

Problem is, we see dark things and assume they are black things. When, in reality, it’s very hard to find something that is pure black. Roads aren’t black. Your office chair isn’t black. The sidebar in Sparrow isn’t black. Words on web pages aren’t black.

So I have avoided ‘pure black’ in this website. The text is close to black, but it has a hefty amount of teal injected into it as well. The footer too.

And although Ian Storm Taylor doesn’t say that you should avoid white, I opted also to avoid ‘pure white’ (as I often have done in the past). Again, injecting just a shade of the teal into white has given this design a background colour that isn’t white, but feels as good as.