Skip to content

Why colour is important in website design

I’ve read that 4–5% of the population has some form of colour blindness. Has your design taken that into consideration, or were the colour schemes chosen as a thoughtless variation on your corporate colours?

Play around with the colours and sliders on this contrast checker and you might be surprised at what fails. Just because it looks good to you doesn’t mean it looks good to everybody. Size is important too: the smaller the text, the greater the contrast that many readers require.

In the early days of web design, links were denoted by underlined blue text. The contrast between the blue text and the surrounding text may not have been great, but for those who couldn’t distinguish the two, the underlining was always there. Nowadays many web designers have decided to get rid of that underlining, relying on just the colour to denote the link. That’s OK, if the contrast is obvious to everyone – but that’s often not the case.

Forms are another area of concern. Lightly coloured ‘placeholder text’ is often used inside the fields on a form, to give an example of what might be entered. That’s fine, until some designers decided that the existence of the placeholder text allowed the labels on the fields to be dispensed with. Some forms are now just a bunch of light grey rectangles with light grey sample text inside them. This is a real problem for some users.

If you use the Chrome browser, add an extension called “I want to see like the colour blind“. With this, you can see your web pages as people with colour blindness do. There’s also a Windows app called Color Oracle.